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 相关文章推荐
javascript 冒号 使用说明
Jun 06 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
Jquery ui css framework
Jun 28 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
JS实现京东商品分类侧边栏
Dec 11 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与php MySQL 之间的关系
2009/07/17 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php发送post请求的三种方法
2014/02/11 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
python读取文本绘制动态速度曲线
2018/06/21 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python中自带的三个装饰器的实现
2019/11/08 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
python实现井字棋小游戏
2020/03/04 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
商务英语专业毕业生求职信
2014/07/06 职场文书
六一儿童节开幕词
2015/01/29 职场文书
公司转让协议书
2016/03/19 职场文书
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
MySQL创建管理RANGE分区
2022/04/13 MySQL