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

return typeof String(name) === 'string' && 'Hello ' + world + '! ' + hello.split('').join('') + '.';

}

如许的话，只须要在调用这个匿名函数的时刻传入对应的 data 即可获得我们想要的结不雅了。如今回过火来看之前的 Directive 部分代码应当就一目了然了：

export default class Directive { 
    constructor(options = {}) { 
        // ... 
        this.beforeUpdate && this.beforeUpdate(); 
        this.update && this.update(generate(this.expression)(this.compile.data)); 
    } 
}

generate(this.expression)(this.compile.data) 就是表达式经由 this.compile.data 计算后我们所须要的值。

compile text node

有没有发明编写一个指令其实异常的简单，然后我们就可以这么应用我们的 text 指令了：

我们前面只讲了若何编译 node.nodeType === 1 的元素节点，那么文字节点若何编译呢，其实懂得了前面所讲的内容话，文字节点的编译就Ｒ单得不克不及再简单了：

/** 
 * compile text node 
 * 
 * @param {Node} node 
 */ 
Compile.compile.textNodes = function (node) { 
    if (node.textContent.trim() === '') return false; 
 
    this.bindDirective({ 
        node, 
        name: 'text', 
        expression: parse.text(node.textContent), 
    }); 
};

经由过程绑定 text 指令，并传入解析后的 JavaScript 表达式，在 Directive 内部就管帐算出表达式实际的值并调用 text 的 update 函数更新视图完成衬着。

:each 指令

到今朝为止，该模板引擎只实现了比较根本的功能，而最常见且重要的列表衬着功能还没有实现，所以我们如今要实现一个 :each 指令来衬着一个列表，这里可能要留意一下，不克不及按照前面两个指令的思路来实现，应当换一个角度来思虑，列表衬着其实相当于一个「子模板」，琅绫擎的变量存在于 :each 指令所接收的 data 这个「局部感化域」中，这么说可能抽象，直接上代码：

// :each updater 
import Compile from 'path/to/compile.js'; 
export default { 
    beforeUpdate() { 
        this.placeholder = document.createComment(`:each`); 
        this.node.parentNode.WordStrChild(this.placeholder, this.node); 
    }, 
    update() { 
        if (data && !Array.isArray(data)) 	
			 7/10   首页 上一页 5 6 7 8 9 10 下一页 尾页	
			

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

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


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