JS模板实现方法

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

复制代码代码如下:
varstr=substitute(template,data);

$(str).appendTo("body");

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

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

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

如"<label>{0}</label><inputtype="text"value="{1}"/>"

2.嵌套使用对象属性：

如"<label>{obj.name}</label><inputtype="text"value="{obj.value}"/>"

优点：实现简单，易于理解。

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

渲染方法（Render）

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

配置项：

复制代码代码如下:
varconfig={

data:[{value:"0",text:"abc"},{value:"1",text:"bcd"}],

renderer:function(obj){

if(obj.value==="0"){

returnobj.text;

}else{

return"<imgtitle=""+obj.text+""src=""/>";

}

}

};

在使用时：

复制代码代码如下:
for(vari=0;i<data.length;i++){

varobj=data[i],

str=config.renderer(obj);

$(str).appendTo("body");

}

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

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

缺点：

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

模板引擎（XTemplate）

每一个JSUI库都会有一个功能强大的模板引擎，一个模板引擎需要实现以下功能：

1.字符串替换

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

3.使用内嵌函数

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

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

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

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

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

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

下面是Ext的xtemplate使用方式：

复制代码代码如下:
vartpl=newExt.XTemplate(
"<p>{name}\"sfavoritebeverages:</p>",
"<tplfor="drinks">",
"<div>-{.}</div>",
"</tpl>"
);
tpl.overwrite(panel.body,data);

优点：功能强大，灵活性高

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

问题思考

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

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

本文地址： JS模板实现方法