JavaScriptモジュール化開発(一)——基礎知識

もっと読む
本論は元の住所から転載して、Feeldesign Studioの無私な共有に感謝します.
 
先端JavaScriptコードがますます重くなるにつれて、JavaScriptコードをどのように組織するかが非常に重要になります.良い組織方式では、他の人と自分のよく理解できるようになります.モジュール化は非常に良いコード組織方式であり、本文ではJavaScriptモジュール化開発の基礎知識について説明してみたい.
対象文字数(Object Literals)
対象文字の大きさは、実は一対の大きな括弧で囲まれたキーの大きさです.つまりJavaScript宣言の対象となる方式です.

var myObject = {
    variableKey : variableValue,
    functionKey : function() {
       //do Something
    }
}

以下のコード声明方式を比較して、対象の字面量を使って、グローバル変数の汚染を減らすことができます.一般的には、いつでも次のような声明方式を使わないことを強く提案します.

var variableName = ...;

function name1(){
    //do Something
}
function name2(){
    //do Something
}

直ちに関数を実行します.(IIIIFFE Immedia tely-Invoked Function Expressions)
すぐに実行する関数は今とても流行っている書き方です.ほとんどのJSライブラリはこの技術を使っています.主にグローバル変数の汚染を防止します.
私たちが声明している時は  var name1 = function (){ … } このような関数は、後に括弧()を加えるとすぐに実行されますが、  function name1() { … } このような関数には問題があります.

function name1(){
    alert("123");
}();

上記のコードは実行時にエラーが発生します.Uexpected token(予期しないマーク)は、後の()がパケットオペレータとして解析されます.
上記の問題を解決するには、括弧を入れるだけで、functionコードを全部くくればいいです.以下は直ちに関数を実行する声明方式です.

(function () { /* code */ } ());
(function () { /* code */ })();

 注意してください.上の二つの方法は全部できます.主に個人の習慣を見ます.即時実行関数は、プライベート変数を外部に公開しないことができます. 

var myObject = {
    name : "FeeldesignStudio",
    getName : function(){
        return this.name;
    }
};
myObject.name;       //FeeldesignStudio
myObject.getName();  //FeeldesignStudio

var myObject = (function(){
    var name = "FeeldesignStudio";
    return {
        getName : function(){
            return name;
        }
    }
})();

myObject.name;       //  ！
myObject.getName();  //FeeldesignStudio

グローバル変数をインポート
グローバル変数をパラメータとして即座に関数を実行すると、グローバル変数の導入が完了し、直ちにこのグローバル変数を使用する方法を実行し、グローバル変数の名前を変更(簡略化)することができます.

var myModule = (function (jQ) {
    function method1(){
        jQ(".container").html("test");
    }

    return{
        publicMethod: function(){
            method1();
        }
    };
})( jQuery );

myModule.publicMethod();

モジュールエクスポート
もちろん導入してもエクスポートできます.グローバル変数だけでなく、モジュールをグローバル空間にエクスポートして他のモジュールに使用します.即時実行関数でObjectを返すことで、モジュール導出機能を実現できます. 

var myModule = (function () {
  var module = {}, privateVariable = "Feeldesign";
  function privateMethod() {
    // ...
  }
  module.publicProperty = "FeeldesignStudio";
  module.publicMethod = function () {
    console.log( privateVariable );
  };
  return module;
})();

拡張モジュール
開発では、モジュールのソースコードを直接修正することができますが、いくつかの方法を追加します.たとえば、myModuleモジュールにいくつかの方法を追加します.前の「即時実行関数」、「全局変数の導入」、「モジュール導出」の知識から、次のような拡張方法を導き出すことができます.  

var myModule = (function(my) {
    my.xxMethod = function () {
        //do Something
    };
    return my;
})(myModule);

問題が来ました.上のコードはよくmyModuleを拡張することができますが、前提はmyModuleが定義されています.もし拡張されたxxxx Method方法とmyModule自身には何の依存もないなら、myModuleが定義されている必要はないです.どうやってこの問題を解決しますか?とても簡単です.空き対象が必要です.  

//    
var myModule = (function (my) {
    my.xxMethod = function () {
        //do Something
    };
    return my;
})( myModule || {} );

上记のコードにはもう一つの问题があります.  var myModule = …、b.jsにも声明があります.  var myModule = …このようにa.jsとb.jsを導入する時、後者は前者を覆います.これは私達が期待したのではありません.だから上記のコードに対して、さらに改善することができます. 

(function (my) {
    my.xxMethod = function () {
        //do Something
    }
})( window.myModule = window.myModule || {} );

上ではJavaScriptモジュール化開発の基礎知識を紹介しました.次に、一般的な規範とこれらの規格に対するいくつかのjsライブラリの実現を紹介します.これらのjsライブラリを通じて、モジュール化開発をうまく実施することができます.