문자열 확장 (2): 템 플 릿 엔진

나의 이전 블 로그 인 에서 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;
})();

도움말 클래스 템 플 릿 Helper 를 사 용 했 습 니 다.
코드 는 다음 과 같다.

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;
    }
}

시 켜 봐, 데모.
본 고 는 '기술 은 집중 에서 비롯 된다' 는 블 로그 에서 나 온 것 으로 작가 에 게 연락 하 세 요!