「JavaScriptモード」読書ノート(5)—対象作成モード1

これはまた新たな始まりであり、対象の重要性は言うまでもない.JavaScriptでオブジェクトを作成するのはとても簡単です.これまで話したオブジェクトの字面量と構造関数は全部目的を達成できます.しかし、本編では、それらを越えて、いくつかの追加的なオブジェクトを求めてモードを作成します.
この内容は名前空間、依存声明、モジュールモード、サンドボックスパターンを学びます.これらはすべて、アプリケーションコードの構造を組織し、潜在的なグローバル変数の結果を低減するのに役立ちます.その他の議論のテーマは、プライベートと特権メンバー、オブジェクト定数、チェーン、およびインスピレーションの方法を含み、構造関数を定義します.
 
一、名前空間モード
名前空間(namespace)は、プログラムに必要なグローバル変数の数を減らすのに役立ちます.また、名前の衝突や長すぎる名前のプレフィックスを避けるのにも役立ちます.
JavaScript言語の文法には名前空間が内蔵されていませんが、この特徴は非常に実現しやすいです.アプリケーションまたはライブラリのためにグローバルオブジェクトを作成して、そのグローバルオブジェクトにすべての機能を追加することができます.したがって、大量の関数、オブジェクト、その他の変数がある場合は、グローバル範囲は汚染されません.

// 5     
//   ：   
//     
function Parent() {}
function Child() {}

//     
var some_var = 1;

//     
var module1 = {};
module1.data = {a:1,b:2};
var module2 = {};

//                                  ：
//   ：1     
//     
var MYAPP = {};

//     
MYAPP.Parent = function () {};
MYAPP.Child = function () {};

//     
MYAPP.some_var = 1;

//       
MYAPP.modules = {};

//     
MYAPP.modules.module1 = {};
MYAPP.modules.module1.data = {a:1,b:2};
MYAPP.modules.module2 = {};

グローバル名前空間オブジェクトの名前は、アプリケーションまたはライブラリの名前、ドメイン名、または会社名来名などの任意の選択ができます.通常は公約によって、大文字でグローバル変数と命名されるのが目立ちます(もちろん、定数も同じです).
このようなモードは、コードの名前空間を組織する良い方法であり、名前の衝突を避けるだけでなく、同じページであなたのコードと第三者コードの間の命名衝突を回避することができます.
もちろん、このような方法にもいくつかの欠点があります.

は、より多くの文字を入力する必要があります.各変数と関数の前にプレフィックスを追加します.全体的にはダウンロードが必要なコード量が増加します.

は、グローバル・インスタンスの一つだけで、どの部分のコードでもグローバル・インスタンスを変更できることを意味する.

の長い入れ子の名前は、より長い(より遅い)属性解析クエリ時間を意味する.

本編の後で紹介したサンドボックスのパターンはこれらの欠点を解決できます.
 
汎用名前空間関数
プログラムの責任性の増加、コードの一部が異なるファイルに分割され、使用条件にはステートメントなどの要素が含まれているため、コードが最初にある名前空間またはその内部の属性を定義したと仮定するだけで、このようなやり方はもはや安全ではない.名前空間に追加されたいくつかの属性はすでに存在するかもしれません.したがって、属性を追加するか、名前空間を作成する前に、まず存在しているかどうかを確認したほうがいいです.

//       
var MYAPP = {};
//        
if(typeof MYAPP === 'undefined') {
    var MYAPP = {};
}
//         
var MYAPP = MYAPP || {};

これらの付加的な検査はどのように順序を追って多くの反復コードをもたらすかを見ることができる.例えば、MYAPP.modules.module 2を定義するには、3回の検査を構成しなければならず、毎回検査するごとに定義された1つの対象または属性に対して必要である.これは、名前空間の詳細を簡単に処理できる再利用可能関数が必要な理由です.この関数をnamespaceと呼び、次のように使います.

//         
MYAPP.namespace('MYAPP.modules.module2');

//        
var MYAPP = {
    modules:{
        module2:{}
    }
};

次に名前空間関数の例を示します.この実現は非破壊的です.つまり、名前空間が既に存在しているなら、再度作成しません.

var MYAPP = MYAPP || {};

MYAPP.namespace = function (ns_string) {
    var parts = ns_string.split('.'),
        parent = MYAPP,
        i;

    //             
    if(parts[0] === "MYAPP"){
        parts = parts.slice(1);
    }

    for(i = 0;i < parts.length; i += 1){
        //             
        if(typeof parent[parts[i]] === 'undefined'){
            parent[parts[i]] = {};
        }
        parent = parent[parts[i]];
    }
    return parent;
}
//                   ：
//             
var module2 = MYAPP.namespace('MYAPP.modules.module2');
console.log(module2 === MYAPP.modules.module2);

//       ‘MYAPP’
console.log(MYAPP.namespace('modules.module51'));

//      
console.log(MYAPP.namespace('once.upon.a.time.there.was.this.long.short.nested.property'));

 
二、依存関係を宣言する
JavaScriptライブラリは通常モジュール化され、名前空間によって組織されています.これにより、必要なモジュールだけを含むことができます.例えば、YUI 2ライブラリには名前空間としてグローバル変数YAHOOがあり、モジュールはこのグローバル変数の属性であり、例えばYAHOO.util.DomとYAHOO.util.Eventという.
コードに依存するモジュールを関数またはモジュールの上部に宣言するのは非常に良い考えです.この宣言は、ローカル変数を作成し、必要なモジュールを指すだけです.

var myFunction = function () {
    //   
    var event = YAHOO.util.Event,
        dom = YAHOO.util.Dom;
    
    //      DOM  
    //     
};

これはとてもシンプルなモデルですが、多くの長所があります.

明示的な依存関係宣言は、あなたのコードのユーザに対して、必要と判断された特定のスクリプトファイルがすでにこのページに含まれていることを示しています.

関数の上部にある前のステートメントは、依存性を容易に発見し、解析することができます.

解析局所変数の速度は、大域変数の解析よりも常に速く、大域変数を使用するネスト属性よりも速く、より良い性能をもたらす.この依存性宣言モードを使用すると、グローバルシンボル解析は関数内で一回だけ実行されます.この後は局所変数を使います.この解析速度もかなり速いです.

は、YUIComprestorとGoogle閉じられたコンパイラのような高度なガジェットが、ローカル変数(すなわち、圧縮)の名前を変更することができ、より小さなコード量をもたらしますが、これらのツールは、グローバル変数の名前を変更することができません.このため、安全ではありません.

　　
この記事はここまでです.実は小さい二つの点ですが、この二つのポイントは確かにあなたのコードに良い性能をもたらします.じゃ、次の文章で会いましょう.