JavaScript模板入门介绍


Posted in Javascript onSeptember 26, 2012

比如要在一个列表中利用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 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
js实现自定义滚动条的示例
Oct 27 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 #Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 #Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 #Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 #Javascript
js DOM 元素ID就是全局变量
Sep 20 #Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 #Javascript
JavaScript 更严格的相等 [译]
Sep 20 #Javascript
You might like
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
自我评价的范文
2014/02/02 职场文书
环保建议书600字
2014/05/14 职场文书
学校运动会霸气口号
2014/06/07 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android