JS模板实现方法

概述

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

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

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

替换（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');

}

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

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