JavaScript模板入门介绍_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:05:07

JavaScript模板入门介绍_javascript技巧

JavaScript模板入门介绍_javascript技巧:比如要在一个列表中利用ajax插入一个li的时候，我会直接把数据跟html标签拼接成一句完整的html，然后插入到ul中。无论数据是从服务器端拿回的，或者是从用户的input输入中拿到的——无论哪种方法都是一样。这个拼接过程放在JavaScript文件中，显得非常

推荐度：

点击下载本文 文档为doc格式

导读JavaScript模板入门介绍_javascript技巧:比如要在一个列表中利用ajax插入一个li的时候，我会直接把数据跟html标签拼接成一句完整的html，然后插入到ul中。无论数据是从服务器端拿回的，或者是从用户的input输入中拿到的——无论哪种方法都是一样。这个拼接过程放在JavaScript文件中，显得非常

比如要在一个列表中利用ajax插入一个li的时候，我会直接把数据跟html标签拼接成一句完整的html，然后插入到ul中。无论数据是从服务器端拿回的，或者是从用户的input输入中拿到的——无论哪种方法都是一样。
这个拼接过程放在JavaScript文件中，显得非常不优雅。如果还把style也放在JavaScript中，那数据、结构还有样式整个就是一锅粥了，要维护这样的代码会让人想自杀。最过分的就是把页面上最终要生成的HTML都直接放在服务器端，ajax吐出数据就包含了

标签，这样的页面几乎不存在扩展性了，修改一个前台样式都要涉及后台代码的修改。

后来我们知道了不要在JavaScript中对DOM进行style定制，而是只需要在CSS文件中定义好对应的class，然后在JavaScript中使用这个class就好。

接下来我们要做的就是用JavaScript模板把HTML结构（在这个案例中，是

标签）也从JavaScript中分离。

市面上的JavaScript模板很多了，以handlebars这个优秀的模板为例吧：

我们在页面的html中定义模板：
代码如下: