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

index`;

this.dataName = this.expression;

if (this.expression.indexOf(' in ') != -1) {

const bracketRE = /\(((?:.|\n)+?)\)/g;

const [item, data] = this.expression.split(' in ');

let matched = null;

if (matched = bracketRE.exec(item)) {

const [item, index] = matched[1].split(',');

index ? this.indexName = index.trim() : '';

this.itemName = item.trim();

} else {

this.itemName = item.trim();

}

this.dataName = data.trim();

}

this.expression = this.dataName;

update() {

if (data && !Array.isArray(data)) return;

const fragment = document.createDocumentFragment();

data.map((item, index) => {

const compiled = Compile(this.node.cloneNode(true), {

[this.itemName]: item,

[this.indexName]: index,

});

fragment.appendChild(compiled.view);

});

this.placeholder.parentNode.WordStrChild(fragment, this.placeholder);

};

如许一来我们就可以经由过程 (aliasItem, aliasIndex) in items 来自定义 :each 指令的 item 和 index 变岑岭，道理就是在 beforeUpdate 的时刻去解析 :each 指令的表达式，提取相干的变量名，然后膳绫擎的例子就可以写成如许了：

　　推荐阅读

　　雷军开造空调正面挑战董明珠？小米说只是生态链

曾经和格力电器董事长董明珠有10亿赌约的小米，要做空调了？ 8月10日，小米智能硬件生态链企业智米科技宣布了一款售价4399元的全直流变频空调，但品牌不是“小米&rdqu>>>详细阅读

地址：http://www.17bianji.com/lsqh/36664.html