JavaScript が extjs イベントを実装する方法の原則的な例の詳細な説明

Extjs が継承を実装する関数は非常にコアな関数 Ext.extend です。extend メソッドには 2 つの再構成されたバージョンがあり、1 つ目は extend(Function superclass, Object overrides) で、2 つ目は extend です。 (関数のサブクラス、関数のスーパークラス、オブジェクトのオーバーライド): 関数、2 番目のバージョンはサブクラスに基づいています。スーパークラスはスーパークラスのコンストラクターであり、オーバーライドはオブジェクトであり、内部の属性は親クラスの属性をオーバーライドします。親クラスを継承するサブクラスには、親クラスのプロトタイプ内のすべてのメソッドが含まれます。また、サブクラスは親クラスのメソッドをオーバーライドすることができます (オーバーライド)。また、サブクラスの各オブジェクトも親クラスのメソッドをオーバーライドできます。実際、この関数には何の効果もないと思います。もちろん、extjs の目的は、プロトタイプという魔法のようなものを完全に保護して、プログラマが他の言語と同じように JavaScript を処理できるようにすることです。もちろん、そうであっても、その継承は通常の継承とは多少異なります。まず例を見て、

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); } //子类的方法

Inheritance:

Extend(Student, Person); を準備しましょう。 ） ; ！！検索結果はありません！ stu には名前の定義がありません stu.fn(); !!結果がありません stu.showID(); !!!まだ結果がありません この時点で、いくつかの違いが見つかりました: 親クラスのコンストラクターの内容は継承されません. の場合、親クラスのコンストラクターは呼び出されず、サブクラス (プロトタイプ内の) の既存のメソッドも失われます。読み続けて、Ext.extend の下のコードを次のように置き換えます。

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

ここでの関数はすべて、期待どおりに出力できます。 showAge は実行される親クラスのメソッドであり、stu.print は stu.override で指定されたメソッドです。が実行され、stu2 は Student.override で指定されたメソッドを実行します。この時点で、extend がどのように実装されるかを大まかに推測できます。実際のソース コードを見てみましょう。このメソッドは Ext.js にあります。コードとコメントは次のとおりです。extend : 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; //返回子类。 
}; 
}();

以下は比較的わかりやすい Ext.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; 
} 
} 
}

これで、Extjs のイベント モデルを正式に導入し始めることができます。他の言語のイベントと同様に、最初にクラスのイベントを定義する必要があります。他の言語 (C# など) のイベントには通常、イベント タイプはデリゲートの配列と見なされます。 、デリゲートは実際には関数です。Add 時間リスナー (リスナー) は、デリゲート配列にデリゲート (関数) を追加したいだけです。いわゆるトリガー イベントは、配列内のすべての関数を実行することです。 Javascript も同様ですが、JavaScript の関数はこれらの言語よりもはるかに強力で柔軟であるため、イベント タイプが必要ありません。 Javascript イベントは文字列のように見えます (内部的に配列も保持する必要があります)。Observale.addEvents メソッドを通じてイベントを追加し、Observale.fireEvent を通じてイベントをトリガーし、Observale.addListner を通じてイベント リスナーを追加できます。以下に、ほとんど意味はありませんが、問題を説明する例を示します。

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 は、コンストラクターを介して範囲を渡し、この範囲内のすべての奇数を検索し、見つかるたびにイベントをトリガーするクラスです。それにイベント ハンドラーを追加し、見つかった奇数を警告します。 ここでのイベント ハンドラーのパラメーターはプログラマによってのみ一貫性を保つことができ、デリゲートほど厳密に型指定されないことに注意してください。

以上がJavaScript が extjs イベントを実装する方法の原則的な例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。