javascript中怎么實現(xiàn)一個基于DOM的模板引擎

本篇內(nèi)容主要講解“javascript中怎么實現(xiàn)一個基于DOM的模板引擎”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“javascript中怎么實現(xiàn)一個基于DOM的模板引擎”吧!

Preface

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

const compiled = Compile(`<h2>Hey ?, {{ greeting }}</h2>`, {     greeting: `Hello World`, }); compiled.view // => `<h2>Hey ?, Hello World</h2>`

Compile

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

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

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

// compile.js /**  * template compiler  *  * @param {String|Node} template  * @param {Object} data  */ function Compile(template, data) {     if (!(this instanceof Compile)) return new Compile(template, data);      this.options = {};     this.data = data;      if (template instanceof Node) {         this.options.template = template;     } else if (typeof template === 'string') {         this.options.template = domify(template);     } else {         console.error(`"template" only accept DOM node or string template`);     }      template = this.options.template;      walk(template, (node, next) => {         if (node.nodeType === 1) {             // compile element node             this.compile.elementNodes.call(this, node);             return next();         } else if (node.nodeType === 3) {             // compile text node             this.compile.textNodes.call(this, node);         }         next();     });      this.view = template;     template = null; }  Compile.compile = {};

walk

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

/**  * compile element node  *  * @param {Node} node  */ Compile.compile.elementNodes = function (node) {     const bindSymbol = `:`;     let attributes = [].slice.call(node.attributes),         attrName = ``,         attrValue = ``,         directiveName = ``;      attributes.map(attribute => {         attrName = attribute.name;         attrValue = attribute.value.trim();          if (attrName.indexOf(bindSymbol) === 0 && attrValue !== '') {             directiveName = attrName.slice(bindSymbol.length);              this.bindDirective({                 node,                 expression: attrValue,                 name: directiveName,             });             node.removeAttribute(attrName);         } else {             this.bindAttribute(node, attribute);         }     }); };

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

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

• 遍歷該節(jié)點的所有屬性，通過判斷屬性類型的不同來做不同的操作，判斷的標(biāo)準(zhǔn)就是屬性名是否是冒號 : 開頭并且屬性的值不為空;

• 綁定相應(yīng)的指令去更新屬性。

Directive

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

import directives from './directives'; import { generate } from './compile/generate';  export default function Directive(options = {}) {     Object.assign(this, options);     Object.assign(this, directives[this.name]);     this.beforeUpdate && this.beforeUpdate();     this.update && this.update(generate(this.expression)(this.compile.options.data)); }

Directive 做了三件事：

• 注冊指令(Object.assign(this, directives[this.name]));

• 計算指令表達(dá)式的實際值(generate(this.expression)(this.compile.options.data));

• 把計算出來的實際值更新到 DOM 上面(this.update())。

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

Compile.prototype.bindDirective = function (options) {     new Directive({         ...options,         compile: this,     }); };  Compile.prototype.bindAttribute = function (node, attribute) {     if (!hasInterpolation(attribute.value) || attribute.value.trim() == '') return false;      this.bindDirective({         node,         name: 'attribute',         expression: parse.text(attribute.value),         attrName: attribute.name,     }); };

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

• node: 當(dāng)前所編譯的節(jié)點，在 Directive 的 update 方法中用來更新當(dāng)前節(jié)點;

• name: 當(dāng)前所綁定的指令名稱，用來區(qū)分具體使用哪個指令更新器來更新視圖;

• expression: parse 之后的 JavaScript 的表達(dá)式。

updater

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

// directives export default {     // directive `:show`     show: {         beforeUpdate() {},         update(show) {             this.node.style.display = show ? `block` : `none`;         },     },     // directive `:text`     text: {         beforeUpdate() {},         update(value) {             // ...         },     }, };

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

Object.assign(this, {     beforeUpdate() {},     update(show) {         this.node.style.display = show ? `block` : `none`;     }, });

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

// directives export default {     // directive `:show`     // show: { ... },     // directive `:text`     text: {         update(value) {             this.node.textContent = value;         },     }, };

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

const compiled = Compile(`<h2 :text="'Hey ?, ' + greeting"></h2>`, {     greeting: `Hello World`, }); compiled.view // => `<h2>Hey ?, Hello World</h2>`

generate

講到這里，其實還有一個非常重要的點沒有提到，就是我們?nèi)绾伟?data 真實數(shù)據(jù)渲染到模板中，比如 <h2>Hey ?, {{  greeting }}</h2> 如何渲染成 <h2>Hey ?, Hello  World</h2>，通過下面三個步驟即可計算出表達(dá)式的真實數(shù)據(jù)：

• 把 <h2>Hey ?, {{ greeting }}</h2> 解析成 'Hey ?, ' + greeting 這樣的  JavaScript 表達(dá)式;

• 提取其中的依賴變量并取得所在 data 中的對應(yīng)值;

• 利用 new Function() 來創(chuàng)建一個匿名函數(shù)來返回這個表達(dá)式;

• ***通過調(diào)用這個匿名函數(shù)來返回最終計算出來的數(shù)據(jù)并通過指令的 update 方法更新到視圖中。

parse text

// reference: https://github.com/vuejs/vue/blob/dev/src/compiler/parser/text-parser.js#L15-L41 const tagRE = /\{\{((?:.|\n)+?)\}\}/g; function parse(text) {     if (!tagRE.test(text)) return JSON.stringify(text);      const tokens = [];     let lastIndex = tagRE.lastIndex = 0;     let index, matched;      while (matched = tagRE.exec(text)) {         index = matched.index;         if (index > lastIndex) {             tokens.push(JSON.stringify(text.slice(lastIndex, index)));         }         tokens.push(matched[1].trim());         lastIndex = index + matched[0].length;     }      if (lastIndex < text.length) tokens.push(JSON.stringify(text.slice(lastIndex)));      return tokens.join('+'); }

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

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

extract dependency

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

const dependencyRE = /"[^"]*"|'[^']*'|\.\w*[a-zA-Z$_]\w*|\w*[a-zA-Z$_]\w*:|(\w*[a-zA-Z$_]\w*)/g; const globals = [     'true', 'false', 'undefined', 'null', 'NaN', 'isNaN', 'typeof', 'in',     'decodeURI', 'decodeURIComponent', 'encodeURI', 'encodeURIComponent', 'unescape',     'escape', 'eval', 'isFinite', 'Number', 'String', 'parseFloat', 'parseInt', ];  function extractDependencies(expression) {     const dependencies = [];      expression.replace(dependencyRE, (match, dependency) => {         if (             dependency !== undefined &&             dependencies.indexOf(dependency) === -1 &&             globals.indexOf(dependency) === -1         ) {             dependencies.push(dependency);         }     });      return dependencies; }

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

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

這正是我們需要的結(jié)果，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 函數(shù)中生成相應(yīng)的變量賦值的字符串便于在 generate 函數(shù)中使用，例如：

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"];     return typeof String(name) === 'string'  && 'Hello ' + world + '! ' + hello.split('').join('') + '.'; }

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

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) 就是表達(dá)式經(jīng)過 this.compile.data  計算后我們所需要的值。

compile text node

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

/**  * 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 表達(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 這個「局部作用域」中，這么說可能抽象，直接上代碼：

// :each updater import Compile from 'path/to/compile.js'; export default {     beforeUpdate() {         this.placeholder = document.createComment(`:each`);         this.node.parentNode.replaceChild(this.placeholder, this.node);     },     update() {         if (data && !Array.isArray(data)) return;          const fragment = document.createDocumentFragment();          data.map((item, index) => {             const compiled = Compile(this.node.cloneNode(true), { item, index, });             fragment.appendChild(compiled.view);         });          this.placeholder.parentNode.replaceChild(fragment, this.placeholder);     }, };

在 update 之前，我們先把 :each 所在節(jié)點從 DOM 結(jié)構(gòu)中去掉，但是要注意的是并不能直接去掉，而是要在去掉的位置插入一個 comment  類型的節(jié)點作為占位符，目的是為了在我們把列表數(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 指令：

Compile(`<li :each="comments" data-index="{{ index }}">{{ item.content }}</li>`, {     comments: [{         content: `Hello World.`,     }, {         content: `Just Awesome.`,     }, {         content: `WOW, Just WOW!`,     }], });

會渲染成：

<li data-index="0">Hello World.</li>  <li data-index="1">Just Awesome.</li>  <li data-index="2">WOW, Just WOW!</li>

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

// :each updater import Compile from 'path/to/compile.js'; export default {     beforeUpdate() {         this.placeholder = document.createComment(`:each`);         this.node.parentNode.replaceChild(this.placeholder, this.node);          // parse alias         this.itemName = `item`;         this.indexName = `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.replaceChild(fragment, this.placeholder);     }, };

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

Compile(`<li :each="(comment, index) in comments" data-index="{{ index }}">{{ comment.content }}</li>`, {     comments: [{         content: `Hello World.`,     }, {         content: `Just Awesome.`,     }, {         content: `WOW, Just WOW!`,     }], });

Conclusion

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

到此，相信大家對“javascript中怎么實現(xiàn)一個基于DOM的模板引擎”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！