[DikeJS]关于js模板技术，使用requireJS定义模块（四）

标签：

前几次对模板技术进行了分析和编写，发现不是很合理，现在发上新的改良代码：

/**
 * @Author Dike.Li
 * @Date 2015/7/30
 * @class Template
 * @public
 * @Description Template Label Replace
 */
define(function (require) {

    /**
     * 提取模板中 XXX=‘{XXX}‘ || XXX="{XXX}"
     * @type {RegExp}
     */
    var regExp = new RegExp(‘[a-zA-Z]+[\\s]*=[\\s]*[\"\‘]\\{[^\\{\\}]+\\}[\"\‘]‘, ‘\g‘);

    /**
     * 提取标签正则表达式 {XXX}
     * @type {RegExp}
     */
    var regExpLable = new RegExp(‘\\{[^\\{\\}]+\\}‘, ‘\g‘);
    /**
     * 提取标签中的名称 {XXX} -> XXX
     * @type {RegExp}
     */
    var regExpLabelName = new RegExp(‘[^\\{\\}]+‘, ‘\g‘);

    /**
     * 将数组转换为字符串
     * @param str
     * @returns {*}
     */
    var convertString = function (obj) {
        var str = null;
        if (obj instanceof Array) {
            str = obj.join(‘‘);
        }
        return str;
    };

    /**
     * 要求模板中的{id}标签与option中的属性{id:123}一致
     * @param temp 模板
     * @param option 属性设置
     * @returns {*}
     * @constructor
     */
    var getTemp = function (temp, option) {
        /**
         * 进行类型处理
         * @type {*}
         */
        temp = convertString(temp);

        /**
         * 提取 XXX=‘{XXX}‘ || XXX="{XXX}" 格式的数组
         * @type {Array|{index: number, input: string}|*}
         */
        var alArr = temp.match(regExp);

        /**
         * 根据option中的属性配置项翻译模板内容，并将不存在的标签删除
         */
        for (var al in alArr) {

            /**
             * 获取标签
             */
            var label = alArr[al].match(regExpLable)[0];
            /**
             * 获取标签名称
             */
            var labelName = label.match(regExpLabelName)[0];

            if (typeof(option[labelName]) === ‘undefined‘ ||
                option[labelName] === null ||
                option[labelName] === ‘null‘ ||
                option[labelName] === ‘‘) {
                temp = temp.replace(alArr[al], ‘‘);
                continue;
            }

            temp = temp.replace(label, option[labelName]);
        }
        return temp;
    };

    return {
        getTemp: getTemp
    }
});

使用方法：

var temp = [‘<div class="login-main">‘,
    ‘<div class="login-top"><img src="images/login-top.png" width="471" height="91" /></div>‘,
    ‘<div class="dl-top">‘,
    ‘<p><span class="dl-wz">用户名：</span><span><input id="{username}" type="text"  class="dl-anniu"/></span></p>‘,
    ‘<p><span class="dl-wz">密码：</span><span><input id="{password}" type="text" class="dl-anniu" /></span></p>‘,
    ‘<p><span class="dl-mima"><input type="checkbox" value="" class="fx-k" /></span><span>记住密码&nbsp;<a href="#">重置</a></span></p>‘,
    ‘<p class="denglu-t"><input id="{login_button}" class="login-b"/></p>‘,
    ‘</div>‘,
    ‘</div>‘];

var template = require(‘Template‘);
temp = template.getTemp(temp,{
    username: ‘username‘,
    password:‘password‘,
    login_button:‘login_button‘
});

[DikeJS]关于js模板技术，使用requireJS定义模块（四）

标签：

原文地址：http://my.oschina.net/u/2349331/blog/487895