50行代码实现一套自己的模板字符串

写在前面

想必很多前端开发人员都头痛于jquery的字符串拼接，大量的“+”和引号转义让人无可奈何，幸得后来各大MVC框架的出现解放了大量开发者的双手，但是有部分人仍然受困于IE浏览器对MVC框架的支持性，avalon虽然解决了这个问题，不过他的体积略大，中小型项目必然用不上，这个时候自己实现一套字符串模板就显得很有必要，笔者也是在工作中因为公司要求兼容IE7，并且框架要求为jquery的前提下开始了这套字符串模板的开发，总共开发时间为一天半，下面整理了我的开发思路和代码分析，希望能对读者有所帮助。
这套字符串模板适合于PC端社区类，商城类的开发。

具体实现

首先明确这套字符串模板需要实现的功能

内嵌变量
标签模板
循环渲染

1. 内嵌变量

我们先看看es6中模板字符串的例子：

var person = {
    name: '小明',
    age: 20
}
var str = `他是${person.name},年龄为${person.age}` //输出"他是小明，年龄为20"

ES6中用${}作为变量修饰符，我们也借鉴一下，那怎么把变量嵌入到字符串中呢？
这里我用的正则表达式匹配"${*}"，然后取出其中的变量值，通过eval这个方法解析变量，下面是我的具体实现代码：

function _template(str) {
    var _regVar = /\$\{(.*?)\}/;
    //变量渲染
    while(_regVar.test(str)) {
        var v = _regVar.exec(str)[1];
        str = str.replace(_regVar,eval(v));
    }
    return str;
}

这时候执行 template('他是${person.name}')，输出为"他是小明"，第一步成功！

2. 标签模板

单纯的字符串模板实现起来还是比较容易的，但是开发中大部分需求是标签的拼接，替换等，所以接下来的步骤才是重中之重。

这里我定义了一个参数type，表示输出的字段类型，这里可选'html'，'text'：

function _template(str, options) {
    var defaults,
    options,
    _regVar,
    _html;
    
    options = options || {};

    defaults = {
        type: 'text', // 可选'text','html'
    }
    
    for(var key in defaults) {
        if(options[key]) {
            defaults[key] = options[key];
        }
    }
    
    _regVar = /\$\{(.*?)\}/;
    //变量渲染
    while(_regVar.test(str)) {
        var v = _regVar.exec(str)[1];
        str = str.replace(_regVar,eval(v));
    }
    
    if(defaults.type === 'html') {
        div = document.createElement('div');
        div.innerHTML = str;
        //childNodes是nodelist对象(非DOM对象)，不能直接使用append方法，所以标签模板不能存在两个及以上的顶级标签，例如"<p>第一句</p><div>最后一段</div>"。
        _html = div.childNodes[0];
    } else if(defaults.type === 'text') {
        _html = str;
    }
    return _html;
}

执行 template('<div>他是${person.name}</div>',{
type: 'html'
})
结果为:

test1.png

3. 循环渲染

循环变量是一个附加的功能，通过在参数中设置loopIndex来达到多次渲染的效果，这个很简单，直接贴代码：

function _template(str, options) {
    var defaults,
    options,
    _regVar,
    _html;
    
    options = options || {};

    defaults = {
        type: 'text', // 可选'text','html'
        loop: false,
        loopIndex: 0
    }
    
    for(var key in defaults) {
        if(options[key]) {
            defaults[key] = options[key];
        }
    }
    
    _regVar = /\$\{(.*?)\}/;
    //变量渲染
    while(_regVar.test(str)) {
        var v = _regVar.exec(str)[1];
        str = str.replace(_regVar,eval(v));
    }
    
    if(defaults.type === 'html') {
        if(defaults.loop && defaults.loopIndex > 1) {
            var 
            _frag,
            _index;

            _index = defaults.loopIndex;
            _frag = document.createDocumentFragment();
            div = document.createElement('div');
            while(_index--) {
                _html += str;
            }
            _index = defaults.loopIndex;
            div.innerHTML = _html;
            for(var i = 0; i < _index; i++) {
                _frag.append(div.childNodes[0]);
            }
            return _frag;
        } else {
            div = document.createElement('div');
            div.innerHTML = str;
            _html = div.childNodes[0];
        }
        
        return _html;
    } else if(defaults.type === 'text') {
        _html = str;
        return _html;
    }
}

列表渲染

实际开发中，用的最多的就是列表渲染，比如商城里的商品列表，这样的数据应该怎么渲染呢？
假如后端给了你这样一条数据，需求是把它们插入到一个商品列表中。

var goods = [
    { name: '哇哈哈', price: 1.5 },
    { name: '加多宝', price: 3.5 },
    { name: '雪碧', price: 2 }
]

下面是具体的代码实现

for(var i = 0; i < goods.length; i ++) {
    var tem = template('\
    <div class="item">\ //原生js不支持字符串换行，可使用'\'代替'+'实现字符串拼接。
        <div class="item-name">${goods[i].name}</div>\
        <div class="item-price">${goods[i].price}</div>\
    </div>',{
        type: 'html'
    });
    document.getElementById('text').append(tem);
}

在文章最后再次感谢大家的阅读，喜欢的话麻烦点个赞，关注一波，如果发现问题欢迎指出！