17 行代碼實現的簡易 Javascript 字符串模板

首發於個人博客 轉載請註明出處

這是源於兩年前，當我在作人生中第一個真正意義上的網站時遇到的一個問題

該網站採用先後端分離的方式，由後端的 REST 接口返回 JSON 數據，再由前端渲染到頁面上。

同許多初學 Javascript 的菜鳥同樣，起初，我也是採用拼接字符串的形式，將 JSON 數據嵌入 HTML 中。開始時代碼量較少，暫時還能夠接受。但當頁面結構複雜起來後，其弱點開始變得沒法忍受起來：

• 書寫不連貫。每寫一個變量就要斷一下，插入一個 + 和 "。十分容易出錯。

• 沒法重用。HTML 片斷都是離散化的數據，難以對其中重複的部分進行提取。

• 沒法很好地利用 <template> 標籤。這是 HTML5 中新增的一個標籤，標準極力推薦將 HTML 模板放入 <template> 標籤中，使代碼更簡潔。

當時個人心情就是這樣的：

爲了解決這個問題，我暫時放下了手上的項目，花了半個小時實現一個極簡易的字符串模板。

需求描述

實現一個 render(template, context) 方法，將 template 中的佔位符用 context 填充。要求：

1. 不須要有控制流成分（如 循環、條件 等等），只要有變量替換功能便可

2. 級聯的變量也能夠展開

3. 被轉義的的分隔符 { 和 } 不該該被渲染，分隔符與變量之間容許有空白字符

例子：

render('My name is {name}'， {
    name: 'hsfzxjy'
});  // My name is hsfzxjy

render('I am in {profile.location}', {
    name: 'hsfzxjy',
    profile: {
        location: 'Guangzhou'
    }
}); // I am in Guangzhou

render('{ greeting }. \\{ This block will not be rendered }', {
    greeting: 'Hi'
}); // Hi. { This block will not be rendered }

實現

先寫下函數的框架：

function render(template, context) {

}

顯然，要作的第一件事即是 匹配模板中的佔位符。

匹配佔位符

匹配的事，確定是交給正則表達式來完成。那麼，這個正則表達式應該長什麼樣呢？

根據 需求 一、2 的描述，咱們能夠寫出：

var reg = /\{([^\{\}]+)\}/g;

至於需求 3，我第一個想到的概念是 前向匹配，惋惜 Javascript 並不支持，只好用一個折衷的辦法：

var reg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
// 如果第一個或第三個分組值不爲空，則不渲染

如今，代碼應該是這樣：

function render(template, context) {

    var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;

    return template.replace(tokenReg, function (word, slash1, token, slash2) {
        if (slash1 || slash2) {  // 匹配到轉義字符
            return word.replace('\\', ''); // 若是 分隔符被轉義，則不渲染
        }

        // ...
    })
}

佔位符替換

嗯，正則表達式肯定了，接下來要作的即是替換工做。

根據 需求2，模板引擎不只要能渲染一級變量，更要渲染多級變量。這該怎麼作呢？

其實很簡單：將 token 按 . 分隔開，逐級查找便可：

var variables = token.replace(/\s/g, '').split('.'); // 切割 token
var currentObject = context;
var i, length, variable;

// 逐級查找 context
for (i = 0, length = variables.length, variable = variables[i]; i < length; ++i)
    currentObject = currentObject[variable];

return currentObject;

不過，有可能 token 指定的變量並不存在，這時上面的代碼便會報錯。爲了更好的體驗，代碼最好有必定的容錯能力：

var variables = token.replace(/\s/g, '').split('.'); // 切割 token
var currentObject = context;
var i, length, variable;

for (i = 0, length = variables.length; i < length; ++i) {
    variable = variables[i];
    currentObject = currentObject[variable];
    if (currentObject === undefined || currentObject === null) return ''; // 若是當前索引的對象不存在，則直接返回空字符串。
}

return currentObject;

把全部的代碼組合在一塊兒，便獲得了最終的版本：

function render(template, context) {

    var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;

    return template.replace(tokenReg, function (word, slash1, token, slash2) {
        if (slash1 || slash2) {  
            return word.replace('\\', '');
        }

        var variables = token.replace(/\s/g, '').split('.');
        var currentObject = context;
        var i, length, variable;

        for (i = 0, length = variables.length; i < length; ++i) {
            variable = variables[i];
            currentObject = currentObject[variable];
            if (currentObject === undefined || currentObject === null) return '';
        }
        return currentObject;
    })
}

除去空白行，一共 17 行。

將函數掛到 String 的原型鏈

甚至，咱們能夠經過修改原型鏈，實現一些很酷的效果：

String.prototype.render = function (context) {
    return render(this, context);
};

以後，咱們即可以這樣調用啦：

"{greeting}! My name is { author.name }.".render({
    greeting: "Hi",
    author: {
        name: "hsfzxjy"
    }
});
// Hi! My name is hsfzxjy.