Ajax dominates the world Dojo integration chapter_dojo

With more and more Ajax applications, various Ajax Library (Prototype), Ajax Framework (DWR), and Ajax Toolkit (Dojo, YUI) are becoming increasingly abundant. Is there any way to combine these? Similar to Spring's approach, of course I can't create an IoC microkernel to "glue" various Ajax together, but there should be no problem integrating these Ajax reusable components, so as to avoid reinventing the wheel. You can also use the strengths and avoid weaknesses of various Ajax to form a relatively comprehensive Ajax solution. It also increases the flexibility for developers to choose their own familiar Ajax components.​
At present, our company has formed a complete set of products based on Ajax, which encapsulates its own Ajax front-end and back-end communication mechanisms and provides reusable client components. I tried to integrate our products with Dojo Toolkit. The following is my approach. The Dojo ComboBox Widget is integrated, which is actually an Auto Completion component, similar to Google Suggest.​
Start with the test class test_ComboBox.html provided by Dojo, add a debugger for tracking and debugging, and clarify the loading process of Dojo Widget.​
After tracking and debugging, I have a general understanding of Dojo's Widget: first, load the currently required JavaScript file, and then parse the entire html page. There are three ways to use widgets on the page: one is to add some attributes that Dojo can parse on the HTML element, such as
onValueChanged="setVal1"
>
Among them, dojoType, autocomplete, and onValueChanged are all attributes that dojo can recognize. This is somewhat similar to typestry. The second way is to use DojoML writing:
onValueChanged="setVal1"
               
This way of writing is a bit abnormal. It is basically the same as the custom tag in jsp. It just moves the parsing process from the background to the front. Later, I saw that some frameworks also do this, so I have nothing to say.​
Another way to write it is to use javascript to create a widget in the specified html element after the page is loaded:
var combo;
dojo.addOnLoad(init);
function init(){
combo = dojo.widget.createWidget("dojo:ComboBox", {name:"prog",autocomplete:false,dataUrl:"comboBoxData.js"}, dojo.byId("progCombo"));
}
When parsing and creating elements, use the combobox html template and css template defined by dojo at the same time to complete the purpose of inserting the final combobox control into the page.​
Next, let’s take a look at how Dojo ComboBox communicates with the backend through ajax. Dojo ComboBox provides two automatic completion methods: one is to download all data to the frontend cache, and then match the data from the cache based on user input in the frontend A list of data required for automatic completion is displayed. The other is to send a request to the background in real time to obtain the data to be automatically completed based on the data entered by the user each time. Of course, this data will also be cached with the content entered by the user as the key and the obtained data as the value. For the two methods, Dojo implements it through different DataProviders (dojo.widget.incrementalComboBoxDataProvider and dojo.widget.basicComboBoxDataProvider). This is very subtle and I admire it very much. Both classes are done through dojo.declare("className", "parentClassName", constructor, declarationBody), which is also different from our previous approach. All in all, it’s quite subtle!​
The process of Dojo sending requests to the background is encapsulated in the dojo.io.bind() method, and we have our own set of front-end and back-end communication mechanisms, because we must find a way to replace dojo.io.bind() with our To achieve the purpose of final integration, because the data interaction of Dojo ComboBox is encapsulated in DataProvider, because we only need to implement our own DataProvider, so we do not need to modify the source of Dojo, and we can also use Dojo The inheritance mechanism integrates and overwrites the methods I need to replace from the existing DataProvider, which makes me feel like writing Java. 
dojo.declare(   
    "dojo.widget.incrementalDoradoComboBoxDataProvider",   
    dojo.widget.incrementalComboBoxDataProvider,   
    null,   
    {   
        //要替换的方法，使用自己的通讯机制   
        startSearch: function(/*String*/ searchStr, /*Function*/ callback){   
            if(this._inFlight){   
                // FIXME: implement backoff!   
            }   
            var cmd = getControl(this.searchUrl);   
            cmd.parameters().setValue("searchString", searchStr);   
            var _this = this;   
            EventManager.addDoradoEvent(cmd, "onSuccess", function(command){   
                    _this._inFlight = false;   
                    //convention:   
                    //1.the key must be "result"   
                    //2.the data format must be [["Alabama","AL"],["Alaska","AK"]] or [{"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]);   
                        }   
                        data = arrData;   
                    }   
                    _this._addToCache(searchStr, data);   
                    callback(data);   
                }   
            );   
            cmd.execute();   
            this._inFlight = true;   
        }   
    }   
);   
通过上面的处理，就可以使用我们自己的前后台通讯机制来完成请求数据的目的。​
The next step is to generate our page and add the dojo loading js script:



The control part html to be loaded below:
dataUrl="cmdComboboxSearch"
dataProviderClass = "dojo.widget.incrementalDoradoComboBoxDataProvider"
style="width: 200px;"
name="sample2"
autocomplete="false"
                                               
In this way, our integration work is completed, and by the way, there is also the directory structure of the files:
Webapp
|--adapter (stores all js files used for integration)
|------dojo
|---------widget
|-----------DoradoComboBox.js
|--dojo (all js files of dojo)
|------src
|------dojo.js
|--js (js file of our own component library)
|--WEB-INF
Conclusion
After the expansion, many problems were discovered:
1. Since the two integrated sets of things will add some of their own things to Object.prototype, Array.prototype, and Function.prototype, it is very easy to cause naming conflicts. I have already encountered this problem.​ <script></script>2. Since both will use some global functions, variables, etc., there will be potential conflicts, but we have not encountered them yet.​ <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. Multiple sets of js libraries need to be loaded at the same time. Is the pressure on the client too high? Is the performance acceptable? No testing is available yet.