The Connect Method of dojo is used to analyze the source code (similar to AOP is implemented in Javascript)

This article was first published on the iteye blog at the original address.

Author: Zhang weibin (Weibo) thanked the dojo Chinese blog for its originality and translation of a large number of excellent articles. I am willing to use this platform to communicate with all friends who are interested in RIA technology.

 

Dojo is a very powerful JavaScript class library. The function of the class library itself is not inferior to jquery, but jquery's lightweight and rich plug-ins make it popular in the Internet field, the popularity is much higher. Dojo also provides its own UI component library named dijit, which has a unified life cycle and delivers excellent performance. Dojo has been supported by many large companies over the past few years and has been applied in many fields. For example, struts2 has used it, by studying the usage and source code of dojo, it is of great benefit to improve the development capability of the foreground.

Dojo implements a powerful class inheritance mechanism and encapsulates many common foreground functions, so that we do not have to spend time directly accessing HTML and CSS usage during development, this avoids browser compatibility issues.

In this article, we will introduce a very useful function provided by dojo. Using this function, on the one hand, we can achieve a unified way to process Dom element events, on the other hand, it can also achieve the effect similar to AOP in Java: After a method is called, another series of methods are executed. This function is the Connect Method of dojo.

 

Scenario 1: I have a button that triggers event processing when I click a button.

This scenario can be easily implemented through standard JavaScript and HTML encoding, but using the connect method provided by dojo will make your processing easier.

<input type="button" value="ss"  id="button"/>   

 

The above is the definition of a button. How do I write event binding and handling?

Dojo. addonload (function () {dojo. connect (Dojo. byid ("button"), "onclick", test) ;}) function test () {alert ("I'm being clicked! ");}

With this simple configuration, When you click this button again, the test method will be called.

Scenario 2: I have a method named test. When this method is executed, another method Test2 can also be executed:

function test(){      alert("first");  }        function test2(){      alert("second");  }   

 

In general, you need to write Test2 () in test, so that the two methods are closely coupled. By using the dojo connect method, you can easily implement this requirement:

// Test2 will be called every time you call test. Dojo. Connect (null, "test", null, Test2 );

(For further use of the dojo connect method, refer to the following article: http://blog.csdn.net/dojotoolkit/article/details/6526897)

 

How can this function be implemented? Let's take a look at the source code of dojo. Connect. The implementation of this part is implemented through Connect. JS:

 

Dojo. connect = function (/* object | null */obj,/* string */event,/* object | null */context,/* string | function */method, /* Boolean? */Dontfix) {// the first four parameters are important. // obj is the object of the original method. It can be blank, if it is null, The Global Method // event must be the name of the original method or event. Note that the string // context is the execution context of the method to be added, that is, in the add method, what does this mean? // The method parameter is a reference to the method to be added. // after processing some parameters in this method, return dojo. _ connect. apply (this, argS);} dojo. _ connect = function (OBJ, event, context, method) {var L = dojo. _ listener, H = L. add (OBJ, event, dojo. hitch (context, method); return [OBJ, event, H, l]; // handle // In the above Code, L. add (OBJ, event, dojo. hitch (context, method); is the key}; // dojo. _ listener is a simple object and contains two important methods: add and remove. We focus on Add add: function (/* object */source, /* string */method,/* function */listener) {// the three parameters are respectively the target object, method Name of the target object and the method to be added after context processing. Source = source | dojo. global; var F = source [Method]; // obtain the specified method of the target object if (! F |! F. _ listeners) {// if the target method does not have the _ listeners attribute var d = dojo. _ listener. getdispatcher (); // after calling this method, a brand new method is actually returned. The target method is encapsulated with d.tar get = f; // a brand new attribute is set, this attribute points to the original target method D. _ listeners = []; // maintains an array and records other methods to be executed after the target method is executed. f = source [Method] = D; // note that the original method is replaced here, and your original target method has been modified} return F. _ listeners. push (listener); // The method to be added is placed in the array and a handle is returned.} // getdispatcher is an important auxiliary method. It returns a function object, replaced our original target method getdispatcher: function () {retu Rn function () {var ap = array. prototype, c = arguments. callee, ls = C. _ listeners, t = c.tar get, // here t is our original target method r = T & T. apply (this, arguments), // execute the original target method and record the returned value I, LLS = []. concat (LS); // traverse every method in the array and execute them in sequence to implement the function like AOP (I in LLS) {If (! (I in AP) {lls [I]. Apply (this, arguments) ;}} return r; // return result value of the original method running };}

Through the code analysis above, we can understand that the core idea of implementing this function in Dojo is to replace the original method, and record the original method and other methods to be added in the new method, during execution, the execution is performed in sequence, and the implementation is indeed brilliant. With this method, Dojo also implements the subscribe and publish functions. Interested friends can further study.