The interface here means that observable actually acts as an abstract class, and that a large number of components in ExtJS are inherited from this class. This class provides some basic methods such as addevents,addlistener,fireevent and so on.
This article briefly does not describe how to use the ExtJS component to respond to events, but introduces some of the implementation principles of ExtJS events. The entire EXTJS framework is developed in an object-oriented manner, so it is important to understand inheritance in JavaScript. One of my previous articles complements the basics: the classes and closures in JavaScript are also prepared for this article. In addition, there is a blog in the park has a good written series of JavaScript inheritance detailed. He was mainly based on two articles written by Douglas Crockford. In fact, to achieve the principle of inheritance are similar, we can refer to reading.
ExtJS implementation of inherited functions is a very core function Ext.extend,extend method has two refactoring versions, the first one to accept two parameters, the first is extend (Function superclass, Object overrides), The second is extend (function subclass, function Superclass,object overrides): function, and the second version is based on subclass. Superclass is the superclass constructor, overrides is an object in which the attribute is to overwrite the properties of the parent class. Inherits all the methods in the prototype of the parent class that have a parent class. Also, subclasses can override the parent class's method (override), and further, each object of the subclass can override the parent class's method. In fact, I think this function does not work, the effect of modifying prototype is equivalent, of course, the purpose of ExtJS is definitely to prototype this magical thing completely shielded, so that programmers can deal with other languages as the same as processing JavaScript. Of course, even so, its inheritance and general inheritance is somewhat different, let's take a look at an example to prepare a person class
Copy Code code as follows:
person = function (name) {
THIS.name = name;
This.fn = function () {alert (' I am a person ')};
}
Person.prototype.print=function () {alert (' I am a person ');}
Person.prototype.showAge = function () {alert (' I am older than 0 ');}
Person.prototype.showName = function () {alert (' Show Name: ' +this.name)};
var per = new Person (' Tom ');
Per.showname (); subclass: Student = function (ID) {
This.id = ID;
}
Student.prototype.showID = function () {alert (this.id);}//Subclass method
Inherited:
Ext.extend (Student, person);
Stu.showname ();!! No result! Stu does not have the definition of name Stu.fn ();!! No result stu.showid ();!!! There is no result. We have found some differences: in the constructor of the parent class, the content is not inherited, the constructor of the parent class is not invoked, and the existing methods in the subclass (prototype) are lost! To keep looking, replace the following code with Ext.extend:
Copy Code code as follows:
var stu = new Student (' 01 ');
Student.override ({print:function () {alert (' I am a Student ');}});
Stu.override ({print:function () {alert (' I am a bad student,but i won\ ' t affect others ');});
Stu.print ();
Stu.showage ();
var stu2 = new Student ();
Stu2.print ();
The functions here can be output as expected, Showage is the method of executing the parent class, Stu.print is the method specified in the executed stu.override, and STU2 executes the method specified in the Student.override. Here, we can probably guess how the extend is achieved. Here's the real source code, the method is in Ext.js, the code and comments are as follows: Extend:function () {
Copy Code code as follows:
Inline overrides
var io = function (o) {//Note this for this method, only to see here not knowing what this is, the following IO will be assigned to Sbp.override, which is the prototype of the subclass
For (var m in O) {//Thus the override of objects for each subclass will point to this method, and if the subclass object invokes override, then this is the object of the subclass. Is
THIS[M] = o[m]; In the example above, the effect shown in Stu.override is only valid for the current object. It can be seen from here that override is not only a traditional coverage, it can also
//To add a new method.
};
var oc = Object.prototype.constructor;
return function (SB, SP, overrides) {
if (Ext.isobject (SP)) {//Is the refactoring function that detects which version is currently in use. If the SP is actually overrides, do some substitution work to match the actual meaning of the variable with the name.
overrides = SP;
SP = SB;
SB = Overrides.constructor!= oc? Overrides.constructor:function () {sp.apply (this, arguments);}; This does not read ...
}
var F = function () {},
Sbp
SPP = Sp.prototype;
F.prototype = spp; F is a "clean" copy of the parent class, which is called clean, meaning that it does not bring together attributes defined within the constructor in the parent class. For example person=function ()//{this.privatefn=new function{some code goes here}//So this privatefn subclass is not visible, So the properties defined in the constructor that use this definition are equivalent to the private variables of the class.
SBP = Sb.prototype = new F (); Sets the prototype of a subclass to the prototype of the parent class, the core step of the inheritance. SBP.CONSTRUCTOR=SB; Set the correct constructor to point to, see JavaScript inheritance detailed
SB.SUPERCLASS=SPP; Set Parent class
if (Spp.constructor = = OC) {//Don't understand ..., what's this for? Look at the expert advice
SPP.CONSTRUCTOR=SP;
}
Sb.override = overridden method of the function (o) {//subclass, which is an overriding method of the functions. It was modified by prototype.
Ext.override (SB, O); See last.
};
Sbp.superclass = SBP.SUPR = (function () {//Set the parent class of the prototype
Return SPP;
});
Sbp.override = IO; Provides a override method for prototype of subclasses so that a single entity can also be overwritten, which modifies the entity object. Notice the override of SB on the top.
Ext.override (SB, overrides); Rewrite
Sb.extend = function (o) {return ext.extend (SB, O); Provides a extend method for subclasses to implement multiple inheritance
return SB; Returns a subclass.
};
}();
Here is the code for Ext.override, which is quite clear, compared to that inline override, it is the modified prototype:override:
Copy Code code as follows:
function (Origclass, overrides) {
if (Overrides) {
var p = origclass.prototype;
Ext.apply (P, overrides);
if (Ext.isie && overrides.hasownproperty (' toString ')) {//what is this? The special point of IE?
p.tostring = overrides.tostring;
}
}
}
You can now begin to formally introduce the ExtJS event model. Like other language events, first you define an event for a class, and events in other languages (such as C #) typically have a specific event type, and the incident type can actually be viewed as an array of delegates, and of course the delegate is actually a function, adding a time listener (listener), is to delegate an array to add a delegate (function), the so-called trigger event is to execute all the functions in the array. JavaScript is similar, but JavaScript functions are much more flexible than those languages, so there's no need for an event type. The JavaScript event looks like a string (it should also hold an array inside), You can add events through the Observale.addevents method, triggering events by observale.fireevent, and adding event listeners through Observale.addlistner. Here's an example of a meaningless but illustrative question.
Copy Code code as follows:
odder = function (min, max) {
this.min = min;
This.max = max;
This.addevents (' onfindodd ');
}
Ext.extend (odder, Ext.util.Observable, {run:
function () {
for (var i = This.min i < This.max; i++) {
if (i% 2!= 0) {
This.fireevent (' onfindodd ', i);
}
}
}
});
var p = new Odder (4, 8);
P.addlistener (' onfindodd ', function (n) {alert (n);});
P.run ();
Odder is a class that passes through a constructor to a range and then looks for all the odd numbers within that range, triggering an event every found. I'll add an event handler to it and find the odd alert out of it. Note that the parameters of the event handler here can only be consistent with the programmer itself, not as strongly typed as the delegate.
Note that I did not use the official online example:
Copy Code code as follows:
Employee = Ext.extend (Ext.util.Observable, {
Constructor:function (config) {
THIS.name = Config.name;
This.addevents ({
"Fired": true,
' Quit ': true
});
Copy configured listeners into *this* object so this base class ' s
constructor'll add them.
This.listeners = config.listeners;
Call we superclass constructor to complete construction process.
Employee.superclass.constructor.call (config)
}
}); This could then is used like this:
var newemployee = new Employee ({
Name:employeename,
Listeners: {
Quit:function () {
By default, ' This ' is ' to be ' the object that fired the event.
Alert (THIS.name + "has quit!");
}
}
});
I think the official online example also has an article, its overloaded entry contains the constructor attribute, the feeling is overloaded the parent class constructor, and then the subclass will call this constructor to create, in fact, it changed the JavaScript itself behavior, This is related to the code that I have not read. We'll talk about it next time.
