透視Ext JS 4類背後的機制與特點（下）

在構建 Ext.Class 之時，它會分配既細又專的處理器（processors），專門處理構成類定義的每一個部分。當前Ext缺省提供了一些處理器，包括有：mixins 多態的，配置項函數的，以及處理類擴展的都是必備的。除了缺省處理器外，還可以隨便自定義預處理器，預處理器是完全交給開發者可控的。因爲通過分解類處理單元，就可以達到了擴展性的目的，以便允許我們針對不同的場景，去制定更合適的處理器從而滿足需求（具體組裝的過程可仿照下面介紹的 static 處理器舉一反三）。

一圖勝千言，下圖即官方所出的 Ext.Class 流程圖。欲瞭解其中原理？不妨進入流程看看大致的輪廓吧！先從最左上角的前頭起前進，以此爲出發點，按箭頭方向走，走完就是從處理器的角度看的流程。至於還有一個角度，就是正下方的“Define”到“Callback”的流程，這是站在 Ext.Class 其總體上“輸入、輸出”的角度來來看。無論出於哪個角度，皆是圍繞於 Ext.Class 的內部工作流進行的。

處理器（processors）分預處理器（preprocessors）和後處理器兩種（postprocessors）。按照原作者Ed解釋道，一旦類“準備好了（ready）”就是認爲是預處理器執行完畢的階段，這時候可以把類實例化了可稱爲 “ready”；剩下的就屬於後處理器的階段——兩者就是根據這樣來區分的。典型地，後處理器負責如類簡寫方式 xtype，兼容舊版，還有向 Manager 登記之類的任務，總之都是圍繞類的後期工作，而絕對不會影響類的邏輯行爲。

Ext.Class 構造器內部中透過送入回調函數來達成處理器之間的接力，也就是說，其過程不是同步的。之所以執行處理器的每一步都是異步的（asynchronously）是爲了便於實現異步加載。排在預處理器列表中第一個便是 Loader，用於加載頁面上卻還沒有的類。我們前面的教程中已經爲大家介紹過關於Loader的用法，而其中異步加載的祕密正在於此！

運行完 Loader 之後，Ext.Class 安排 Extend 的預處理器接着進行，然後是 Mixins 多態、Config 等等，最後就是 static 處理的部分。流程如上圖所示。

預處理器其運行是完全可控的，可以隨便自定義預處理器的每一步。好比靜態的處理器，我們就詳細的看看 static 預處理器是如何寫的：

Ext.Class.registerPreprocessor('statics', function(cls, data, callback) {
    if (Ext.isObject(data.statics)) {
        var statics = data.statics,
            name;
        // 原理只是簡單地拷貝一下
        for (name in statics) {
            if (statics.hasOwnProperty(name)) {
                cls[name] = statics[name];
            }
        }
    }
    delete data.statics;
    // 已經完成好了當前預處理器，可進入下一個預處理器。
    if (callback) {
        callback.call(this, cls, data);
    }
});
// 改變數組的順序便可以改變加載預處理器的順序。
Ext.Class.setDefaultPreprocessors(['extend', 'mixins', 'config', 'statics']);

上述過程其實非常直觀易明。我們登記了Ext.Class 的一個預處理器名曰 “static”，同時一定要傳入的就是這個 static 所對應的函數（第二個參數），它會傳入剛剛建立的Ext.Class，也就是那個新類，以及類的配置參數和回調函數（在預處理器執行後的回調函數），構成三個的參數傳入。由代碼可見，static 預處理器的工作量其實沒什麼，只是看看我們有否聲明瞭 static 屬性，有的話便拷貝 static  配置項對象到類對象身上。例如我們打算寫一個 getNextId 的靜態方法分配給類。寫法如下：

Ext.define('MyClass', {
    statics: {
        idSeed: 1000,
        getNextId: function() {
            return this.idSeed++;
        }
    }
});

靜態處理器產生的是靜態成員，所以直接可以在類身上調用方法，不用創建 MyClass 實例。

MyClass.getNextId(); //1000
MyClass.getNextId(); //1001
MyClass.getNextId(); //1002
... 等等

最後一步，就是就是運行 callback 的回調函數（在上圖中有指示的）。此時此刻，您就可以在程序中使用這個類了。於是，我們就在這個回調中實例化 MyClass，如果成功也就明確了 Ext.Window 所依賴的對象均加載回來了。

Ext.define('MyClass', {
    extend: 'Ext.Window'
}, function() {
   // MyClass此時此刻可用了
   var cls = new MyClass();
   cls.setTitle('Everything is ready');
   cls.show();
});

最後一點，性能。毋庸諱言，複雜的代碼會降低性能——連主程 Ed 都承認這點。他說，雖然比較複雜，但爲了靈活性和易用性，就是算上這些代價，也是值得的。

參考資料：

• Ext 4 Overview
• Classes in Ext JS 4: Under the hood
• Ext JS 4: The Class Definition Pipeline

轉自：http://blog.csdn.net/zhangxin09/article/details/619764