【JS】简单实现一个引擎模板

前言

这两天在做数据处理的工作，最初是简单粗暴直接拼接字符串，数据量少时还没发现什么问题。当数据多时，拼接的自己都闲麻烦的。想到了使用了模板来处理，简单方便，再也不用使用一堆的加号了。简单看下实现吧。

模板和数据源

//模板
var ph = 'this is a ${type} , made in ${msg.date} and imagepath is ${msg.imagepath}';
//数据源
var item = {type:'process',msg:{date:'2018-4-17',imagepath:'java.exe'}};

目标：
将数据源中的数据替换到模板字符串中，得到最终的输出为：

this is a process , made in 2018-4-17 and imagepath is java.exe

实现

原理很简单，就是匹配模板的被${}包裹的内容，对应的将数据源置换到里面。

/**
 * 递归读取嵌套对象中的值
 * 
 * @param {Object} item 对象 {type:'process',msg:{date:'2018-4-17',content:'test'}}
 * @param {Array} vars key值 ['msg','content']
 * @param {int} i key值数组的下标
 */
function getValue(item, vars, i) {
    if (i === vars.length - 1) {
        return item[vars[i]];
    }
    if (item && item[vars[i]]) {
        return getValue(item[vars[i]], vars, ++i);
    } else {
        return null;
    }
}

/**
 * 模板解析
 * 
 * @param {Object} item 待替换数据
 * @param {String} placeHolder 字符串模板
 */
function replacePlaceHolder(item, placeHolder) {
    return placeHolder.replace(/\$\{([\w\.]+)\}/g, function (word, key) {
        if (key && item) {
            let vars = key.split('.');
            return getValue(item, vars, 0);
        } 
        return null;
    });
}

通过replace可以简单匹配到被${}包裹的字符串，再通过递归的查找数据源中的数据。