日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何實現(xiàn)一個基于DOM的模板引擎

題圖：Vincent Guth

堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都地磅秤小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站制作營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

注：本文所有代碼均可在本人的個人項目colon中找到，本文也同步到了知乎專欄

可能你已經(jīng)體會到了 Vue 所帶來的便捷了，相信有一部分原因也是因為其基于 DOM 的語法簡潔的模板渲染引擎。這篇文章將會介紹如何實現(xiàn)一個基于 DOM 的模板引擎(就像 Vue 的模板引擎一樣)。

Preface

開始之前，我們先來看一下最終的效果：

 
 
 
    
  
  
  
  1. const compiled = Compile(`
    Hey , {{ greeting }}
    `, {
    2. 
  
  
  
  2.     greeting: `Hello World`,
    3. 
  
  
  
  3. });
    4. 
  
  
  
  4. compiled.view // => `
    Hey , Hello World
    ` 
    5.

Compile

實現(xiàn)一個模板引擎實際上就是實現(xiàn)一個編譯器，就像這樣：

 
 
 
    
  
  
  
  1. const compiled = Compile(template: String|Node, data: Object);
    2. 
  
  
  
  2. 
  
  
  
  3. compiled.view // => compiled template 
    4.

首先，讓我們來看下 Compile 內(nèi)部是如何實現(xiàn)的：

 
 
 
    
  
  
  
  1. // compile.js
    2. 
  
  
  
  2. /**
    3. 
  
  
  
  3.  * template compiler
    4. 
  
  
  
  4.  *
    5. 
  
  
  
  5.  * @param {String|Node} template
    6. 
  
  
  
  6.  * @param {Object} data
    7. 
  
  
  
  7.  */
    8. 
  
  
  
  8. function Compile(template, data) {
    9. 
  
  
  
  9.     if (!(this instanceof Compile)) return new Compile(template, data);
    10. 
  
  
  
  10. 
  
  
  
  11.     this.options = {};
    12. 
  
  
  
  12.     this.data = data;
    13. 
  
  
  
  13. 
  
  
  
  14.     if (template instanceof Node) {
    15. 
  
  
  
  15.         this.options.template = template;
    16. 
  
  
  
  16.     } else if (typeof template === 'string') {
    17. 
  
  
  
  17.         this.options.template = domify(template);
    18. 
  
  
  
  18.     } else {
    19. 
  
  
  
  19.         console.error(`"template" only accept DOM node or string template`);
    20. 
  
  
  
  20.     }
    21. 
  
  
  
  21. 
  
  
  
  22.     template = this.options.template;
    23. 
  
  
  
  23. 
  
  
  
  24.     walk(template, (node, next) => {
    25. 
  
  
  
  25.         if (node.nodeType === 1) {
    26. 
  
  
  
  26.             // compile element node
    27. 
  
  
  
  27.             this.compile.elementNodes.call(this, node);
    28. 
  
  
  
  28.             return next();
    29. 
  
  
  
  29.         } else if (node.nodeType === 3) {
    30. 
  
  
  
  30.             // compile text node
    31. 
  
  
  
  31.             this.compile.textNodes.call(this, node);
    32. 
  
  
  
  32.         }
    33. 
  
  
  
  33.         next();
    34. 
  
  
  
  34.     });
    35. 
  
  
  
  35. 
  
  
  
  36.     this.view = template;
    37. 
  
  
  
  37.     template = null;
    38. 
  
  
  
  38. }
    39. 
  
  
  
  39. 
  
  
  
  40. Compile.compile = {}; 
    41.

walk

通過上面的代碼，可以看到 Compile 的構(gòu)造函數(shù)主要就是做了一件事 ———— 遍歷 template，然后通過判斷節(jié)點(diǎn)類型的不同來做不同的編譯操作，這里就不介紹如何遍歷 template 了，不明白的話可以直接看 walk 函數(shù)的源碼，我們著重來看下如何編譯這些不同類型的節(jié)點(diǎn)，以編譯 node.nodeType === 1 的元素節(jié)點(diǎn)為例：

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  * compile element node
    3. 
  
  
  
  3.  *
    4. 
  
  
  
  4.  * @param {Node} node
    5. 
  
  
  
  5.  */
    6. 
  
  
  
  6. Compile.compile.elementNodes = function (node) {
    7. 
  
  
  
  7.     const bindSymbol = `:`;
    8. 
  
  
  
  8.     let attributes = [].slice.call(node.attributes),
    9. 
  
  
  
  9.         attrName = ``,
    10. 
  
  
  
  10.         attrValue = ``,
    11. 
  
  
  
  11.         directiveName = ``;
    12. 
  
  
  
  12. 
  
  
  
  13.     attributes.map(attribute => {
    14. 
  
  
  
  14.         attrName = attribute.name;
    15. 
  
  
  
  15.         attrValue = attribute.value.trim();
    16. 
  
  
  
  16. 
  
  
  
  17.         if (attrName.indexOf(bindSymbol) === 0 && attrValue !== '') {
    18. 
  
  
  
  18.             directiveName = attrName.slice(bindSymbol.length);
    19. 
  
  
  
  19. 
  
  
  
  20.             this.bindDirective({
    21. 
  
  
  
  21.                 node,
    22. 
  
  
  
  22.                 expression: attrValue,
    23. 
  
  
  
  23.                 name: directiveName,
    24. 
  
  
  
  24.             });
    25. 
  
  
  
  25.             node.removeAttribute(attrName);
    26. 
  
  
  
  26.         } else {
    27. 
  
  
  
  27.             this.bindAttribute(node, attribute);
    28. 
  
  
  
  28.         }
    29. 
  
  
  
  29.     });
    30. 
  
  
  
  30. }; 
    31.

噢忘記說了，這里我參考了 Vue 的指令語法，就是在帶有冒號 : 的屬性名中(當(dāng)然這里也可以是任何其他你所喜歡的符號)，可以直接寫 JavaScript 的表達(dá)式，然后也會提供幾個特殊的指令，例如 :text, :show 等等來對元素做一些不同的操作。

其實該函數(shù)只做了兩件事：

  • 遍歷該節(jié)點(diǎn)的所有屬性，通過判斷屬性類型的不同來做不同的操作，判斷的標(biāo)準(zhǔn)就是屬性名是否是冒號 : 開頭并且屬性的值不為空;
  • 綁定相應(yīng)的指令去更新屬性。

Directive

其次，再看一下 Directive 內(nèi)部是如何實現(xiàn)的：

 
 
 
    
  
  
  
  1. import directives from './directives';
    2. 
  
  
  
  2. import { generate } from './compile/generate';
    3. 
  
  
  
  3. 
  
  
  
  4. export default function Directive(options = {}) {
    5. 
  
  
  
  5.     Object.assign(this, options);
    6. 
  
  
  
  6.     Object.assign(this, directives[this.name]);
    7. 
  
  
  
  7.     this.beforeUpdate && this.beforeUpdate();
    8. 
  
  
  
  8.     this.update && this.update(generate(this.expression)(this.compile.options.data));
    9. 
  
  
  
  9. } 
    10.

Directive 做了三件事：

  • 注冊指令(Object.assign(this, directives[this.name]));
  • 計算指令表達(dá)式的實際值(generate(this.expression)(this.compile.options.data));
  • 把計算出來的實際值更新到 DOM 上面(this.update())。

在介紹指令之前，先看一下它的用法：

 
 
 
    
  
  
  
  1. Compile.prototype.bindDirective = function (options) {
    2. 
  
  
  
  2.     new Directive({
    3. 
  
  
  
  3.         ...options,
    4. 
  
  
  
  4.         compile: this,
    5. 
  
  
  
  5.     });
    6. 
  
  
  
  6. };
    7. 
  
  
  
  7. 
  
  
  
  8. Compile.prototype.bindAttribute = function (node, attribute) {
    9. 
  
  
  
  9.     if (!hasInterpolation(attribute.value) || attribute.value.trim() == '') return false;
    10. 
  
  
  
  10. 
  
  
  
  11.     this.bindDirective({
    12. 
  
  
  
  12.         node,
    13. 
  
  
  
  13.         name: 'attribute',
    14. 
  
  
  
  14.         expression: parse.text(attribute.value),
    15. 
  
  
  
  15.         attrName: attribute.name,
    16. 
  
  
  
  16.     });
    17. 
  
  
  
  17. }; 
    18.

bindDirective 對 Directive 做了一個非常簡單的封裝，接受三個必填屬性：

  • node: 當(dāng)前所編譯的節(jié)點(diǎn)，在 Directive 的 update 方法中用來更新當(dāng)前節(jié)點(diǎn);
  • name: 當(dāng)前所綁定的指令名稱，用來區(qū)分具體使用哪個指令更新器來更新視圖;
  • expression: parse 之后的 JavaScript 的表達(dá)式。

updater

在 Directive 內(nèi)部我們通過 Object.assign(this, directives[this.name]); 來注冊不同的指令，所以變量 directives 的值可能是這樣的：

 
 
 
    
  
  
  
  1. // directives
    2. 
  
  
  
  2. export default {
    3. 
  
  
  
  3.     // directive `:show`
    4. 
  
  
  
  4.     show: {
    5. 
  
  
  
  5.         beforeUpdate() {},
    6. 
  
  
  
  6.         update(show) {
    7. 
  
  
  
  7.             this.node.style.display = show ? `block` : `none`;
    8. 
  
  
  
  8.         },
    9. 
  
  
  
  9.     },
    10. 
  
  
  
  10.     // directive `:text`
    11. 
  
  
  
  11.     text: {
    12. 
  
  
  
  12.         beforeUpdate() {},
    13. 
  
  
  
  13.         update(value) {
    14. 
  
  
  
  14.             // ...
    15. 
  
  
  
  15.         },
    16. 
  
  
  
  16.     },
    17. 
  
  
  
  17. }; 
    18.

所以假設(shè)某個指令的名字是 show 的話，那么 Object.assign(this, directives[this.name]); 就等同于：

 
 
 
    
  
  
  
  1. Object.assign(this, {
    2. 
  
  
  
  2.     beforeUpdate() {},
    3. 
  
  
  
  3.     update(show) {
    4. 
  
  
  
  4.         this.node.style.display = show ? `block` : `none`;
    5. 
  
  
  
  5.     },
    6. 
  
  
  
  6. }); 
    7.

表示對于指令 show，指令更新器會改變該元素 style 的 display 值，從而實現(xiàn)對應(yīng)的功能。所以你會發(fā)現(xiàn)，整個編譯器結(jié)構(gòu)設(shè)計好后，如果我們要拓展功能的話，只需簡單地編寫指令的更新器即可，這里再以指令 text 舉個例子：

 
 
 
    
  
  
  
  1. // directives
    2. 
  
  
  
  2. export default {
    3. 
  
  
  
  3.     // directive `:show`
    4. 
  
  
  
  4.     // show: { ... },
    5. 
  
  
  
  5.     // directive `:text`
    6. 
  
  
  
  6.     text: {
    7. 
  
  
  
  7.         update(value) {
    8. 
  
  
  
  8.             this.node.textContent = value;
    9. 
  
  
  
  9.         },
    10. 
  
  
  
  10.     },
    11. 
  
  
  
  11. }; 
    12.

有沒有發(fā)現(xiàn)編寫一個指令其實非常的簡單，然后我們就可以這么使用我們的 text 指令了：

 
 
 
    
  
  
  
  1. const compiled = Compile(``, {
    2. 
  
  
  
  2.     greeting: `Hello World`,
    3. 
  
  
  
  3. });
    4. 
  
  
  
  4. compiled.view // => `
    Hey , Hello World
    `
    5.

generate

講到這里，其實還有一個非常重要的點(diǎn)沒有提到，就是我們?nèi)绾伟?data 真實數(shù)據(jù)渲染到模板中，比如

Hey , {{ greeting }}

如何渲染成

Hey , Hello World

，通過下面三個步驟即可計算出表達(dá)式的真實數(shù)據(jù)：

  • 把

    Hey , {{ greeting }}

    解析成 'Hey , ' + greeting 這樣的 JavaScript 表達(dá)式;
  • 提取其中的依賴變量并取得所在 data 中的對應(yīng)值;
  • 利用 new Function() 來創(chuàng)建一個匿名函數(shù)來返回這個表達(dá)式;
  • ***通過調(diào)用這個匿名函數(shù)來返回最終計算出來的數(shù)據(jù)并通過指令的 update 方法更新到視圖中。

parse text

 
 
 
    
  
  
  
  1. // reference: https://github.com/vuejs/vue/blob/dev/src/compiler/parser/text-parser.js#L15-L41
    2. 
  
  
  
  2. const tagRE = /\{\{((?:.|\n)+?)\}\}/g;
    3. 
  
  
  
  3. function parse(text) {
    4. 
  
  
  
  4.     if (!tagRE.test(text)) return JSON.stringify(text);
    5. 
  
  
  
  5. 
  
  
  
  6.     const tokens = [];
    7. 
  
  
  
  7.     let lastIndex = tagRE.lastIndex = 0;
    8. 
  
  
  
  8.     let index, matched;
    9. 
  
  
  
  9. 
  
  
  
  10.     while (matched = tagRE.exec(text)) {
    11. 
  
  
  
  11.         index = matched.index;
    12. 
  
  
  
  12.         if (index > lastIndex) {
    13. 
  
  
  
  13.             tokens.push(JSON.stringify(text.slice(lastIndex, index)));
    14. 
  
  
  
  14.         }
    15. 
  
  
  
  15.         tokens.push(matched[1].trim());
    16. 
  
  
  
  16.         lastIndex = index + matched[0].length;
    17. 
  
  
  
  17.     }
    18. 
  
  
  
  18. 
  
  
  
  19.     if (lastIndex < text.length) tokens.push(JSON.stringify(text.slice(lastIndex)));
    20. 
  
  
  
  20. 
  
  
  
  21.     return tokens.join('+');
    22. 
  
  
  
  22. } 
    23.

該函數(shù)我是直接參考 Vue 的實現(xiàn)，它會把含有雙花括號的字符串解析成標(biāo)準(zhǔn)的 JavaScript 表達(dá)式，例如：

 
 
 
    
  
  
  
  1. parse(`Hi {{ user.name }}, {{ colon }} is awesome.`);
    2. 
  
  
  
  2. // => 'Hi ' + user.name + ', ' + colon + ' is awesome.' 
    3.

extract dependency

我們會通過下面這個函數(shù)來提取出一個表達(dá)式中可能存在的變量：

 
 
 
    
  
  
  
  1. const dependencyRE = /"[^"]*"|'[^']*'|\.\w*[a-zA-Z$_]\w*|\w*[a-zA-Z$_]\w*:|(\w*[a-zA-Z$_]\w*)/g;
    2. 
  
  
  
  2. const globals = [
    3. 
  
  
  
  3.     'true', 'false', 'undefined', 'null', 'NaN', 'isNaN', 'typeof', 'in',
    4. 
  
  
  
  4.     'decodeURI', 'decodeURIComponent', 'encodeURI', 'encodeURIComponent', 'unescape',
    5. 
  
  
  
  5.     'escape', 'eval', 'isFinite', 'Number', 'String', 'parseFloat', 'parseInt',
    6. 
  
  
  
  6. ];
    7. 
  
  
  
  7. 
  
  
  
  8. function extractDependencies(expression) {
    9. 
  
  
  
  9.     const dependencies = [];
    10. 
  
  
  
  10. 
  
  
  
  11.     expression.replace(dependencyRE, (match, dependency) => {
    12. 
  
  
  
  12.         if (
    13. 
  
  
  
  13.             dependency !== undefined &&
    14. 
  
  
  
  14.             dependencies.indexOf(dependency) === -1 &&
    15. 
  
  
  
  15.             globals.indexOf(dependency) === -1
    16. 
  
  
  
  16.         ) {
    17. 
  
  
  
  17.             dependencies.push(dependency);
    18. 
  
  
  
  18.         }
    19. 
  
  
  
  19.     });
    20. 
  
  
  
  20. 
  
  
  
  21.     return dependencies;
    22. 
  
  
  
  22. } 
    23.

通過正則表達(dá)式 dependencyRE 匹配出可能的變量依賴后，還要進(jìn)行一些對比，比如是否是全局變量等等。效果如下：

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

這正是我們需要的結(jié)果，typeof, String, split 和 join 并不是 data 中所依賴的變量，所以不需要被提取出來。

generate

 
 
 
    
  
  
  
  1. export function generate(expression) {
    2. 
  
  
  
  2.     const dependencies = extractDependencies(expression);
    3. 
  
  
  
  3.     let dependenciesCode = '';
    4. 
  
  
  
  4. 
  
  
  
  5.     dependencies.map(dependency => dependenciesCode += `var ${dependency} = this.get("${dependency}"); `);
    6. 
  
  
  
  6. 
  
  
  
  7.     return new Function(`data`, `${dependenciesCode}return ${expression};`);
    8. 
  
  
  
  8. } 
    9.

我們提取變量的目的就是為了在 generate 函數(shù)中生成相應(yīng)的變量賦值的字符串便于在 generate 函數(shù)中使用，例如：

 
 
 
    
  
  
  
  1. new Function(`data`, `
    2. 
  
  
  
  2.     var name = data["name"];
    3. 
  
  
  
  3.     var world = data["world"];
    4. 
  
  
  
  4.     var hello = data["hello"];
    5. 
  
  
  
  5.     return typeof String(name) === 'string'  && 'Hello ' + world + '! ' + hello.split('').join('') + '.';
    6. 
  
  
  
  6. `);
    7. 
  
  
  
  7. 
  
  
  
  8. // will generated:
    9. 
  
  
  
  9. 
  
  
  
  10. function anonymous(data) {
    11. 
  
  
  
  11.     var name = data["name"];
    12. 
  
  
  
  12.     var world = data["world"];
    13. 
  
  
  
  13.     var hello = data["hello"];
    14. 
  
  
  
  14.     return typeof String(name) === 'string'  && 'Hello ' + world + '! ' + hello.split('').join('') + '.';
    15. 
  
  
  
  15. } 
    16.

這樣的話，只需要在調(diào)用這個匿名函數(shù)的時候傳入對應(yīng)的 data 即可獲得我們想要的結(jié)果了?，F(xiàn)在回過頭來看之前的 Directive 部分代碼應(yīng)該就一目了然了：

 
 
 
    
  
  
  
  1. export default class Directive {
    2. 
  
  
  
  2.     constructor(options = {}) {
    3. 
  
  
  
  3.         // ...
    4. 
  
  
  
  4.         this.beforeUpdate && this.beforeUpdate();
    5. 
  
  
  
  5.         this.update && this.update(generate(this.expression)(this.compile.data));
    6. 
  
  
  
  6.     }
    7. 
  
  
  
  7. } 
    8.

generate(this.expression)(this.compile.data) 就是表達(dá)式經(jīng)過 this.compile.data 計算后我們所需要的值。

compile text node

我們前面只講了如何編譯 node.nodeType === 1 的元素節(jié)點(diǎn)，那么文字節(jié)點(diǎn)如何編譯呢，其實理解了前面所講的內(nèi)容話，文字節(jié)點(diǎn)的編譯就簡單得不能再簡單了：

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  * compile text node
    3. 
  
  
  
  3.  *
    4. 
  
  
  
  4.  * @param {Node} node
    5. 
  
  
  
  5.  */
    6. 
  
  
  
  6. Compile.compile.textNodes = function (node) {
    7. 
  
  
  
  7.     if (node.textContent.trim() === '') return false;
    8. 
  
  
  
  8. 
  
  
  
  9.     this.bindDirective({
    10. 
  
  
  
  10.         node,
    11. 
  
  
  
  11.         name: 'text',
    12. 
  
  
  
  12.         expression: parse.text(node.textContent),
    13. 
  
  
  
  13.     });
    14. 
  
  
  
  14. }; 
    15.

通過綁定 text 指令，并傳入解析后的 JavaScript 表達(dá)式，在 Directive 內(nèi)部就會計算出表達(dá)式實際的值并調(diào)用 text 的 update 函數(shù)更新視圖完成渲染。

:each 指令

到目前為止，該模板引擎只實現(xiàn)了比較基本的功能，而最常見且重要的列表渲染功能還沒有實現(xiàn)，所以我們現(xiàn)在要實現(xiàn)一個 :each 指令來渲染一個列表，這里可能要注意一下，不能按照前面兩個指令的思路來實現(xiàn)，應(yīng)該換一個角度來思考，列表渲染其實相當(dāng)于一個「子模板」，里面的變量存在于 :each 指令所接收的 data 這個「局部作用域」中，這么說可能抽象，直接上代碼：

 
 
 
    
  
  
  
  1. // :each updater
    2. 
  
  
  
  2. import Compile from 'path/to/compile.js';
    3. 
  
  
  
  3. export default {
    4. 
  
  
  
  4.     beforeUpdate() {
    5. 
  
  
  
  5.         this.placeholder = document.createComment(`:each`);
    6. 
  
  
  
  6.         this.node.parentNode.replaceChild(this.placeholder, this.node);
    7. 
  
  
  
  7.     },
    8. 
  
  
  
  8.     update() {
    9. 
  
  
  
  9.         if (data && !Array.isArray(data)) return;
    10. 
  
  
  
  10. 
  
  
  
  11.         const fragment = document.createDocumentFragment();
    12. 
  
  
  
  12. 
  
  
  
  13.         data.map((item, index) => {
    14. 
  
  
  
  14.             const compiled = Compile(this.node.cloneNode(true), { item, index, });
    15. 
  
  
  
  15.             fragment.appendChild(compiled.view);
    16. 
  
  
  
  16.         });
    17. 
  
  
  
  17. 
  
  
  
  18.         this.placeholder.parentNode.replaceChild(fragment, this.placeholder);
    19. 
  
  
  
  19.     },
    20. 
  
  
  
  20. }; 
    21.

在 update 之前，我們先把 :each 所在節(jié)點(diǎn)從 DOM 結(jié)構(gòu)中去掉，但是要注意的是并不能直接去掉，而是要在去掉的位置插入一個 comment 類型的節(jié)點(diǎn)作為占位符，目的是為了在我們把列表數(shù)據(jù)渲染出來后，能找回原來的位置并把它插入到 DOM 中。

那具體如何編譯這個所謂的「子模板」呢，首先，我們需要遍歷 :each 指令所接收的 Array 類型的數(shù)據(jù)(目前只支持該類型，當(dāng)然你也可以增加對 Object 類型的支持，原理是一樣的);其次，我們針對該列表的每一項數(shù)據(jù)進(jìn)行一次模板的編譯并把渲染后的模板插入到創(chuàng)建的 document fragment 中，當(dāng)所有整個列表編譯完后再把剛剛創(chuàng)建的 comment 類型的占位符替換為 document fragment 以完成列表的渲染。

此時，我們可以這么使用 :each 指令：

 
 
 
    
  
  
  
  1. Compile(`{{ item.content }}
    2. `, {
  
  
  
  2.     comments: [{
    3. 
  
  
  
  3.         content: `Hello World.`,
    4. 
  
  
  
  4.     }, {
    5. 
  
  
  
  5.         content: `Just Awesome.`,
    6. 
  
  
  
  6.     }, {
    7. 
  
  
  
  7.         content: `WOW, Just WOW!`,
    8. 
  
  
  
  8.     }],
    9. 
  
  
  
  9. }); 
    10.

會渲染成：

 
 
 
    
  
  
  
  1. Hello World.
    2. 
  
  
  
  2. 
  
  
  
  3. Just Awesome.
    4. 
  
  
  
  4. 
  
  
  
  5. WOW, Just WOW!
    6.  

其實細(xì)心的話你會發(fā)現(xiàn)，模板中使用的 item 和 index 變量其實就是 :each 更新函數(shù)中 Compile(template, data) 編譯器里的 data 值的兩個 key 值。所以要自定義這兩個變量也是非常簡單的：

 
 
 
    
  
  
  
  1. // :each updater
    2. 
  
  
  
  2. import Compile from 'path/to/compile.js';
    3. 
  
  
  
  3. export default {
    4. 
  
  
  
  4.     beforeUpdate() {
    5. 
  
  
  
  5.         this.placeholder = document.createComment(`:each`);
    6. 
  
  
  
  6.         this.node.parentNode.replaceChild(this.placeholder, this.node);
    7. 
  
  
  
  7. 
  
  
  
  8.         // parse alias
    9. 
  
  
  
  9.         this.itemName = `item`;
    10. 
  
  
  
  10.         this.indexName = `index`;
    11. 
  
  
  
  11.         this.dataName = this.expression;
    12. 
  
  
  
  12. 
  
  
  
  13.         if (this.expression.indexOf(' in ') != -1) {
    14. 
  
  
  
  14.             const bracketRE = /\(((?:.|\n)+?)\)/g;
    15. 
  
  
  
  15.             const [item, data] = this.expression.split(' in ');
    16. 
  
  
  
  16.             let matched = null;
    17. 
  
  
  
  17. 
  
  
  
  18.             if (matched = bracketRE.exec(item)) {
    19. 
  
  
  
  19.                 const [item, index] = matched[1].split(',');
    20. 
  
  
  
  20.                 index ? this.indexName = index.trim() : '';
    21. 
  
  
  
  21.                 this.itemName = item.trim();
    22. 
  
  
  
  22.             } else {
    23. 
  
  
  
  23.                 this.itemName = item.trim();
    24. 
  
  
  
  24.             }
    25. 
  
  
  
  25. 
  
  
  
  26.             this.dataName = data.trim();
    27. 
  
  
  
  27.         }
    28. 
  
  
  
  28. 
  
  
  
  29.         this.expression = this.dataName;
    30. 
  
  
  
  30.     },
    31. 
  
  
  
  31.     update() {
    32. 
  
  
  
  32.         if (data && !Array.isArray(data)) return;
    33. 
  
  
  
  33. 
  
  
  
  34.         const fragment = document.createDocumentFragment();
    35. 
  
  
  
  35. 
  
  
  
  36.         data.map((item, index) => {
    37. 
  
  
  
  37.             const compiled = Compile(this.node.cloneNode(true), {
    38. 
  
  
  
  38.                 [this.itemName]: item,
    39. 
  
  
  
  39.                 [this.indexName]: index,
    40. 
  
  
  
  40.             });
    41. 
  
  
  
  41.             fragment.appendChild(compiled.view);
    42. 
  
  
  
  42.         });
    43. 
  
  
  
  43. 
  
  
  
  44.         this.placeholder.parentNode.replaceChild(fragment, this.placeholder);
    45. 
  
  
  
  45.     },
    46. 
  
  
  
  46. }; 
    47.

這樣一來我們就可以通過 (aliasItem, aliasIndex) in items 來自定義 :each 指令的 item 和 index 變量了，原理就是在 beforeUpdate 的時候去解析 :each 指令的表達(dá)式，提取相關(guān)的變量名，然后上面的例子就可以寫成這樣了：

 
 
 
    
  
  
  
  1. Compile(`{{ comment.content }}
    2. `, {
  
  
  
  2.     comments: [{
    3. 
  
  
  
  3.         content: `Hello World.`,
    4. 
  
  
  
  4.     }, {
    5. 
  
  
  
  5.         content: `Just Awesome.`,
    6. 
  
  
  
  6.     }, {
    7. 
  
  
  
  7.         content: `WOW, Just WOW!`,
    8. 
  
  
  
  8.     }],
    9. 
  
  
  
  9. }); 
    10.

Conclusion

到這里，其實一個比較簡單的模板引擎算是實現(xiàn)了，當(dāng)然還有很多地方可以完善的，比如可以增加 :class, :style, :if 或 :src 等等你可以想到的指令功能，添加這些功能都是非常的簡單的。

全篇介紹下來，整個核心無非就是遍歷整個模板的節(jié)點(diǎn)樹，其次針對每一個節(jié)點(diǎn)的字符串值來解析成對應(yīng)的表達(dá)式，然后通過 new Function() 這個構(gòu)造函數(shù)來計算成實際的值，最終通過指令的 update 函數(shù)來更新到視圖上。

如果還是不清楚這些指令如何編寫的話，可以參考我這個項目 colon 的相關(guān)源碼(部分代碼可能會有不影響理解的細(xì)微差別，可忽略)，有任何問題都可以在 issue 上提。

目前有一個局限就是 DOM-based 的模板引擎只適用于瀏覽器端，目前筆者也正在實現(xiàn)兼容 Node 端的版本，思路是把字符串模板解析成 AST，然后把更新數(shù)據(jù)到 AST 上，***再把 AST 轉(zhuǎn)成字符串模板，實現(xiàn)出來后有空的話再來介紹一下 Node 端的實現(xiàn)。

***，如果上面有說得不對或者有更好的實現(xiàn)方式的話，歡迎指出討論。


分享標(biāo)題：如何實現(xiàn)一個基于DOM的模板引擎
標(biāo)題URL：http://www.5511xx.com/article/djpecho.html