매일 조금씩 - EXT 소스 분석 6

소스 코드 를 배우 고 고 통 스 럽 고 즐 거 운 과정.
자신 은 EXT 의 템 플 릿 모델 과 디자인 모델 의 템 플 릿 모델 의 실현 은 현저 한 차이 가 있 지만 그들의 사상 은 모두 똑 같 아서 변 하지 않 는 부분 과 변화 하 는 부분 을 분리 시 켜 변 하지 않 는 부분 을 잘 재 활용 할 수 있다 고 느 꼈 다.
작은 예 를 들 어 한 공업 대학 은 하나의 현수막 이 필요 하 다. 지출 을 줄 이기 위해 이 현수막 은 반복 적 으로 사용 할 수 있어 야 한다. 즉, 그 위의 글 자 는 왔다갔다 고 칠 수 있 지만 그 밑 에 있 는 빨 간 천 은 변 하지 않 는 다.

var s='<div style="width:200px;height:20px;background-color:red"><span style="color:black">{0}</span></div>';
var c=String.format(s,'  XX    ，    ');
document.write(c);
var c=String.format(s,"               ');
document.write(c);

Ext 는 원생 String 을 확장 하고 format 라 는 정적 방법 을 추가 하여 원본 코드 를 봅 니 다.

format : function(format){
        var args = Ext.toArray(arguments, 1);
        return format.replace(/\{(\d+)\}/g, function(m, i){
            return args[i];
        });
}

이해 하기 쉬 운 것 은 첫 번 째 매개 변수 (문자열) 에서 {\ d +} ({0}, {1}...) 와 일치 하 는 모든 문자열 을 args [1], args [2] 로 순서대로 바 꾸 는 것 입 니 다.
이렇게 해서 변 함 과 변 함 을 분리 시 켰 다.
이 함수 의 능력 은 너무 제한 되 어 있 습 니 다. 변 하 는 부분 을 삽입 할 때 처리 하려 면 이 함 수 는 분명히 무력 합 니 다.
EXT 는 두 개의 템 플 릿 클래스 를 제공 합 니 다.
Ext.Template,Ext.util.Xtemplate。
먼저 Ext. Template 류 를 살 펴 보 겠 습 니 다. 인 스 턴 스 방법 이 매우 많 고 저 에 게 도 매우 어렵 습 니 다. 먼저 중요 한 2 가 지 를 주목 하 세 요.
우선 이 종류 자 체 를 살 펴 보 자.

Ext.Template = function(html){
    var me = this,
        a = arguments,
        buf = [];

    if (Ext.isArray(html)) {
        html = html.join("");
    } else if (a.length > 1) {
        Ext.each(a, function(v) {
            if (Ext.isObject(v)) {
                Ext.apply(me, v);
            } else {
                buf.push(v);
            }
        });
        html = buf.join('');
    }

js 의 함 수 는 정말 매우 복잡 한 것 이다. 그것 은 하나의 대상 이 되 는 방법 일 수도 있 고 그 자체 의 유일한 구조 방법 일 수도 있 으 며 그 자체 도 하나의 대상 이다.
내 가 이해 하 는 것 은 우리 가 이러한 대상 을 만 들 때 이 함 수 를 직접 호출 하 는 유일한 차이 점 은 new 가 이러한 대상 을 되 돌려 주 는 것 이다.
우리 new 가 이 템 플 릿 의 대상 이 될 때 이 구조 기 는 대충 하 는 일 은 매개 변수 에 따라 html 문자열 을 추가 하고 하나 이상 의 함수 나 속성 을 추가 할 수 있 습 니 다. 이 함수 들 은 속성 이 매우 유용 합 니 다. 삽입 할 데 이 터 를 포맷 하 는 데 사 용 됩 니 다. 사용자 정의 (this. XX) 일 수 있 습 니 다.Ext. util. format 류 의 함수 일 수도 있 습 니 다.
속성 은?complied, disableFormat 등 분석 과정의 설정 매개 변수 입 니 다.
이 템 플 릿 인 스 턴 스 가 있 으 면 인 스 턴 스 방법 을 사용 할 수 있 습 니 다. 이 때 는 동적 데 이 터 를 사용 하여 변 경 된 부분 을 입력 합 니 다. 이 때 는 포맷 함 수 를 사용 하여 동적 데 이 터 를 포맷 하고 우리 가 나타 나 고 싶 은 곳 에 표시 합 니 다.
append 실례 방법 으로 설명 하 다.
append : function(el, values, returnElement){
        return this.doInsert('beforeEnd', el, values, returnElement);
 },
이 때 인 스 턴 스 방법 을 호출 한 것 을 볼 수 있 습 니 다. - doInert.
doInsert : function(where, el, values, returnEl){
        el = Ext.getDom(el);
        var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values));
        return returnEl ? Ext.get(newNode, true) : newNode;
},
또한 doInset 은 HTML 문자열 로 생 성 된 곳 을 찾 습 니 다. (DOM 문서 의 어디 에 두 었 는 지, 이 HTML 문자열 은 apply Template (values) 로 생 성 되 었 습 니 다.) 동적 데이터 와 포맷 으로 데 이 터 를 전송 하고 내용 이 채 워 진 구체 적 인 템 플 릿 (HTML 문자열) 을 되 돌려 주 는 기능 은 apply Template (values) 가 완 료 된 것 입 니 다.
이 apply Template (values) 를 보 세 요. 네, 이 함수 가 또 토치카 가 되 었 습 니 다. 아직도 흐릿 하 게 보 입 니 다. 정규 표현 식 이 비교적 못 배 웠 기 때 문 입 니 다. 특히 fn 에 있 는 Jack Slocum...

Ext.apply(Ext.Template.prototype, {

    applyTemplate : function(values){

        var me = this,//    

            useF = me.disableFormats !== true,//                    

            fm = Ext.util.Format, 

            tpl = me;           

        if(me.compiled){//       ，    ，        

            return me.compiled(values);

        }

        function fn(m, name, format, args){//    ，  String.replace     ，           
                                                               

           
               if (format && useF) {//        format  ，

                if (format.substr(0, 5) == "this.") {//            

                    return tpl.call(format.substr(5), values[name], values);//  

                } else {//  Ext.util.Format    

                    if (args) {//    Ext.util.Format     
                        var re = /^\s*['"](.*)["']\s*$/;

                        args = args.split(',');

                        for(var i = 0, len = args.length; i < len; i++){

                            args[i] = args[i].replace(re, "$1");

                        }

                        args = [values[name]].concat(args);

                    } else {

                        args = [values[name]];

                    }

                    return fm[format].apply(fm, args);//  

                }

            } else {

                return values[name] !== undefined ? values[name] : "";

            }

        }

        return me.html.replace(me.re, fn);//      

    },