Ausführliche Erläuterung der wichtigsten Beispiele, wie Javascript ExtJS-Ereignisse implementiert

Die Funktion, mit der Extjs die Vererbung implementiert, ist eine Kernfunktion der Ext.extend-Methode. Die erste akzeptiert zwei Parameter, die erste ist „extend“ (Funktionssuperklasse, Objektüberschreibungen). ist „extend“ (Funktionssuperklasse, Objektüberschreibungen). Die erste Version ist „extend“ (Funktionsunterklasse, Funktionssuperklasse, Objektüberschreibungen): Funktion. Die Superklasse ist der Konstruktor der Superklasse, Overrides ist ein Objekt und die darin enthaltenen Attribute dienen dazu, die Attribute der übergeordneten Klasse zu überschreiben. Eine Unterklasse, die eine übergeordnete Klasse erbt, verfügt über alle Methoden im Prototyp der übergeordneten Klasse. Und Unterklassen können die Methoden der übergeordneten Klasse überschreiben (Override). Darüber hinaus kann jedes Objekt der Unterklasse auch die Methoden der übergeordneten Klasse überschreiben. Tatsächlich denke ich, dass die Wirkung der Änderung des Prototyps gleichwertig ist. Der Zweck von extjs besteht natürlich darin, die magische Sache des Prototyps vollständig abzuschirmen, damit Programmierer Javascript wie andere Sprachen verarbeiten können. Natürlich unterscheidet sich die Vererbung dennoch etwas von der gewöhnlichen Vererbung. Schauen wir uns zunächst ein Beispiel an und bereiten eine Personenklasse vor:

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();子类：Student = function(id) { 
this.id = id; 
} 
Student.prototype.showID = function() { alert(this.id); } //子类的方法

Vererbung:
Ext.extend(Student, Person ) ;
stu.showName(); Kein Ergebnis! stu hat keine Definition des Namens stu.fn(); !!Kein Ergebnis stu.showID(); !!!Immer noch kein Ergebnis An dieser Stelle haben wir einige Unterschiede entdeckt: Der Inhalt im Konstruktor der übergeordneten Klasse wird nicht vererbt . wird der Konstruktor der übergeordneten Klasse nicht aufgerufen und die vorhandenen Methoden der Unterklasse (im Prototyp) gehen ebenfalls verloren! Lesen Sie weiter und ersetzen Sie den Code unten Ext.extend durch:

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();

Die Funktionen hier können alle wie erwartet ausgegeben werden. showAge ist die Methode der übergeordneten Klasse, die ausgeführt wird, und stu.print ist die Methode von stu.override, das ausgeführt wird, während stu2 die in Student.override angegebene Methode ausführt. An diesem Punkt können wir ungefähr erraten, wie die Erweiterung implementiert wird. Schauen wir uns den echten Quellcode an. Der Code und die Kommentare lauten wie folgt: extension : function(){

// inline overrides 
var io = function(o){ //注意这个方法的this，仅看这里并不知道这个this是什么，下面这个io会被赋值给sbp.override，也就是子类的prototype 
for(var m in o){ //从而每个子类的对象的override都会指向这个方法，如果子类对象调用了override，那么这个this就是子类的对象了。也就是 
this[m] = o[m]; //上面的例子中stu.override表现出来的效果，仅对当前对象有效。从这里可以看出，override不仅仅是传统意义上的覆盖，完全也可以 
} //用来添加新方法。 
}; 
var oc = Object.prototype.constructor; 
return function(sb, sp, overrides){ 
if(Ext.isObject(sp)){ //是在检测当前使用的是哪个版本的重构函数。如果sp实际上是overrides，就做些替换工作，让变量的实际意义和名称相符合。 
overrides = sp; 
sp = sb; 
sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; //这个没看懂…… 
} 
var F = function(){}, 
sbp, 
spp = sp.prototype; 
F.prototype = spp; //F是父类的一个“干净”拷贝，所谓干净，是指它不会把父类中在构造函数内部定义的属性带过来。 //例如 Person=function() // {this.privateFn=new function{ some code goes here}} //那么这个privateFn对子类是不可见的，所以在构造函数中利用this定义的属性都相当于是类的私有变量。 
sbp = sb.prototype = new F(); //将子类的prototype设置为父类的prototype，继承的核心步骤。 sbp.constructor=sb; //设置正确的构造函数指向，见 JavaScript继承详解 
sb.superclass=spp; //设置父类 
if(spp.constructor == oc){ //没看懂……,这个是干嘛用的？望高人指点 
spp.constructor=sp; 
} 
sb.override = function(o){ //子类的重写方法，这个重写方法是函数的重写方法。它修改的是prototype。 
Ext.override(sb, o); //见最后。 
}; 
sbp.superclass = sbp.supr = (function(){ //设置原型的父类 
return spp; 
}); 
sbp.override = io; //给子类的prototype提供override方法，这样单个实体也可以覆盖，它修改的是实体对象。注意和上面的sb的override区分。 
Ext.override(sb, overrides); //重写 
sb.extend = function(o){return Ext.extend(sb, o);}; //给子类提供extend方法，以实现多重继承 
return sb; //返回子类。 
}; 
}();

Das Folgende ist der Code von Ext.override. Das ist relativ klar und im Vergleich zum Inline-Override handelt es sich um einen modifizierten Prototyp:override:

function(origclass, overrides){ 
if(overrides){ 
var p = origclass.prototype; 
Ext.apply(p, overrides); 
if(Ext.isIE && overrides.hasOwnProperty('toString')){ // 这个是什么？IE的特殊点？ 
p.toString = overrides.toString; 
} 
} 
}

Jetzt können Sie mit der offiziellen Einführung des Ereignismodells von Extjs beginnen. Ähnlich wie bei Ereignissen in anderen Sprachen müssen Sie zunächst ein Ereignis für eine Klasse definieren. Ereignisse in anderen Sprachen (z. B. C#) haben im Allgemeinen einen speziellen Ereignistyp. Der Ereignistyp kann natürlich als Array von Delegaten betrachtet werden Der Delegat ist eigentlich eine Funktion. Der Zeitlistener (Listener) möchte lediglich einen Delegaten (eine Funktion) zum Delegaten-Array hinzufügen. Das sogenannte Triggerereignis besteht darin, alle Funktionen im Array auszuführen. Javascript ist ähnlich, mit der Ausnahme, dass die Funktionen von Javascript viel leistungsfähiger und flexibler sind als die dieser Sprachen, sodass kein Ereignistyp erforderlich ist. Javascript-Ereignisse sehen aus wie eine Zeichenfolge (sie sollten auch intern ein Array beibehalten). Sie können Ereignisse über die Methode Observale.addEvents hinzufügen, Ereignisse über Observale.fireEvent auslösen und Ereignis-Listener über Observale.addListner hinzufügen. Hier ist ein Beispiel, das wenig Sinn macht, aber das Problem verdeutlicht.

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(&#39;onFindOdd&#39;,i); 
} 
} 
} 
}); 
var p = new Odder(4, 8); 
p.addListener(&#39;onFindOdd&#39;,function(n){alert(n);}); 
p.run();

Odder ist eine Klasse, die einen Bereich durch einen Konstruktor weiterleitet, dann nach allen ungeraden Zahlen im Bereich sucht und jedes Mal ein Ereignis auslöst, wenn eine gefunden wird. Fügen Sie einen Ereignishandler hinzu und benachrichtigen Sie die gefundenen ungeraden Zahlen. Es ist zu beachten, dass die Parameter des Event-Handlers hier nur vom Programmierer konsistent gehalten werden können. Er ist nicht so stark typisiert wie ein Delegate.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der wichtigsten Beispiele, wie Javascript ExtJS-Ereignisse implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!