EXT Architecture Analysis (1)-Understanding Ext. util. Event

because all components in ext2.0 are inherited by observable, to understand Ext, you must first start with ext. util. the observable is used to manage the event object. To understand this, the observable must first start with ext. util. event.
Ext. util. event is an encapsulated and exquisite object, but unlike what you think, event has no relationship with any HTML Dom element (although ext processes HTML elements). In fact, it is a common event and its processing object. Some may ask: HTML element already supports events. Why re-design an event mechanism? In fact, basically all JavaScript frameworks implement their own event mechanism for many reasons, but at least one thing: HTML elements are implemented through a simple single binding, that is, without any encapsulation, your event can only be bound to one event processing handle. For example:
var E = document. getelementbyid ("test");
E. onclick = function () {alert ("handle1") };
E. onclick = function () {alert ("handle2") };
when you run the result, you will find that only the "handle2" Alert box will pop up, because the first event has been reloaded by the second event. With the ext framework, you can solve this problem with confidence. The same event can be bound to multiple event processing handles in sequence.
Ext. util. event object builder needs to input two objects: OBJ (default object for event processing) and name (event name ). When constructing an event object, the event object constructs an array of event processing functions: listeners. Through this array, multiple event handling functions of an event are processed.
Ext. util. event = function (OBJ, name) {
This. name = Name;
This. OBJ = OBJ;
This. listeners = [];
};

The event fire method can trigger the processing functions in the array in sequence. In fact, when the fire method traverses the processing functions in the listeners array, as long as the return value of the processing function is false, it will not continue to run subsequent processing functions. Therefore, you can check the return value of the fire method to see if the event handler function is fully running.

Fire: Function () {
VaR Ls =   This . Listeners, scope, Len = Ls. length;
If (Len >   0 ) {
This . Firing =   True ; // Firing ensures that multiple event processing functions do not run concurrently.
VaR ARGs = Array. Prototype. Slice. Call (arguments, 0 ); // The slice method can effectively clone arrays.
For ( VaR I =   0 ; I < Len; I ++ ) {
VaR L = Ls;
// When an event processing function returns false, the entire event processing is stopped.
If (L. firefn. Apply (L. Scope | This . OBJ | Window, arguments) ===   False ) {
This. Firing= False;
Return False;
}  
}  
This . Firing =   False ;
}  
Return   True ;
}  

Events can be managed by addlistener, removelistener, and clearlisteners (removing all event handlers. However, the event processing function stored in listener is not actually a function passed by addlistener. In fact, the method passed by addlistener encapsulates the event processing function through createlistener, three different processing methods for a repeat event are implemented: delay (delayed operation) and single (remove the handler in listener and only run the current handler), buffer (avoid repeated operation of processing functions ).

Createlistener: Function (FN, scope, O) {
O = O |   {} ;
Scope = Scope |   This . OBJ;
VaR L =   {Fn: FN, scope: scope, options: O} ;
VaR H = FN;
If (O. Delay) {
H=Createdelayed (H, O, scope );
}  
If (O. Single) {
H=Createsingle (H,This, FN, scope );
}  
If (O. buffer) {
H=Createbuffered (H, O, scope );
}  
L. firefn = H;
Return L;
}  


VaR Createbuffered =   Function (H, O, scope) {
VaR Task =   New Ext. util. delayedtask ();
Return   Function () {
Task. Delay (O. buffer, H, scope, array. Prototype. Slice. Call (arguments,0));
} ;
} ;
VaR Createsingle =   Function (H, E, FN, scope) {
Return Function(){
E. removelistener (FN, scope );
ReturnH. Apply (scope, arguments );
};
} ;
VaR Createdelayed =   Function (H, O, scope) {
Return   Function () {
VaR ARGs = Array. Prototype. Slice. Call (arguments, 0 );
SetTimeout ( Function () {
H. Apply (scope, argS );
} , O. Delay |   10 );
} ;
} ;