JavaScript模板实现方案：字符串替换、渲染函数与模板引擎对比

概述

在JavaScript开发中，渲染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');

通过上述示例，实现了数据与字符串的解耦，使其能灵活应用于控件开发。目前大多数JavaScript框架均提供了类似功能的模板支持。

在此基础上，可进行以下扩展，有兴趣的开发者可自行实现：

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）

每个JavaScript UI库通常都包含功能强大的模板引擎，一个完整的模板引擎需具备以下功能：

1. 字符串替换

2. 处理复杂语句，如条件判断、循环遍历

3. 支持内嵌函数调用

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

目前的模板引擎主要有两种常见的实现路径：

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

以KISSY模板为例：

上述模板示例展示了如何处理循环与条件语句。

2. 对字符串进行语法分析，生成抽象语法树（AST），随后执行替换对应的标签或数据。

以下是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. 若大量控件复用相同的模板与数据结构，逐个配置显得繁琐。更优的方案是允许父控件统一配置模板，以提高复用性。