JavaScriptモジュールのモデル例の詳細

3123 ワード

本論文の実例は、JavaScriptモジュールモードを説明する.皆さんに参考にしてあげます.具体的には以下の通りです.
JSにはクラスの概念がないですが、ObjectのPublicとPrivateの属性をどう表現しますか?答えはモジュールモードです.
JSには顕著な特性があります.匿名関数の確立と実行によって、匿名関数のコードはクローズドパケットを形成し、パッケージ化とコントロールの対象となるPrivateとPublicの特性は、グローバル変数の氾濫と他のスクリプトとの衝突を回避します.


(function () {
  //                  
  //           
}());

クラシックなモジュールテンプレート


var myNamespace = (function () {
 var myPrivateVar, myPrivateMethod;
 // A private counter variable
 myPrivateVar = 0;
 // A private function which logs any arguments
 myPrivateMethod = function( foo ) {
   console.log( foo );
 };
 return {
  // A public variable
  myPublicVar: "foo",
  // A public function utilizing privates
  myPublicFunction: function( bar ) {
   // Increment our private counter
   myPrivateVar++;
   // Call our private method using bar
   myPrivateMethod( bar );
  }
 };
})();

クローズドによって、私たちはmyNamespaceを使う時、myPublic*の属性と方法しか見えません.myPrivate*の属性と方法は直接訪問できません.
基本モード拡張
Import mixins
JSには暗黙的大域変数という重要な特性があります.つまり、JSインタプリタはいつでも一つの変数に対してvar声明を探しています.見つけられなかったら、この変数として大域変数と見なします.このようにして、クローズドにグローバル変数を使うと容易に見えますが、コードの乱れが生じやすくなります.幸いにも匿名関数はパラメータを受信することができ、このようにパラメータ伝達によって、使用したいグローバル変数importを匿名関数に送ることができ、より明確でクリーンな使用方法を提供する.


(function ($, YAHOO) {
  //        jQuery (as $)   YAHOO  
}(jQuery, YAHOO));

Module exports
グローバル変数だけでなく、自分のグローバル変数も宣言したい場合があります.これは匿名関数のreturn valueで簡単に実現できます.


var MODULE = (function () {
  var my = {},
    privateVariable = 1;
  function privateMethod() {
    // ...
  }
  my.moduleProperty = 1;
  my.moduleMethod = function () {
    // ...
  };
  return my;
}());

高度な拡張
上の基本パターンに基づいて、私達は拡張を続けることができます.
Augmentation
基本モジュールモードの制限はモジュール全体を一つのfileにしなければならないです.一つのモジュールを複数のファイルに分散する必要がある場合、どうすればいいですか?
一つの方法はaugment modulesです.まずmoduleを入力して、属性方法を追加して出力します.例は以下のとおりです


var MODULE = (function (my) {
  my.anotherMethod = function () {
    // added method...
  };
  return my;
}(MODULE));

Loose Augmentation
上の例はまずModuleが必要です.それに基づいて新しい特性を追加します.しかし、ある時、私たちはJSスクリプトを非同期的にロードします.そうすると、低い結合のモジュール構築方法が必要です.次のような構造を通じて実現できます.


var MODULE = (function (my) {
  // add capabilities...
  return my;
}(MODULE || {}));

Sub-modules
Moduleに基づいてSub modulesを確立することができます.これは非常に簡単です.例は以下の通りです.


MODULE.sub = (function () {
  var my = {};
  // ...
  return my;
}());

ここでは,最も古典的なJSモードとして,種々のJSフレームワークで広く使用されるモジュールモードを簡単に紹介した.これはあなたのコードのパッケージ性をより強くし、構造化をより合理的にし、よりOOPにします.
JavaScriptの関連内容については、当駅のテーマを見ることができます.「javascript対象入門教程」、「JavaScript切替特効と技巧のまとめ」、「JavaScript検索アルゴリズム技術のまとめ」、「JavaScriptエラーとデバッグ技術のまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」『JavaScript数学演算の使い方のまとめ』
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます.

swiperは簡単に使います