我们在使用JS渲染DOM时，一般使用字符串创建DOM然后附加到父元素上，如果附加的DOM是动态易变的，那需要在函数中写大量逻辑。如果在控件实现过程中，这带来的问题更为严重。
概述
我们在使用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];
});
}
以上就是JS模板实现方法的详细内容，更多请关注0133技术站其它相关文章！
未经允许不得转载：0133技术站首页 » JavaScript 教程
