如何實現一個基於 DOM 的模板引擎

大板慄發表於2017-08-08

題圖：Vincent Guth

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

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

Preface

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

const compiled = Compile(`<h1>Hey ?, {{ greeting }}</h1>`, {
    greeting: `Hello World`,
});
compiled.view // => `<h1>Hey ?, Hello World</h1>`
複製程式碼

Compile

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

const compiled = Compile(template: String|Node, data: Object);
compiled.view // => compiled template
複製程式碼

首先，讓我們來看下 Compile 內部是如何實現的：

// 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 的建構函式主要就是做了一件事 ———— 遍歷 template，然後通過判斷節點型別的不同來做不同的編譯操作，這裡就不介紹如何遍歷 template 了，不明白的話可以直接看 walk 函式的原始碼，我們著重來看下如何編譯這些不同型別的節點，以編譯 node.nodeType === 1 的元素節點為例：

/**
 * 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 的指令語法，就是在帶有冒號 : 的屬性名中（當然這裡也可以是任何其他你所喜歡的符號），可以直接寫 JavaScript 的表示式，然後也會提供幾個特殊的指令，例如 :text, :show 等等來對元素做一些不同的操作。

其實該函式只做了兩件事：

遍歷該節點的所有屬性，通過判斷屬性型別的不同來做不同的操作，判斷的標準就是屬性名是否是冒號 : 開頭並且屬性的值不為空；
繫結相應的指令去更新屬性。

Directive

其次，再看一下 Directive 內部是如何實現的：

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])）；
計算指令表示式的實際值（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: 當前所編譯的節點，在 Directive 的 update 方法中用來更新當前節點；
name: 當前所繫結的指令名稱，用來區分具體使用哪個指令更新器來更新檢視；
expression: parse 之後的 JavaScript 的表示式。

updater

在 Directive 內部我們通過 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) {
            // ...
        },
    },
};
複製程式碼

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

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

表示對於指令 show，指令更新器會改變該元素 style 的 display 值，從而實現對應的功能。所以你會發現，整個編譯器結構設計好後，如果我們要擴充功能的話，只需簡單地編寫指令的更新器即可，這裡再以指令 text 舉個例子：

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

有沒有發現編寫一個指令其實非常的簡單，然後我們就可以這麼使用我們的 text 指令了：

const compiled = Compile(`<h1 :text="'Hey ?, ' + greeting"></h1>`, {
    greeting: `Hello World`,
});
compiled.view // => `<h1>Hey ?, Hello World</h1>`
複製程式碼

generate

講到這裡，其實還有一個非常重要的點沒有提到，就是我們如何把 data 真實資料渲染到模板中，比如 <h1>Hey ?, {{ greeting }}</h1> 如何渲染成 <h1>Hey ?, Hello World</h1>，通過下面三個步驟即可計算出表示式的真實資料：

把 <h1>Hey ?, {{ greeting }}</h1> 解析成 'Hey ?, ' + greeting 這樣的 JavaScript 表示式；
提取其中的依賴變數並取得所在 data 中的對應值；
利用 new Function() 來建立一個匿名函式來返回這個表示式；
最後通過呼叫這個匿名函式來返回最終計算出來的資料並通過指令的 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('+');
}
複製程式碼

該函式我是直接參考 Vue 的實現，它會把含有雙花括號的字串解析成標準的 JavaScript 表示式，例如：

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

extract dependency

我們會通過下面這個函式來提取出一個表示式中可能存在的變數：

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;
}
複製程式碼

通過正規表示式 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"];
    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

我們前面只講瞭如何編譯 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.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 所在節點從 DOM 結構中去掉，但是要注意的是並不能直接去掉，而是要在去掉的位置插入一個 comment 型別的節點作為佔位符，目的是為了在我們把列表資料渲染出來後，能找回原來的位置並把它插入到 DOM 中。

那具體如何編譯這個所謂的「子模板」呢，首先，我們需要遍歷 :each 指令所接收的 Array 型別的資料（目前只支援該型別，當然你也可以增加對 Object 型別的支援，原理是一樣的）；其次，我們針對該列表的每一項資料進行一次模板的編譯並把渲染後的模板插入到建立的 document fragment 中，當所有整個列表編譯完後再把剛剛建立的 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>
複製程式碼

其實細心的話你會發現，模板中使用的 item 和 index 變數其實就是 :each 更新函式中 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 指令的表示式，提取相關的變數名，然後上面的例子就可以寫成這樣了：

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

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

全篇介紹下來，整個核心無非就是遍歷整個模板的節點樹，其次針對每一個節點的字串值來解析成對應的表示式，然後通過 new Function() 這個建構函式來計算成實際的值，最終通過指令的 update 函式來更新到檢視上。

如果還是不清楚這些指令如何編寫的話，可以參考我這個專案 colon 的相關原始碼（部分程式碼可能會有不影響理解的細微差別，可忽略），有任何問題都可以在 issue 上提。

目前有一個侷限就是 DOM-based 的模板引擎只適用於瀏覽器端，目前筆者也正在實現相容 Node 端的版本，思路是把字串模板解析成 AST，然後把更新資料到 AST 上，最後再把 AST 轉成字串模板，實現出來後有空的話再來介紹一下 Node 端的實現。

最後，如果上面有說得不對或者有更好的實現方式的話，歡迎指出討論。

更多幹貨請關注公眾號 前端小專欄：QianDuanXiaoZhuanLan

說說如何實現一個模板引擎
2017-03-17
如何實現一個模板引擎二：優化
2017-04-08
優化
說說如何用 JavaScript 實現一個模板引擎
2017-03-14
JavaScript
實現一個簡單的模板引擎
2016-11-12
underscore 系列之實現一個模板引擎(上)
2019-03-03
underscore 系列之實現一個模板引擎(下)
2018-01-25
基於 Mysql 實現一個簡易版搜尋引擎
2021-08-29
MySql
實現一個程式碼自動生成（一）：模板引擎Freemarker
2019-07-22
如何實現一個 Virtual DOM 演算法
2016-04-04
演算法
【java規則引擎】一個基於drools規則引擎實現的數學計算例子
2017-02-17
Java
如何實現一個 Virtual DOM 及原始碼分析
2017-09-13
原始碼
前端模板引擎的實現總結
2018-07-05
前端
KOA的簡易模板引擎實現方式
2018-08-29
實現一個簡單的虛擬DOM
2019-06-02
基於SpringBoot如何實現一個點贊功能？
2022-01-21
Spring Boot
如何基於COLA架構快速實現一個CRUD操作
2021-07-21
架構
javascript如何實現複製克隆一個dom元素節點
2017-03-31
JavaScript
使用DOM解析來實現PHP模版引擎
2019-03-02
PHP
怎樣打造一個DOM元素位置引擎 (一)
2016-03-07
nodejs基於art-template模板引擎生成
2015-10-10
NodeJS
如何實現一個乞丐版JSBox (一) 引擎篇
2018-06-12
JS
編寫一個簡單的JavaScript模板引擎
2018-07-03
JavaScript
基於 react 後端渲染模板引擎 noox 釋出了
2018-01-10
React後端
聊聊如何實現一個帶冪等模板的Kafka消費者
2022-05-24
Kafka
基於Redis實現一個分散式鎖
2021-11-14
Redis分散式
構建一個使用 Virtual-DOM 的前端模版引擎
2016-02-10
前端
基於 IntersectionObserver 實現一個元件的曝光監控
2021-05-31
Server元件
基於 canvas 實現的一個截圖小 demo
2017-06-13
Canvas
20行程式碼實現JavaScript模板引擎
2017-07-12
行程JavaScript
如何基於 Flutter 快速實現一個視訊通話應用
2021-11-17
Flutter
如何使用irealtime.js實現一個基於websocket的同步畫板
2021-02-23
JSWeb
實現一個簡單的DOM diff演算法
2019-06-05
演算法
如何用不到 30 行程式碼寫一個模板引擎？
2015-06-19
行程
實現一個Promise(基於Promise/A+規範)
2019-01-02
Promise
如何實現基於Electron的截圖識字App（一）
2019-03-31
APP
JavaScript模板引擎的應用場景及實現原理
2014-10-30
JavaScript
500行 python 程式碼實現模板引擎
2018-01-08
Python
一個基於Vue的圖片輪播元件的實現
2018-05-03
Vue元件

如何實現一個基於 DOM 的模板引擎

Preface

Compile

walk

Directive

updater

generate

parse text

extract dependency

generate

compile text node

:each 指令

Conclusion

相關文章

`:each` 指令