[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 = 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             ，          
         */
        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'
});