Extjs学習ノートの継承とイベントの基礎

Extjsのイベントもパッケージ化されており、イベントの処理はすべてExt.uitl.Observableでインターフェースを提供している.ここのインターフェースの意味はObservableが実際に抽象的な役割を果たしています.Extjsには多くのコンポーネントがこのクラスから継承されています.このクラスはいくつかの基本的な方法を提供しています.例えば、addEvents、addidistens、fireEventなどです.
本論文では、extjsのコンポーネントを使用してイベントに応答する方法を紹介するのではなく、Extjsのイベントのいくつかの実施原理を紹介する.全体のExtjsフレームは一つの対象に向けて開発されているので、Javascriptの継承を理解することも重要です.
Extjs継承を実現する関数は、コアの関数Ext.extedであり、exted方法は2つの再構成バージョンがあり、最初は2つのパラメータを受け入れ、最初はexted(Function superclass、Object overrides)、2番目はexted(Function subclass、Function superclass、Object overrides)である.スーパークラスの構造関数です.overridesはオブジェクトです.中の属性は親の属性をカバーします.親タイプの子類を継承した親タイプのプロトタイプのすべての方法です.さらに、サブクラスは親タイプの方法をカバーすることができ、さらに、サブクラスの各オブジェクトは親タイプの方法をカバーすることもできる.この関数はあまり効果がないと思います.プロトタイプを修正する効果は同等です.もちろん、extjsの目的はプロトタイプという不思議なものを完全に遮蔽して、プログラマが他の言語を扱うようにJavascriptを処理することです.もちろん、それでも、継承は一般の継承とは少し違っています.例を見て、Personクラスを準備します.

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); }  //     
  ：
Ext.extend(Student, Person);
stu.showName();  !!    ！stu  name   

stu.fn();        !!     

stu.showID();    !!!      

             ：                  ，            ，  （prototype ）         ！     ， 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;             //           ，

        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   ，     ，   inline override  ，      prototype:

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〓のような)のイベントには専門的なイベントがあります.イベントタイプは実際には委託の行列と見なされます.もちろん、委託は実際に関数です.時間モニターを追加します.委託行列に委託(関数)を追加したいです.トリガーイベントとは、配列中の関数をすべて実行することです.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('onFindOdd',i);
                 }
            }
        }
    });
    var p = new Odder(4, 8);
    p.addListener('onFindOdd',function(n){alert(n);});
    p.run();

Odderは一つの構成関数を通して一つの範囲に入ってきて、この範囲の奇数を全部探します.一つ見つけたら一つのイベントをトリガします.イベントハンドラを追加して、奇数のalertを見つけます.ここのイベントハンドラのパラメータは、プログラマ自身で一致するしかないので、依頼のような強いタイプではないです.
注意してください.公式サイトの例を採用していません.

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 that the base class's
        // constructor will add them.
        this.listeners = config.listeners;

        // Call our superclass constructor to complete construction process.
        Employee.superclass.constructor.call(config)
    }
});

This could then be used like this:

var newEmployee = new Employee({
    name: employeeName,
    listeners: {
        quit: function() {
            // By default, "this" will be the object that fired the event.
            alert(this.name + " has quit!");
        }
    }
});