Ajax가 세계 Dojo 통합을 지배합니다.

Ajax 애플리케이션이 점점 많아지면서 다양한 Ajax Library(Prototype), Ajax Framework(DWR), Ajax Toolkit(Dojo, YUI)이 점점 많아지고 있는데, 이들을 결합할 수 있는 방법은 없을까요? 물론 Spring의 접근 방식과 유사하게 다양한 Ajax를 "접착"하기 위해 IoC 마이크로커널을 생성할 수는 없지만 이러한 Ajax 재사용 가능한 구성 요소를 통합하는 데 문제가 없어야 합니다. 다양한 Ajax의 약점을 방지하여 상대적으로 포괄적인 Ajax 솔루션을 구성합니다. 또한 개발자가 자신에게 친숙한 Ajax 구성 요소를 선택할 수 있는 유연성도 향상됩니다.​
현재 우리 회사는 자체 Ajax 프런트엔드 및 백엔드 통신 메커니즘을 캡슐화하고 재사용 가능한 클라이언트 구성 요소를 제공하는 Ajax 기반의 완전한 제품 세트를 구성했습니다. 우리 제품을 Dojo Toolkit과 통합하려고 했습니다. 다음은 내 접근 방식입니다. Dojo ComboBox 위젯은 Google Suggest와 유사한 자동 완성 구성 요소로 통합되어 있습니다.​
Dojo에서 제공하는 테스트 클래스 test_ComboBox.html로 시작하여 추적 및 디버깅을 위한 디버거를 추가하고 Dojo 위젯의 로딩 프로세스를 명확하게 합니다.​
추적 및 디버깅을 마친 후 Dojo의 위젯에 대한 일반적인 이해를 갖게 되었습니다. 먼저 현재 필요한 JavaScript 파일을 로드한 다음 전체 HTML 페이지를 구문 분석합니다. 페이지에서 위젯을 사용하는 세 가지 방법이 있습니다. 하나는 Dojo가 HTML 요소에서 구문 분석할 수 있는 몇 가지 속성을 추가하는 것입니다.
onValueChanged="setVal1"
>
그 중 dojoType, autocomplete, onValueChanged는 모두 dojo가 인식할 수 있는 속성입니다. 이는 typetry와 다소 유사합니다. 두 번째 방법은 DojoML 작성을 사용하는 것입니다.
onValueChanged="setVal1"
               
이러한 작성 방식은 기본적으로 jsp의 사용자 정의 태그와 동일합니다. 단지 구문 분석 프로세스를 백그라운드에서 앞으로 이동시키는 것뿐입니다. 할 말이 없습니다.​
또 다른 작성 방법은 페이지가 로드된 후 자바스크립트를 사용하여 지정된 html 요소에 위젯을 만드는 것입니다.
var 콤보;
dojo.addOnLoad(init);
함수 초기화(){
combo = dojo.widget.createWidget("dojo:ComboBox", {name:"prog",autocomplete:false,dataUrl:"comboBoxData.js"}, dojo.byId("progCombo"));
}
요소를 파싱하고 생성할 때 dojo에서 정의한 콤보박스 html 템플릿과 css 템플릿을 동시에 사용하여 최종 콤보박스 컨트롤을 페이지에 삽입하는 목적을 완성합니다.​
다음으로 Dojo ComboBox가 ajax를 통해 백엔드와 통신하는 방법을 살펴보겠습니다. Dojo ComboBox는 두 가지 자동 완성 방법을 제공합니다. 하나는 모든 데이터를 프런트엔드 캐시에 다운로드한 다음 사용자를 기반으로 캐시의 데이터를 일치시키는 것입니다. 프론트엔드에 입력하면 자동 완성에 필요한 데이터 목록이 표시됩니다. 다른 하나는 사용자가 매번 입력한 데이터를 기반으로 자동으로 완성되는 데이터를 얻기 위해 실시간으로 백그라운드에 요청을 보내는 것입니다. 물론 이 데이터도 사용자가 입력한 내용과 함께 캐시됩니다. 키와 얻은 데이터를 값으로 사용합니다. 두 가지 방법의 경우 Dojo는 다른 DataProvider(dojo.widget.incrementalComboBoxDataProvider 및 dojo.widget.basicComboBoxDataProvider)를 통해 이를 구현합니다. 이는 매우 미묘하며 매우 감탄합니다. 두 클래스 모두 dojo.declare("className", "parentClassName", constructor,declarationBody)를 통해 수행되는데, 이는 이전 접근 방식과도 다릅니다. 대체로 매우 미묘합니다!​
Dojo가 백그라운드로 요청을 보내는 프로세스는 dojo.io.bind() 메소드에 캡슐화되어 있으며, 대체 방법을 찾아야 하기 때문에 자체적인 프런트엔드 및 백엔드 통신 메커니즘 세트가 있습니다. dojo.io.bind()를 최종 통합의 목적을 달성하려면 Dojo ComboBox의 데이터 상호 작용이 DataProvider에 캡슐화되어 있기 때문에 자체 DataProvider만 구현하면 되므로 Dojo의 소스를 수정할 필요가 없습니다. , 그리고 Dojo를 사용할 수도 있습니다. 상속 메커니즘은 기존 DataProvider에서 대체해야 하는 메서드를 통합하고 덮어쓰므로 Java를 작성하는 듯한 느낌을 줍니다. 
도장.선언(   
    "dojo.widget.incrementalDoradoComboBoxDataProvider",   
    dojo.widget.incrementalComboBoxDataProvider,   
    null,   
    {   
        ////저희가 사용하는 통신 방식은 다음과 같습니다.   
        startSearch: function(/*String*/ searchStr, /*함수*/ 콜백){   
            if(this._inFlight){   
                // 수정: 백오프를 구현하세요!   
            }   
            var cmd = getControl(this.searchUrl);   
            cmd.parameters().setValue("searchString", searchStr);   
            var _this = this;   
            EventManager.addDoradoEvent(cmd, "onSuccess", function(command){   
                   _this._inFlight = false;   
                    //규칙:   
                   //1. 키는 'result'여야 합니다.   
                  //2.데이터 형식은 [["Alabama","AL"],["Alaska","AK"]] 또는 [{"Alabama":"AL"},{"Alaska":이어야 합니다. "AK"}]   
                   var data = dj_eval(command.outParameters().getValue("result"));   
                   if(!dojo.lang.isArray(data)){   
                       var arrData = [];   
                       for(var key in data){   
                           arrData.push([data[key], key]);   
                       }   
                       데이터 = arrData;   
                    }   
                    _this._addToCache(searchStr, data);   
                    콜백(데이터);   
                }   
            );   
            cmd.execute();   
            this._inFlight = true;   
        }   
    }   
);   
통상적인 인터페이스는 우리가 스스로 사용할 수 있는 미래의 커뮤니케이션 도구입니다.​
다음 단계는 페이지를 생성하고 dojo 로딩 js 스크립트를 추가하는 것입니다.



아래에 로드할 컨트롤 부분 HTML:
dataUrl="cmdComboboxSearch"
dataProviderClass = "dojo.widget.incrementalDoradoComboBoxDataProvider"
스타일="너비: 200px;"
이름="샘플2"
자동완성="false"
                                            
이렇게 해서 통합 작업이 완료되었으며 파일의 디렉터리 구조도 있습니다.
웹앱
|--adapter(통합에 사용되는 모든 js 파일 저장)
|------도장
|---------위젯
|------------DoradoComboBox.js
|--dojo(dojo의 모든 js 파일)
|------src
|------dojo.js
|--js(자체 구성 요소 라이브러리의 js 파일)
|--WEB-INF
결론
확장 후 많은 문제가 발견되었습니다.
1. 두 개의 통합된 항목 세트는 Object.prototype, Array.prototype 및 Function.prototype에 자체 항목 중 일부를 추가하므로 이름 지정 충돌이 발생하기가 매우 쉽습니다.​ <script></script>2. 둘 다 일부 전역 함수, 변수 등을 사용하므로 잠재적인 충돌이 있을 수 있지만 아직까지는 발생하지 않았습니다.​ <script> <br> dojo.require("dojo.widget.ComboBox"); <br> // 注意这里有一个定位的问题,查找路径必须加"..", <br> // 因为dojo在查找DoradoComboBox.js的时候会从"/dojo"而不是"/"目录开始查找 <br> // 最终使用xmlhttp加载的路径是/dojo/../adapter/dojo/widget/DoradoComboBox.js <br> dojo.setModulePrefix("adapter.dojo.widget","../adapter/dojo/widget"); <br> dojo.require("adapter.dojo.widget.DoradoComboBox"); <br></script>3. 여러 세트의 js 라이브러리를 동시에 로드해야 합니까? 클라이언트에 대한 부담이 너무 큽니까? 성능이 만족스럽습니까? 아직 테스트가 가능하지 않습니다.