Javascriptモジュール化の理解

モジュール化は汎用的なプログラミングのベストプラクティスです.プログラムのモジュール化は私たちにもっと便利に他の人のコードを使うことができて、どんな機能がほしいならば、どんなモジュールをロードして、それによってコードの利用効率を高めて、開発速度を増加します.
モジュールは積み木のようなもので、それがあれば、いろいろな機能スタイルのプログラムを作ることができます.積み木にはどんな特徴がありますか.小さくて簡単です.同様に、私たちのプログラムのモジュールもこれを行い、自分が作成した関数が一度に1つの作業しか完了しないことを確認します.これにより、他の開発者は、すべてのコードを参照することなく、すべてのコードブロックがどのような機能を実行しているかを明らかにすることができます.このように小さくて簡単にしてこそ、その汎用機能を実現することができる.
一、javascriptモジュール化の方法1、関数パッケージJavaScriptの役割ドメインは関数に基づいているので、関数をモジュールとすることができます.

function fn1(){
  //code
}

function fn2(){
  //code
}

欠点:グローバル変数を「汚染」し、他のモジュールと変数名が衝突しないことを保証できない
2、対象

var myModule1 = {
  fn1: function(){
    //code
  },
  fn2: function(){
    //code
  }
}

欠点:すべてのモジュールメンバーが露出し、内部ステータスが外部に書き換えられる
即時自己実行関数――推奨

var myModule = (function(){
  function fn1(){
    //code
  },
  function fn2(){
    //code
  },
  return {
    fn1: fn1,
    fn2: fn2
  };
})();

二、小さくて簡単です.小さくて簡単です.例えば、新しいリンクを作成する関数を作成し、タイプが「mailto」ハイパーリンクにclassを追加したいと思っています.次のことができます.

function addLink(text, url, parentElement) {
  var newLink = document.createElement('a');//  a  
  newLink.setAttribute('href', url);// a    href  
  newLink.appendChild(document.createTextNode(text));// a      
  if(url.indexOf("mailto:")==-1){
    newLink.className = 'mail';
  }
  parentElement.appendChild(newLink);// a       
}

このように書くと仕事ができますが、他の機能の追加ができないことに気づくかもしれません.そこで、この関数は適用されません.したがって、関数が特殊であるほど、異なる状況に適用することは困難である.ここの関数の書き方はモジュール化の要求に達していない――一つの関数は一つのことしかしない.関数を編集します.

function createLink(text,url) {
  var newLink = document.createElement('a');
  newLink.setAttribute('href', url);
  newLink.appendChild(document.createTextNode(text));
  return newLink;
}

ここでcreateLink関数は、ページに追加するaラベルを作成して返します(小さくて簡単です).これにより、ハイパーリンクを作成する必要がある場合に呼び出すことができます.
三、CommonJSはブラウザ環境の下で、モジュールがなくても特に大きな問題ではありません.結局、ページプログラムの複雑さは限られています.しかし、サーバ側では、オペレーティングシステムや他のアプリケーションとモジュールが相互作用しなければならない.そうしないと、プログラミングできない.JavaScriptはウェブ側で何年も発展してきたが、最初の流行のモジュール化規範はサーバー側のJavaScriptアプリケーションによってもたらされ、CommonJS規範はNodeJSによって発揚され、JavaScriptモジュール化プログラミングが正式に舞台に登場したことを示している.node.jsのモジュールシステムは,CommonJS仕様に従って実現される.CommonJSでは、モジュールをロードするためのグローバルメソッドrequire()があります.ロードモジュール:
var math = require('math'); 呼び出しモジュール:
  math.add(2,3)CommonJS仕様はブラウザ環境には適用されない.add(2,3)はmathでなければならない.jsのロードが完了してから実行され、モジュールはサーバ側に配置されているため、待ち時間はネットワーク速度の速さに依存する可能性があります.
CommonJS仕様はサーバ側に適用されます.サービス側にとって、すべてのモジュールはローカルハードディスクに保存されているため、同期ロードが完了し、待機時間はハードディスクの読み取り時間です.
四、モジュールはどのように定義し、どのようにロードすればいいですか?AMD Asynchronous Module Definition非同期モジュール定義、主な代表:require.js目的:(1)jsファイルの非同期ロードを実現し、ウェブページの応答を失うことを避ける.(2)モジュール間の依存性を管理し,コードの作成とメンテナンスを容易にする.
1、モジュールの定義

define(["./cart", "./inventory"], function(cart, inventory) {
  //  []    
  return {
    color: "blue",
    size: "large",
    addToCart: function() {
      inventory.decrement(this);
      cart.add(this);
    }
  }
}
);

2、ロードモジュール

require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule,  myModule) {
  //This function will be called when all the dependencies
  //listed above are loaded. Note that this function could
  //be called before the page is loaded.
  //This callback is optional.
}
 );

CMD Common Module Definition汎用モジュール定義、CMD規範は国内で発展した.主な代表:sea.js
1、モジュールの定義

define(function(require, exports, module) {
 //    require     
 var $ = require('jquery');
 var Spinning = require('./spinning');
 //    exports       
 exports.doSomething = ...
 //      module.exports       
 module.exports = ...
});

2、ロードモジュール
seajs.use(./static/hello/src/main)の違い:
依存モジュールの場合、AMDは事前実行であり、CMDは遅延実行である.ただしRequireJSは2.0から、実行を遅らせることができるように変更されている(書き方によって処理方式が異なる).CMDはas lazy as possibleを推奨する.
CMDの推奨依存は近いが,AMDは依存前置を推奨する.
以上が本文のすべての内容で、みんなの学習に役立つことを望みます.