如何实现一个基于DOM的模板引擎

});

return dependencies;

}

经由过程正则表达式 dependencyRE 匹配出可能的变量依附后，还要进行一些比较，比如是否是全局变量等等。效不雅如下：

其实该函数只做了两件事：

遍历该节点的所有属性，经由过程断定属性类型的不合来做不合的操作，断定的标准就是属性名是否是冒号 : 开首并且属性的值不为空;
绑定响应的指令去更新属性。

extractDependencies(`typeof String(name) === 'string'  && 'Hello ' + world + '! ' + hello.split('').join('') + '.'`); 
// => ["name", "world", "hello"]

这恰是我们须要的结不雅，typeof, String, split 和 join 并不是 data 中所依附的变量，所以不须要被提掏出来。

generate

export function generate(expression) { 
    const dependencies = extractDependencies(expression); 
    let dependenciesCode = ''; 
 
    dependencies.map(dependency => dependenciesCode += `var ${dependency} = this.get("${dependency}"); `); 
 
    return new Function(`data`, `${dependenciesCode}return ${expression};`); 
}

我们提取变量的目标就是为了在 generate 函数中生成响应的变量赋值的字符串便于在 generate 函数中应用，例如：

new Function(`data`, ` 
    var name = data["name"]; 
    var world = data["world"]; 
    var hello = data["hello"]; 
    return typeof String(name) === 'string'  && 'Hello ' + world + '! ' + hello.split('').join('') + '.'; 
`); 
 
// will generated: 
 
function anonymous(data) { 
    var name = data["name"]; 
    var world = data["world"]; 
    var hello = data["hello"]; 
    	
			 6/10   首页 上一页 4 5 6 7 8 9 下一页 尾页	
			

　　推荐阅读
　　雷军开造空调正面挑战董明珠？小米说只是生态链
            
            曾经和格力电器董事长董明珠有10亿赌约的小米，要做空调了？

            8月10日，小米智能硬件生态链企业智米科技宣布了一款售价4399元的全直流变频空调，但品牌不是&ldquo;小米&rdqu>>>详细阅读


本文标题：如何实现一个基于DOM的模板引擎
地址：http://www.17bianji.com/lsqh/36664.html
 1/2    1