萌太隆的博客

A Brilliant Stars In The Future

【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可以简单匹配到被${}包裹的字符串,再通过递归的查找数据源中的数据。

阅读更多
版权声明:互相交流,共同进步。 https://blog.csdn.net/swl979623074/article/details/79980101
文章标签: 模板引擎 JS
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭