String擴展(2):模板引擎

在我的上一篇博文《String擴展之Format》中對String擴展了Format方法以應對複雜的字符串替換功能。這個方法其實已經構成了模板引擎的基礎部分。

而模板引擎的第二步就是增加參數替換以及方法處理。以使得數據邏輯和UI繪製進行分離。。

老規矩。核心代碼奉上。

// class TemplateBuilder
var TemplateBuilder = function (owner) {
    //constructor
    this.owner = owner;
}
TemplateBuilder.prototype = (function () {
    //private
    var methodMapping = {
        Test:function(value){
            return value+" run in test method"
        }
    } //處理方法映射
    var BuildTemplateHtml = function (templateHtml, paramObj) {   
        var exp = new RegExp("{([^{]*?)}", "ig");
        var returnValue = templateHtml;
        var result = exp.exec(returnValue);
        while (result) {//循環直到沒有剩餘符合模板規律的字符串
            result = result[1];
            var replaceSetting = { key: result, value: "" }
            var splits = result.split(":");
            var objType = splits[0];
            var paramName = splits[1];
            var mappingMethodStr = splits[2];
            var obj = null;
            //取得參數對象
            if(paramObj&&paramObj[objType])obj=paramObj[objType];
            var value = null;
            if (obj) {
                value = TemplateHelper.GetParam(obj, paramName);
            }
            //是否配置了調用模板處理方法
            if (mappingMethodStr) {
                var paramExp = /\((.*?)\)/ig;
                var mappingMethodName = mappingMethodStr.replace(paramExp, "");
                var method = methodMapping[mappingMethodName];
                if (method) {
                    var params = [value];
                    var methodParam = paramExp.exec(mappingMethodStr);
                    if (methodParam && methodParam.length > 1) {
                        methodParam = methodParam[1];
                        params = params.concat(methodParam.split(","));//取得參數
                    }
                    value = method.apply(this, params);//調用方法
                }
            }
            if (!value) { value = "" }
            replaceSetting.value = value;
            ;
            returnValue = returnValue.Format(replaceSetting);
            exp.lastIndex = 0;
            result = exp.exec(returnValue);
        }
        return returnValue;
    }
    var returnValue = {
        //public     
        owner: null,
        BuildTemplate: function (strTemplate, paramObj) {
            return BuildTemplateHtml.call(this, strTemplate, paramObj);
        }
    };
    return returnValue;
})();

這裏使用到了一個幫助類TemplateHelper

代碼如下

var TemplateHelper = {
    GetParam: function (sourceObj, strParam) {
        var strs = strParam.split(".");
        var returnValue = null;
        for (var i = 0; i < strs.length; i++) {
            if (!returnValue) {
                returnValue = sourceObj;
            }
            returnValue = returnValue[strs[i]];
            if (!returnValue) {
                break;
            }
        }
        if (!returnValue) {
            returnValue = $.trim(returnValue);
        }
        return returnValue;
    }
}

點我 看Demo