软件开发培训班 >> 编程开发 >> JavaScript


JS模板实现方法

　　本文标签：JS模板,实现方法

概述

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

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

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

替换（Substitute）

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

1. 定义替换函数

复制代码 代码如下:

2.使用配置项：

复制代码 代码如下:

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