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

标签：

最近由于需求改变，我又改写了Template模板方法，此次的改动增加了XXX：{XXX}的标签替换和独立的{XXX}替换，执行顺序为XXX={XXX} -> XXX:{XXX} -> {XXX}，代码如下：

/**
 * @Author Dike.Li
 * @Date 2015/8/14
 * @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‘);

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

    /**
     * 将数组转换为字符串
     * @param str
     * @returns {*}
     */
    var convertString = function (obj) {
        var str = obj;
        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中的属性配置项翻译模板内容，并将不存在的标签删除 限定格式(XXX={XXX})
         */
        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]);
        }

        /**
         * 继续过滤内容为XXX:{XXX}
         */
        var colonArrs = temp.match(regExpColon);
        for (var ca in colonArrs) {
            /**
             * 获取标签
             */
            var cLabel = colonArrs[ca].match(regExpLable)[0];
            /**
             * 获取标签名
             */
            var cLabelName = cLabel.match(regExpLabelName)[0];

            if (typeof(option[cLabelName]) === ‘undefined‘ ||
                option[cLabelName] === null ||
                option[cLabelName] === ‘null‘ ||
                option[cLabelName] === ‘‘) {
                temp = temp.replace(colonArrs[ca], ‘‘);
                continue;
            }
            temp = temp.replace(cLabel, option[cLabelName]);
        }

        /**
         * 最后替换内容为{XXX}
         */
        var tempArrs = temp.match(regExpLable);
        for (var ta in tempArrs) {
            /**
             * 获取名字
             * @type {Array|{index: number, input: string}}
             */
            var taLabelName = tempArrs[ta].match(regExpLabelName)[0];
            if (typeof(option[taLabelName]) === ‘undefined‘ ||
                option[taLabelName] === null ||
                option[taLabelName] === ‘null‘ ||
                option[taLabelName] === ‘‘) {
                temp = temp.replace(tempArrs[ta], ‘‘);
                continue;
            }

            temp = temp.replace(tempArrs[ta], option[taLabelName]);
        }
        return temp;
    });

    return {
        getTemp: getTemp
    }
});

应用模板：

<div id="container_viewport_layout_main" class="container_viewport_layout_main">
    <div class="container_viewport_layout_top" style="display: {top_hide}">
        <h2>
            <div id="{top_id}" class="container_viewport_layout_toptitle">{top_name}</div>
            <div class="container_viewport_layout_topsj"><img src="Component/view/container/Viewport/images/top-sj.png" width="29" height="23"/></div>
        </h2>
    </div>

    <div class="container_viewport_layout_left">
        <div class="container_viewport_layout_tabox">
            <h2>
                <div class="container_viewport_layout_lefttitle">标题</div>
                <div class="container_viewport_layout_leftsj"><img src="Component/view/container/Viewport/images/left-sj.png" width="29" height="23"/>
                </div>
            </h2>
        </div>
    </div>
    <div class="container_viewport_layout_middle"></div>
    <div class="container_viewport_layout_right">
        <h2>
            <div class="container_viewport_layout_righttitle">标题</div>
            <div class="container_viewport_layout_rightsj"><img src="Component/view/container/Viewport/images/right-sj.png" width="29" height="23"/></div>
        </h2>
    </div>
    <div class="container_viewport_layout_bottom">
        <h2>
            <div class="container_viewport_layout_bottomtitle">标题</div>
            <div class="container_viewport_layout_bottomsj"><img src="Component/view/container/Viewport/images/bottom-sj.png" width="29" height="23"/>
            </div>
        </h2>
    </div>
</div>

实际应用例子：

new (require(‘Viewport‘))({
    top_name:‘top name‘,
    top_hide:‘block‘,
    top_id:‘asdasd‘,
    render:$(‘body‘)
});

效果图：

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

标签：

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