フロントエンドモジュール化について

4890 ワード

1.モジュール化を使用する理由
JSの発展の初期、簡単なユーザーのインタラクティブなロジックを実現するだけで、CPU、ブラウザの性能の大幅な向上に従って、多くのページのロジックはクライアントに移行して、しかもweb 2.0時代の到来により、Ajax技術は広く応用され、jQueryなどのフロントエンドライブラリが次々と出現し、フロントエンドコードは日増しに膨張している.このときJSは極めて単純なコード組織ではこのような膨大な規模のコードを制御することができなくなった.このとき他の言語を参考にして、例えばJAVAにはpackageの概念があり、論理的に関連するコードを1つのパケットに組織し、各パケットは互いに独立し、相互に影響しない.このようにコードをブロック組織することができる.JSは設計当初、類似の機能を提供していなかったため、開発者は類似の機能をシミュレートし始め、複雑なJSコードを隔離し、組織し始めた.これがフロントエンドのモジュール化の始まりである.モジュール化の最初の考え方は,1つのファイルにいくつかの関連関数を記述し,必要に応じて関数が存在するファイルをロードし,関数を呼び出すことである.しかし、これによりグローバル変数が汚染され、他のモジュール変数名と競合せず、モジュールメンバー間に何の関係もないことは保証されません.その後、上記の問題を解決するために、オブジェクトの書き方を用いて、すべてのモジュールメンバーを1つのオブジェクトにカプセル化し、var module = {fn1: function(){...}, fn2: function(){...}}はモジュールを呼び出すときに対応するファイルmodule.fn()を引用し、これにより汚染変数を回避するとともに、モジュール内のメンバーにも関係があるが、外部では内部メンバーvar module.fn1 = 1を自由に修正することができる.最後に、直ちに関数を実行することによって、内部の変数と関数を隠し、直ちに関数を実行して内部の変数と関数を自分の役割ドメインに包み、外部は修正できないという考え方が現れ、このようなやり方が現段階のモジュール化の基礎である.現在JSモジュール化仕様は主に2種類ある:CommonJSとAMD.
2.CMD、AMD、CommonJS仕様はそれぞれ何を指しますか?どのようなアプリケーションがありますか
CommonJS
CommonJSはサーバ側の仕様で、Node.jsが輝いている.CommonJSには、次の3つのセクションがあります.

定義モジュール:CommonJS仕様に従って、個別のファイルがモジュールです.各モジュールは、globalオブジェクトのプロパティとして定義されていない限り、個別の役割ドメイン、すなわちモジュール内部で定義された変数であり、他のモジュールには読み込めません.

モジュール出力:モジュールには出口が1つしかありません.modules.exportオブジェクトです.モジュールが出力したい内容をオブジェクトに入れます.

ロードモジュール:ロードモジュールはrequireの方法を用いる、この方法は1つのファイルを読み取り実行し、ファイル内部のmoduleに戻る.exportsオブジェクト.

//      math.js
module.exports = function(){
  var sum = 0, i = 0, args = arguments
  while(i < args.length){
    sum += args[i++]
  }
  return sum;
};
//main.js    
var add = require('math.js')
console.log(add(1,2,3)) //  node  ，     6

上記コードは、まずモジュールmathを定義.js、moduleを通ります.exportsは関数を出力し、別のファイルにrequireでこの関数をロードします.これがCommonJSの基本的な使い方です.しかしながら、上記のコードではrequireが同期されており、モジュールシステムはモジュールファイルの内容を同期して読み取り、モジュールインタフェースを得るためにコンパイル実行する必要があることに留意されたい.これはサーバ側では実現できるが,ブラウザ側ではJSコードをロードする最も一般的な方法はdocumentにscriptタグを挿入することであるが,scriptタグは生まれつき非同期であるため,CommonJS仕様はブラウザ側では実装できない.したがって、標準テンプレートでテンプレート定義をカプセル化できるという考え方があり、AMDとCMDの2つの仕様があります.
AMD
AMD(Asynchronous Module Definition)は、非同期モジュール定義であり、ブラウザ側で開発されたモジュール化仕様である.オリジナルJSではAMD仕様がサポートされていないため、ライブラリ関数「require.js」を使用する.AMDは非同期ロードモードを採用し、モジュールのロードは後の文の実行に影響しない.このモジュールに依存するすべての文は、ロードが完了すると実行されるコールバック関数で定義されます.上記の例では、まずhtmlにscriptタグでrequireを導入する.js: のコードにおけるdata-main のは、ウェブページプログラムのメインモジュールであるmainをすることである.jsはにrequire.jsロード.

//    math.js
define(function (){
    var add=function(){
        var sum=0,i=0,args = arguments;
        while(i < args.length){
            sum += args[i++];
        }
        return sum
    }
    return {
        add: add
    };
})
//main.js    
require(['math'],function(math){
    console.log(math.add(1,2,3))
}) //        ，     6。

requireJSは、モジュールをするためのグローバルである defineをします. :define([[id,] dependencies,] factory)

idオプションパラメータは、モジュールのをするためにされ、ないはスクリプトファイル ( をく)

にデフォルトされます.

dependenciesオプションパラメータは、のモジュールモジュール

です.

factoryファクトリメソッドでは、モジュールがするまたはオブジェクトをし、オブジェクトの、そのオブジェクトはモジュールのであり、の、だけするがあります.ロードモジュールはrequire require([dependencies], function(){}) require をして2つのパラメータをし、は1つのでモジュールをし、はコールバックであり、すべてのロードがしたにびされ、ロードされたモジュールはパラメータのでこのにされ、でこれらのモジュールをすることができる.require はをロードするときにロードであるため、ブラウザはをうことなく、すべてのロードがしたにコールバックをし、のをします.

CMD
もうつのはCMDとばれています(Common Module Definition)、テンプレートは、からしたものである.AMDにrequireJSがあり、CMDにはseaJSがいられる.seaJSがすべきは、requireJSとに、モジュールとモジュールロードタイミングがなるだけである.CMD では、1つのモジュールがファイルであり、define(factory) factoryをとしたにするモジュールの .このをすると、モジュールがにするインタフェースをることができる.factoryには3つのパラメータがあります:function(require,exports,module)

requireは、のモジュールがするインタフェースをするためののパラメータとしてモジュールをするである.

exportsは、モジュールインタフェースをにするオブジェクトです.

moduleは、のモジュールにけられたいくつかのおよびメソッドをするオブジェクトです.

//    module.js
define(function(require,exports,module){
  var a = require('./a')
  a.dosomething
  //some code
  var b = require('./b')
  b.dosomething
  //some code
}
//    
seajs.use(['module.js'],function(){
// do something
});

のコードからかるように、CMDとAMDののいは、CMDのがいこと、すなわち、あるモジュールをするにのみrequireをし、AMDのは、モジュールをするにそのをすることである. にロードで、AMDはロードモジュールがしたにこのモジュールをし、すべてのモジュールのロードがしたにrequireのコールバックにり、メインロジックをします.したがって, モジュールのとくはずしもせず,どちらがにダウンロードされ,どちらがにされるかである.CMDはあるモジュールをロードしたはせず、ダウンロードしただけで、すべてのモジュールのロードがした、にり、require にったときにするモジュールをするので、モジュールのとくはにしている.

【MySQL】DELETEとTRUNCATEの差 ~駆け出しエンジニア編~

mybatis mapper.xmlファイルのsql書き方