分享一个比较简单,又能拿出去装逼的技术——JS字符串拼接。
适用人群:JS学习爱好者;
适用场合:跟一群JS初学者在一起时、跟女同学独处时等。
那么接下来开始吧:
1、假如我需要画出三个盒子,每个盒子里面分别是姓名和年龄,那么我的代码可以这么写(当然,你也可以尝试到浏览器观看效果,看看是否会与结尾呈现的最终要过一致):
2、但是,目前我的需求是比较简单的,只有三个盒子,就算把名字和年龄全改了,也不会太麻烦。而现在如果有100个div,那么你就需要输入100次人名和年龄,那么这是非常痛苦的,显然不能把这些数据写死。这种情况往往我们会从后台调取一些数据,而在前台的代码中,我们需要让这些数据“变活”,这个时候,可以参考下面的做法:
① 先定义一个数组,用来存放这些数据:
② 将div>h1+p的这个结构复制一下,然后通过JS将它们以字符串的形式拼接起来:
③ 现在看到的文字(张三 and 此人今年23岁)是一个错误的写法,而且就算加了引号,也是变成了字符串,那么这个值就是死的,这样就无法动态控制这些数据,于是,我们可以开始考虑,将上面数组中的数据导入到现在文字所处的区域。
这里有两个步骤要注意:
一是先将原先html中的所有代码注释掉,避免干扰;
二是可以通过for循环来将三组数据遍历到文字所在的地方,具体方法如下:
④ 这里有个小地方要解释一下,bd指的是body标签的id名。
3、通过这个方法,就可以实现将data里面的数据全部转移到页面中呈现,最终的效果与一开始是一样的:
4、最后总结一下:这里面运用到的知识其实很浅,更好的说法是:这只是一个网页开发的小技巧,希望大家可以作为参考与了解!
此处提供源码下载: