简单版html模板引擎

- 技术 programming

背景

功能中包含一个历史申请记录的显示页面,简笔画简单画了一下,如下所示:

panel

不知道多久没写过字了,画下来的东西着实丑,既然不能绘色,那就绘声一下。 每一条记录对应一个面板,每一个面板上呈现着对应记录的信息。那么不同的审批状态,就有很多东西不一样:

  1. 数据,这个没得说
  2. 内容的样式。比如审批成功用绿色标识,失败是红色
  3. 操作。比如审批中,那么就有一个撤销申请的按钮;其他的状态,就没有这个按钮,但是有一个面板折叠的按钮
  4. 面板左侧有状态条,反映当前的状态,同时也是时间线的作用
  5. 。。。

这个历史申请的数据是用XML格式传递的,如下所示:

<?xml version=\"1.0\" encoding=\"utf-8\"?>
	<Expansion>
		<Result>0</Result>
		<ApplicationRecord>
		<record 
			id="1" 
			status="0" 
			apply_cpu="4" 
			apply_mem="8" 
			apply_disk="256" 
			apply_time="2019-10-14 20:00" 
			approve_time="2019-10-15 15:00" 
			apply_reason="卡得不能用了"
			approve_reason="满足你"
			admin_name="XXX" 
			admin_phone="2333333" 
			admin_email="test@gmail.com"/>

			<record 
			id="2" 
			status="2" 
			apply_cpu="4" 
			apply_mem="8" 
			apply_disk="256" 
			apply_time="2019-10-14 20:00" 
			approve_time="2019-10-15 15:00" 
			apply_reason="卡得不能用了"
			approve_reason="那就继续卡着吧"
			admin_name="XXX" 
			admin_phone="2333333" 
			admin_email="test@gmail.com"/>
		</ApplicationRecord>
	</Expansion>

所以很明显,要去遍历解析这个XML,去循环创建面板,再根据每条记录里对应的字段,写上正确的内容以及设置不同的样式。

由于某些原因,没有使用任何样式库或者框架,使用原生js编写。

以上是背景。

思路

当然这个需求没有难点,最一般的方法,当然就是html字符串拼接,在大量的 js if else逻辑里,将不同的数据和html片段拼接起来。其中一个片段可能是这样:

var data = {};  // 数据
var str = '';   // html拼接

if(data.status === '0') {
    str += '<p class="fail">审核失败</p>'
} else if(data.status === '1') {
    str += '<p class="ing">审核中</p>'
} else if

这种写法会让整个代码逻辑显得很乱,整个html片段也是分散的,不便于后期维护,别人看这份代码也不能够一眼看明白到底做了什么。这个需求如果是使用Vue这种现代化框架,可以良好的使用诸如 v-if 等指令来完成,然而这里并不能使用现代化框架来开发。

我的期望解决方式是:

于是就编写了一个简单的模板引擎来解决这个问题,它对外是一个函数,使用的方式如下:

// tpmplate是html片段,第二个参数是数据
tplEngine(template, {
    status: 1,
    applyTime: '2019-10-17',
    applyCpu: 'XXX',
    ......
});

那么html片段是这个样子的:

var template = `
    <div class="<% statusClass %>" > <%statusWords %> </div>
    <span>申请时间: <% applyTime %> </span>

    <% if(this.status !== 1) {%>
        <div>
            撤销申请
        </div>
    <% } %>

    <% else {%>
        <div>
            折叠面板的按钮
        </div>
    <% } %>
`

虽然嵌入了一些奇怪的东西,但是很明显:

  1. html是完整的写在一起的,一眼就能看懂
  2. 嵌入的部分是数据和js语法,不影响阅读习惯,逻辑很清晰
  3. 内容很灵活的根据传入的数据改变而改变,不需要自己去做其他任何操作

结果

通过这样封装,那么最后完成这个需求的代码就很简单和清晰了,伪代码如下:

// 定义好模板
var tpl = '<div>.......';

// 解析数据,得到所有的申请记录 data
var data = parseXML();

// 遍历data创建面板
data.each(function(index, item) {
    // 这一行代码就得到了创建好的面板
    var panel = tplEngine(tpl, item);

    $('pannel-container').append(panel);
});

实现原理

使用正则表达式,讲模板数据、js语法关键字、普通字符串匹配出来,然后把他们组成成Javascript语句。这些语句组成起来就是一个函数的具体实现,然后把这个函数的作用域设置在我们传入的数据对象上。

/**
 * html模板转换
 * @param {String} tpl html模板
 * @param {Object} data 数据
 */
var tplEngine = function(tpl, data) {

    var templateBoundary = /<%([^%]+)?%>/g,     // 模板边界 <% %>
        jsKeyWord = /(^( )?(for|if|else|switch|case|break|{|}))(.*)?/g,     // js关键字匹配出来
        tplToCode = 'var r=[];\n',  // html转化为js代码
        matchedLen = 0;     // 已经处理的长度

    var _addToCode = function(elememt, isJs) {

        // 去除空字符串的影响,否则会导致一些语法,比如 else 没有和if连接起来,出现报错
        if(elememt === '') return;

        // 组装成对应的js语句
        if(isJs) {
            if(elememt.match(jsKeyWord)) {
                tplToCode +=  elememt + '\n';
            } else {
                tplToCode += 'r.push(' + elememt + ');\n';
            }
        } else {
            tplToCode += 'r.push("' + elememt.replace(/"/g, '\\"') + '");\n';
        }
    };

    while (match = templateBoundary.exec(tpl)) {
        // 不存在模板(不需要处理)的部分
        _addToCode(tpl.slice(matchedLen, match.index));

        // 不存在关键字则认为是变量替换
        jsKeyWord.test(match[1]) ? _addToCode(match[1], true) : _addToCode("this." + match[1], true);

        matchedLen = match.index + match[0].length;
    }

    _addToCode(tpl.substr(matchedLen, tpl.length - matchedLen));

    tplToCode += 'return r.join("\n");'; 
    // console.info(code);

    return new Function(tplToCode.replace(/[\r\t\n]/g, '')).apply(data);
};