首发于我的博客 转载请说明出处

这是源于两年前，当我在做人生中第一个真正意义上的网站时碰到的一个题目

该网站采纳前后端星散的体式格局，由后端的 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) {

}

明显，要做的第一件事就是 婚配模板中的占位符。

婚配占位符

婚配的事，肯定是交给正则表达式来完成。那末，这个正则表达式应当长什么样呢？

依据 需求 1、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.