JavaScript模板入门介绍
时间:2024-06-21 22:06:17
比如要在一个列表中利用ajax插入一个li的时候,我会直接把数据跟html标签拼接成一句完整的html,然后插入到ul中。无论数据是从服务器端拿回的,或者是从用户的input输入中拿到的——无论哪种方法都是一样。
这个拼接过程放在JavaScript文件中,显得非常不优雅。如果还把style也放在JavaScript中,那数据、结构还有样式整个就是一锅粥了,要维护这样的代码会让人想 * 。最过分的就是把页面上最终要生成的HTML都直接放在服务器端,ajax吐出数据就包含了<li>标签,这样的页面几乎不存在扩展性了,修改一个前台样式都要涉及后台代码的修改。
后来我们知道了不要在JavaScript中对DOM进行style定制,而是只需要在CSS文件中定义好对应的class,然后在JavaScript中使用这个class就好。
接下来我们要做的就是用JavaScript模板把HTML结构(在这个案例中,是<li>标签)也从JavaScript中分离。
市面上的JavaScript模板很多了,以handlebars这个优秀的模板为例吧:
我们在页面的html中定义模板:
<script id="list-template" type="text/x-handlebars-template">
<li>{{title}}</li>
</script>
然后在我们的逻辑JavaScript代码中可以把数据拼接到这一模版中:
var source = $("#list-template").html(); //模板源,一般放在html的script中,这里我们使用jQuery,也可以使用其它方法直接获得内容字符串
var template = Handlerbars.compile(source); //编译生成一个模板template
var context = {title:"This is a todo item"} //获得数据,数据一般从ajax或者input中取得
var html = template(context); //数据+模板=新的html
这就是基本的 用法了,更多逻辑可以参考官方文档:http://handlebarsjs.com/
标签:JavaScript,模板入门
0
投稿
猜你喜欢
AjaxUpLoad.js实现文件上传
2024-05-11 09:42:07
python mysql项目实战及框架搭建过程
2024-01-21 22:51:50
SQLserver查询数据类型为ntext是空或NULL值的方法
2024-01-24 18:40:52
javascript验证IP地址等验证例子
2007-09-11 13:40:00
Python 新建文件夹与复制文件夹内所有内容的方法
2022-03-22 00:05:05
SQL Server的链接服务器技术小结
2024-01-17 03:41:22
一文详解kubernetes 中资源分配的那些事
2024-05-22 17:47:57
Python判断字符串与大小写转换
2021-07-17 03:23:35
ASP 下载时重命名已上传文件的新下载文件名的实现代码
2012-11-30 20:33:45
asp获取文件md5值
2008-10-13 09:10:00
详解vue项目中调用百度地图API使用方法
2024-05-09 09:38:29
一个模仿oso的php论坛程序源码(之二)第1/3页
2024-05-02 17:07:10
段正淳的css笔记(1)分类之间的横竖线
2007-11-01 21:47:00
教你如何在SQL Server数据库中加密数据
2009-09-10 14:49:00
Kettle下载与安装保姆级教程(最新)
2023-07-29 17:10:41
Python深度学习实战PyQt5信号与槽的连接
2023-03-07 20:33:43
python进阶之多线程对同一个全局变量的处理方法
2023-09-29 19:03:58
[译]开发人员经常犯的8个设计错误
2008-02-01 12:28:00
利用Python2下载单张图片与爬取网页图片实例代码
2023-06-25 00:57:22
innodb_flush_method取值方法(实例讲解)
2024-01-13 10:12:44