我们在使用 JS 渲染 DOM 时,一般使用字符串创建 DOM 然后附加到父元素上,如果附加的 DOM 是动态易变的,那需要在函数中写大量逻辑。如果在控件实现过程中,这带来的问题更为严重。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们在使用 JS 渲染 DOM 时,一般使用字符串创建 DOM 然后附加到父元素上,如果附加的 DOM 是动态易变的,那需要在函数中写大量逻辑。如果在控件实现过程中,这带来的问题更为严重。
解决这个问题的常见解决方案是是使用模板,作为配置项传入控件,实现数据和渲染的分离。具体的实现方法有以下方法:
字符串替换是最简单的实现模板的方式,看一下具体的实现:
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];
});
}
来源: