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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
武汉东之林科技有限公司机试
2013/09/17 面试题
C#可否对内存进行直接的操作
2015/02/26 面试题
回门宴新郎答谢词
2014/01/12 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
JS class语法糖的深入剖析
2022/07/07 Javascript