weui.js 源码 - 模板渲染

weui.js
weui.js文档

WeUI 的轻量级 js 封装。

注意：由于微信小程序不支持dom操作，所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本，详情请看：github.com/Tencent/weu…

渲染函数 util/util.js

import objectAssign from 'object-assign';

objectAssign($, {
    /**
     * render
     * 取值：<%= variable %>
     * 表达式：<% if {} %>
     * 例子：
     *  <div>
     *    <div class="weui-mask"></div>
     *    <div class="weui-dialog">
     *    <% if(typeof title === 'string'){ %>
     *           <div class="weui-dialog__hd"><strong class="weui-dialog__title"><%=title%></strong></div>
     *    <% } %>
     *    <div class="weui-dialog__bd"><%=content%></div>
     *    <div class="weui-dialog__ft">
     *    <% for(var i = 0; i < buttons.length; i++){ %>
     *        <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_<%=buttons[i]['type']%>"><%=buttons[i]['label']%></a>
     *    <% } %>
     *    </div>
     *    </div>
     *  </div>
     * A very simple template engine
     * @param {String} tpl
     * @param {Object=} data
     * @returns {String}
     */
    render: function (tpl, data) {
        const code = 'var p=[];with(this){p.push(\'' +
            tpl
                .replace(/[\r\t\n]/g, ' ')
                .split('<%').join('\t')
                .replace(/((^|%>)[^\t]*)'/g, '$1\r')
                .replace(/\t=(.*?)%>/g, '\',$1,\'')
                .split('\t').join('\');')
                .split('%>').join('p.push(\'')
                .split('\r').join('\\\'')
            + '\');}return p.join(\'\');';
        return new Function(code).apply(data);
    },
})

模板示例 dialog.html：

<div class="<%=className%>">
    <div class="weui-mask"></div>
    <div class="weui-dialog <% if(isAndroid){ %> weui-skin_android <% } %>" role="dialog" aria-modal="true" tabindex="-1">
        <% if (title) { %>
        <div class="weui-dialog__hd"><strong class="weui-dialog__title"><%=title%></strong></div>
        <% } %>
        <div class="weui-dialog__bd"><%=content%></div>
        <div class="weui-dialog__ft">
            <% for(var i = 0; i < buttons.length; i++){ %>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_<%=buttons[i]['type']%>" role="button"><%=buttons[i]['label']%></a>
            <% } %>
        </div>
    </div>
</div>

使用示例：

import $ from '../util/util';
import tpl from './dialog.html';


$.render(tpl, {
    title: null,
    content: '',
    className: '',
    buttons: [{
        label: '确定',
        type: 'primary',
        onClick: $.noop
    }],
    isAndroid: isAndroid
})