摘要：我們提取變量的目的就是為了在函數(shù)中生成相應(yīng)的變量賦值的字符串便于在函數(shù)中使用，例如這樣的話，只需要在調(diào)用這個(gè)匿名函數(shù)的時(shí)候傳入對(duì)應(yīng)的即可獲得我們想要的結(jié)果了。

題圖：Vincent Guth

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

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

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

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

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

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

首先，讓我們來看下 Compile 內(nèi)部是如何實(shí)現(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 = {};

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

/**
 * 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 的指令語法，就是在帶有冒號(hào) : 的屬性名中（當(dāng)然這里也可以是任何其他你所喜歡的符號(hào)），可以直接寫 JavaScript 的表達(dá)式，然后也會(huì)提供幾個(gè)特殊的指令，例如 :text, :show 等等來對(duì)元素做一些不同的操作。

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

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

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

其次，再看一下 Directive 內(nèi)部是如何實(shí)現(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 做了三件事：

注冊(cè)指令（Object.assign(this, directives[this.name])）；

計(jì)算指令表達(dá)式的實(shí)際值（generate(this.expression)(this.compile.options.data)）；

把計(jì)算出來的實(shí)際值更新到 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 對(duì) Directive 做了一個(gè)非常簡單的封裝，接受三個(gè)必填屬性：

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

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

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

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

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

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

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

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

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

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

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

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

Hey ?, {{ greeting }}

把

Hey ?, {{ greeting }}

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

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

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

// reference: https://github.com/vuejs/vue/blob/dev/src/compiler/parser/text-parser.js#L15-L41
const tagRE = /{{((?:.|
)+?)}}/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 的實(shí)現(xiàn)，它會(huì)把含有雙花括號(hào)的字符串解析成標(biāo)準(zhǔn)的 JavaScript 表達(dá)式，例如：

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

我們會(huì)通過下面這個(gè)函數(shù)來提取出一個(gè)表達(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)行一些對(duì)比，比如是否是全局變量等等。效果如下：

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

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

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)用這個(gè)匿名函數(shù)的時(shí)候傳入對(duì)應(yīng)的 data 即可獲得我們想要的結(jié)果了。現(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 計(jì)算后我們所需要的值。

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

/**
 * 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)部就會(huì)計(jì)算出表達(dá)式實(shí)際的值并調(diào)用 text 的 update 函數(shù)更新視圖完成渲染。

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

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

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

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

Compile(`
{{ item.content }}
`, {
    comments: [{
        content: `Hello World.`,
    }, {
        content: `Just Awesome.`,
    }, {
        content: `WOW, Just WOW!`,
    }],
});

會(huì)渲染成：

Hello World.
Just Awesome.
WOW, Just WOW!

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

// :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 = /(((?:.|
)+?))/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 的時(shí)候去解析 :each 指令的表達(dá)式，提取相關(guān)的變量名，然后上面的例子就可以寫成這樣了：

Compile(`
{{ comment.content }}
`, {
    comments: [{
        content: `Hello World.`,
    }, {
        content: `Just Awesome.`,
    }, {
        content: `WOW, Just WOW!`,
    }],
});

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

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

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

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

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