用Javascript实现模板功能

最近在后台做一个功能,传给后台API的是一个多层的js对象。
如果用Vue做的话,只需要操作变量,模板就会自动更新内容了,十分方便。
但是当前后台用的是JQuery,因此打算自己实现一个模板替换JS变量的功能。
搜索了一些资料,发现js的replace替换字符串功能有限,反而用正则就灵活的多。
一种比较推荐的写法是:

var str = "string1 is a boy,string2 is a girl";
str = str.replace(/string1|string2/gi,function(mached){
    var map = {
        'string1':'xxxx',
        'string2':'xxxxx',
    };
    return map[mached];
});

通过 这样来实现多个变量的替换。看到这种代码,我觉得用PHP还真是方便许多。

后来又查了一些资料,发现有人也写了相似的功能,文章链接:

http://www.hsfzxjy.site/a-simple-javascript-template-language/

博主仅用17行代码就搞定了,十分方便。不过貌似忘了右边反斜杠转译字符的替换了,所以我简单修改一下,代码如下:

function render(template, context) {
    var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;
    return template.replace(tokenReg, function (word, slash1, token, slash2) {
        if (slash1 || slash2) {
            return word.replace(/\\/g, '');
        }
        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;
    })
}

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

//使用方法
//支持变量里有空格,被转译的分隔符{和}不会被渲染
"{   greeting   }! My name is { author.name } \\{aaa \\}.".render({
    greeting: "Hi",
    author: {
        name: "hsfzxjy"
    }
});
// "Hi! My name is hsfzxjy {aaa }."

 

需要的朋友请拿走,不谢咯~

发表评论

电子邮件地址不会被公开。 必填项已用*标注