JS模板实现方法


Posted in Javascript onApril 03, 2013

概述

我们在使用JS渲染DOM时,一般使用字符串创建DOM然后附加到父元素上,如果附加的DOM是动态易变的,那需要在函数中写大量逻辑。如果在控件实现过程中,这带来的问题更为严重。

解决这个问题的常见解决方案是是使用模板,作为配置项传入控件,实现数据和渲染的分离。具体的实现方法有以下方法:

  1. 字符串替换,使用正则匹配将数据替换进字符串中。
  2. 渲染函数,函数返回字符串。
  3. 模板引擎,可以将执行字符串中的函数(内置或者自定义的)

替换(Substitute)

字符串替换是最简单的实现模板的方式,看一下具体的实现:

1. 定义替换函数

/**
* 替换字符串中的字段.
* @param {String} str 模版字符串
* @param {Object} o json data
* @param {RegExp} [regexp] 匹配字符串的正则表达式
*/
function substitute(str,o,regexp){
return str.replace(regexp || /\\?\{([^{}]+)\}/g, function (match, name) {
return (o[name] === undefined) ? '' : o[name];
});
}

2.使用配置项:

var config = {
data : {value : '123',text:'abc'},
template : '<label>{text}</label><input type="text" value="{value}"/>'
};

3. 在创建DOM的过程中我们这样调用:

var str = substitute(template,data);
$(str).appendTo('body');

通过以上示例,我们就完成了数据和字符串的解耦,可以灵活的用在控件中,当前大多数JS框架都提供了此种方式的模板。

在此基础上可以有下面的扩展,感兴趣的可以自己去实现:

1. 使用数字代替参数名:

如 '<label>{0}</label><input type="text" value="{1}"/>'

2. 嵌套使用对象属性:

如 '<label>{obj.name}</label><input type="text" value="{obj.value}"/>'

优点:实现简单,易于理解。

缺点:只能进行简单的数据结构,无法处理循环、条件语句。

渲染方法(Render)

我们可以在渲染函数中处理非常复杂的逻辑,可以将渲染函数作为参数传入配置项。

配置项:

var config = {
data : [{value : '0',text:'abc'},{value : '1',text:'bcd'}],
renderer : function(obj){
if(obj.value === '0'){
return obj.text;
}else{
return '<img title="' + obj.text + '" src=""/>';
}
}
};

在使用时:

for(var i = 0 ; i< data.length; i++){
var obj = data[i],
str = config.renderer(obj);
$(str).appendTo('body');
}

在处理循环,条件语句时,这是一种很好的解决方案。

优点:实现相对简单,实现灵活,能满足复杂数据结构,易于调试

缺点:

  1. 渲染函数作为配置项,不易理解。
  2. 函数较长时,使配置项臃肿。
  3. 每个场景都需要自己实现渲染函数。

模板引擎(XTemplate)

每一个JS UI库都会有一个功能强大的模板引擎,一个模板引擎需要实现以下功能:

1. 字符串替换

2. 处理复杂语句 条件、循环

3. 使用内嵌函数

4. 允许用户传入自定义函数

目前的模板引擎有2种常见的实现方式:

1. 使用正则分析字符串,执行其中的特殊语句逻辑,替换对应的数据

我们来看一下KISSY 模板的一个实例:

'Hello, {{#each users}}{{#if _ks_value.show}}{{_ks_value.name}}{{/if}}{{/each}}.'

上面这是一个模板,可以处理循环、条件语句。

2. 对字符串进行语法分析,生成语法树,执行替换对应的标签或数据。

下面是Ext的 xtemplate使用方式:

var tpl = new Ext.XTemplate(
'<p>{name}\'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
tpl.overwrite(panel.body, data);

优点:功能强大,灵活性高

缺点:使用复杂,更加不易理解。不便于调试。

问题思考

1. 控件中使用模板,可以将数据和DOM分离,但是如果一个控件中包含大量的模板,会增加使用者的工作量,而且不易于调试,需要权衡使用。

2. 如果大量控件使用相同的模板,和相同的数据结构,每个控件单独配置不便于使用,更好的方案是允许父控件配置模板。

 

Javascript 相关文章推荐
最新28个很棒的jQuery 教程
May 28 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
JS实现标签页效果(配合css)
Apr 03 #Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 #Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 #Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 #Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 #Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 #Javascript
JS获取浏览器版本及名称实现函数
Apr 02 #Javascript
You might like
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python urllib和urllib3知识点总结
2021/02/08 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
师生聚会感言
2014/01/26 职场文书
爱情保证书范文
2014/02/01 职场文书
晚会主持词开场白
2014/03/17 职场文书
装修协议书范本
2014/04/21 职场文书
给校长的建议书600字
2014/05/15 职场文书
安全环保演讲稿
2014/08/28 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python