ExtJsソースの分析と学習-ExtJsコアコード(一)

まず、以下の部分はネット上から抜粋しています.
 
一、前のExtJsソース構造とExtJsが持っているデバッグツールがあった後、ExtJsの最も核心的な部分ext-core二を紹介し、まずExt.jsファイルを見る

window.undefined = window.undefined;

 
このセグメントコードはwindowをサポートしない互換性のためである.undefinedオブジェクトの古いバージョンのブラウザ(今は古いバージョンのブラウザを使う人はいないと思いますが、ほほほ)、詳細は参考にしてください.
Windowsについてundefined=window.undefined書き方の理解
 

Ext = {
    /**
     * The version of the framework
     * @type String
     */
    version : '3.3.1',
    versionDetail : {
        major : 3,
        minor : 3,
        patch : 1
    }
};

 
以上のコード定義グローバル変数Ext
 

/**
 * ExtJs      
 * Copies all the properties of config to obj.
 * @param {Object} obj The receiver of the properties
 * @param {Object} config The source of the properties
 * @param {Object} defaults A different object that will also be applied for default values
 * @return {Object} returns obj
 * @member Ext apply
 */
Ext.apply = function(o, c, defaults){
    // no "this" reference for friendly out of scope calls
    if(defaults){
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
};

 
ExtJsコアコードの1つで、主にオブジェクトの継承を実現するこの方法には2つの実行があり、1つはoのみを転送し、c時に直接c上のすべての属性/方法をoにコピーして返す.二つ目は、defaultsも転送されると、defaults,c上のすべての属性/メソッドがoにコピーされ、3つのパラメータが転送されると、まずdefaultsをコピーし、それからcをコピーするという方法の実現が興味深い.このメソッドがあればExtJsではオブジェクト間の継承が容易になり,このメソッドを呼び出すだけでAオブジェクト上のすべてのメソッドをBオブジェクトにコピーすることができる.
 

        /**
         * Copies all the properties of config to obj if they don't already exist.
         * @param {Object} obj The receiver of the properties
         * @param {Object} config The source of the properties
         * @return {Object} returns obj
         */
        applyIf : function(o, c){
            if(o){
                for(var p in c){
                    if(!Ext.isDefined(o[p])){
                        o[p] = c[p];
                    }
                }
            }
            return o;
        },

 
Ext.applyメソッドは、サブオブジェクトの同名のプロパティまたはメソッドを上書きします.ExtJsは、このような不要な上書きを回避するために、この問題を解決するExt.applyIf関数を提供しています.この関数は、プロパティとメソッドのコピーを行うときにサブオブジェクトにすでに存在するかどうかを判断します.次は匿名関数で、初期化時に実行されます.実行後、Extに多くの実用的な属性と方法を拡張しました.匿名関数では,ブラウザの種類の判断,オペレーティングシステムの判断など,まずいくつかの局所変数を定義した.次のコードはIE 6の下でcssの背景図がキャッシュしないバグを解決しました
 

// remove css image flicker
	//   IE6 css      bug
    if(isIE6){
        try{
            DOC.execCommand("BackgroundImageCache", false, true);
        }catch(e){}
    }

 
実装の原理と説明は
IE 6の背景画像をキャッシュしないBUGを解決する
 
次はExt.apply()の応用で、多くのExt実用的な方法と属性を拡張しました.
 
ここでExt.isStrictはhtmlドキュメントモードを厳格モードと判断するのではなく、宣言はtrueを返します.詳細はdoctypeでブラウザモードをアクティブにするを参照してください.国内の秦歌はこの文章を翻訳しました.
 

        /**
	 *     dom  id，    ExtJs     
         * Generates unique ids. If the element already has an id, it is unchanged
         * @param {Mixed} el (optional) The element to generate an id for
         * @param {String} prefix (optional) Id prefix (defaults "ext-gen")
         * @return {String} The generated Id.
         */
        id : function(el, prefix){
            el = Ext.getDom(el, true) || {};
            if (!el.id) {
                el.id = (prefix || "ext-gen") + (++idSeed);
            }
            return el.id;
        },

 
この方法はdom要素に対して一意のidを生成し、要素idが存在する場合は再生成しない.デフォルトid接頭辞はext-genであり、参照prefixによって変更することもできます.
 
ECMAScript 5はリリースから半年余りが経ち、ArrayのindexOf、forEachなどの新しいAPIメソッドが追加され、一部の新しいバージョンのブラウザではこれらのメソッドがサポートされていますが、古いブラウザに拡張したいと思っています.こう書くかもしれない
 

var proto = Array.prototype; if(!proto.indexOf){ proto.indexOf = function(){ // ... } } if(!proto.forEach){ proto.forEach = function(){ // ... } } 

 
上記の書き込みは、ブラウザのオリジナルサポートのAPIメソッドを優先的に使用することを保証し、カスタム実装をサポートしない.しかし,ここでは毎回Arrayプロトタイプにその方法が存在するか否かを判断する必要がある.google closureの実装方式は,三元演算子を用いるのと同様で,毎回判断され,相対的に醜い.ネット上にはgoogle closureの批判すると、効率の低い具体的な分析があり、批判者には大牛:Dmitry Baranovskiyも含まれています.相対的にExt.applyifはAPIの拡張を優雅にしている.
ここにいくつかの余談を挿入して、jsの運行効率を高めることについて、外国人が書いた
http://blogs.sitepoint.com/2009/11/12/google-closure-how-not-to-write-javascript/
From array.js, line 63:
 

for (var i = fromIndex; i < arr.length; i++) {

 
This for loop looks up the .length property of the array (arr) each time through the loop. Simply by setting a variable to store this number at the start of the loop, you can make the loop run much faster:
 

for (var i = fromIndex, ii = arr.length; i < ii; i++) { 

 
Google’s developers seem to have figured this trick out later on in the same file. From array.js, line 153:
 

var l = arr.length; // must be fixed during loop... see docs ⋮ for (var i = l - 1; i >= 0; --i) { 

 
 
This loop is better in that it avoids a property lookup each time through the loop, but this particular for loop is so simple that it could be further simplified into a while loop, which will run much faster again:

var i = arr.length; ⋮ while (i--) { 

 
 
 
 
 
次にExt.extendメソッドであり,このメソッドもコアメソッドの1つであり,extフレームワーク全体の継承はこのメソッドで拡張される.この方法の実装はExt.overrideに依存し,overrideを先に見る.
 

/**
         * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
         * Usage:<pre><code>
Ext.override(MyClass, {
    newMethod1: function(){
        // etc.
    },
    newMethod2: function(foo){
        // etc.
    }
});
</code></pre>
         * @param {Object} origclass The class to override
         * @param {Object} overrides The list of functions to add to origClass.  This should be specified as an object literal
         * containing one or more methods.
         *    overrides     /      origclass    。
         *          if  ，IE for in       Object toSting   ，
         *           。IE9 beta          toString    for in   
         * @method override
         */
        override : function(origclass, overrides){
            if(overrides){
                var p = origclass.prototype;
                Ext.apply(p, overrides);
                if(Ext.isIE && overrides.hasOwnProperty('toString')){
                    p.toString = overrides.toString;
                }
            }
        },

 
このメソッドは、オブジェクトoverridesのすべてのプロパティ/メソッドをクラスorigclassのプロトタイプにコピーすることを実現します.IEではfor inがオブジェクトのObjectのtoStingなどを遍歴できないため,特別な処理が必要である.IE 9 betaでオブジェクトを書き換える内蔵方法、例えばtoStringの後にfor inで遍歴することができ、for inの欠陥を参照する.
 
Ext.extendはjs継承の最も古典的な実現方法であり、私が前に書いたExtJsで継承された実装と理解-extendを参照してください.