先端モジュール化(二)

8345 ワード
先端モジュール化 cmd seajs
本論文は主に以下の通りである.https://github.com/seajs/seaj...もう一つの文章は参考になります.https://segmentfault.com/a/11...
Sea.jsでは、JavaScriptモジュールはすべてCMD(Common Module Definition)モジュール定義仕様に従っています.この規範はモジュールの基本的な書き込みフォーマットと基本的なインタラクティブルールを明確にしている.
sea.jsの使用を開始します


    
seajs.use('./main.js');
A同僚が書いたメール.
define(function (require,exports,module) {
    var oInput = document.getElementById('input1');
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');

    require('./drag.js').drag(oDiv3);//    ，    AMD main.js
    oInput.onclick = function () {
        oDiv1.style.display = 'block';
        require('./scale.js').scale(oDiv1,oDiv2);

        require.async('./scale.js', function (ex) {
            ex.scale(oDiv1,oDiv2);
        })
    }
});
CMDモジュールの作成
CMD仕様では、モジュールはファイルです.コードの書き方は以下の通りです.
define(factory);
defineはモジュールを定義するための大域関数です.
一:define(factory)
defineはfactoryパラメータを受け取ります.factoryは関数でもいいし、オブジェクトや文字列でもいいです.
1.factoryが対象、文字列の場合、モジュールを表すインターフェースがそのオブジェクト、文字列です.例えば、以下のようにJSONデータモジュールを定義することができる.
define({ "foo": "bar" });
テンプレートモジュールを文字列で定義することもできます.
define('I am a template. My name is {{name}}.');
2.. factoryを関数とすると、モジュールの構造方法を表します.この構成方法を実行すると、モジュールが外部に提供するインターフェースが得られます.factoryメソッドは実行時、デフォルトでは三つのパラメータが入ってきます.require、exports、module:
define(function(require, exports, module) {

  //     

});

define define(id?, deps?, factory)
define.cmd Objectの空きオブジェクトは、現在のページにCMDモジュールのキャリアがあるかどうかを判定するために使用できます.
if (typeof define === "function" && define.cmd) {
  //   Sea.js   CMD        
}
1.require
Functionタイプ
requireはfactory関数の最初のパラメータです.
(1)require(id)requireは、他のモジュールが提供するインターフェースを取得するために、唯一のパラメータとしてモジュール識別を受ける方法である.
define(function(require, exports) {

  //      a    
  var a = require('./a');

  //      a    
  a.doSomething();

});
注意:開発に際しては、requireの書き方は簡単な約束に従う必要があります.
require.async require.async(id, callback?)
(2)require.async require.async方法はモジュール内部で非同期的にモジュールをロードし、ロード完了後に指定されたコールバックを実行するために使用されます.calbackパラメータはオプションです.
define(function(require, exports, module) {

  //         ，      ，    
  require.async('./b', function(b) {
    b.doSomething();
  });

  //         ，      ，    
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });

});
注意:requireは同期してから実行します.require.asyncは非同期のコールバックです.require.asyncは、一般的に非同期的にロードされるモジュールをロードするために使用される.
(3)require.reolve(id)
モジュールシステム内部の経路解析機構を使用して、モジュールパスを解析し、リターンします.この関数はモジュールをロードせず、解析後の絶対パスだけを返します.
define(function(require, exports) {

  console.log(require.resolve('./b'));
  // ==> http://example.com/path/to/b.js

});
これはモジュールパスを取得するために使用できます.一般にプラグイン環境やモジュールパスが必要な場面で使用されます.
2.exports
exportsは、モジュールインターフェースを外部に提供するためのオブジェクトです.
define(function(require, exports) {

  //      foo   
  exports.foo = 'bar';

  //      doSomething   
  exports.doSomething = function() {};

});
exportsオブジェクトにメンバーを追加する以外に、returnを使って直接にインターフェースを提供することができます.
define(function(require) {

  //    return       
  return {
    foo: 'bar',
    doSomething: function() {}
  };

});
return文がモジュール内の唯一のコードである場合、以下にも簡略化されます.
define({
  foo: 'bar',
  doSomething: function() {}
});

             JSONP   。

    ：          ！

define(function(require, exports) {

  //     ！！!
  exports = {
    foo: 'bar',
    doSomething: function() {}
  };

});
正確な書き方はreturnまたはmodule.exportsに値を付けることです.
define(function(require, exports, module) {

  //     
  module.exports = {
    foo: 'bar',
    doSomething: function() {}
  };

});
ヒント:exportsはmodule.exportsの一つの引用にすぎません.factory内部でexportsに再割り当てする場合、module.exportsの値は変わりません.したがって、exportsへの割当値は無効であり、モジュールインターフェースの変更には使用できません.
3.module
moduleはオブジェクトであり、現在のモジュールに関連するいくつかの属性および方法が格納されている.(1)module.id Stringタイプ
モジュールの一意の識別.
define('id', [], function(require, exports, module) {

  //     

});
上のコードの中で、defineの一番目のパラメータはモジュールの標識です.(2)module.uri Stringタイプ
モジュールシステムの経路解析規則に従って得られたモジュール絶対パス.
define(function(require, exports, module) {

  console.log(module.uri); 
  // ==> http://example.com/path/to/this/file.js

});
一般的には(defineでidパラメータを手書きしていない場合)、module.idの値はmodule.uriで、両者は全く同じです.(3)module.dependencies Arayタイプdependenciesは、現在のモジュールの依存性を示す配列である.(4)module.exportObjectタイプ現在のモジュールが外部に提供するインターフェース.factory構造方法に伝えられるexportsパラメータはmodule.exportオブジェクトの一つの参照です.exportsパラメータだけでインターフェースを提供します.開発者のすべての要求を満たすことができない場合があります.例えば、モジュールのインターフェースがある種類のインスタンスである場合、module.exportを通じて実現する必要がある:
define(function(require, exports, module) {

  // exports   module.exports      
  console.log(module.exports === exports); // true

  //     module.exports   
  module.exports = new SomeClass();

  // exports      module.exports
  console.log(module.exports === exports); // false

});
注意:module.exportsの割当値は同期して実行する必要があります.コールバック関数に入れてはいけません.これはいけません.
// x.js
define(function(require, exports, module) {

  //     
  setTimeout(function() {
    module.exports = { a: "hello" };
  }, 0);

});
上のx.jsに呼び出されました.
// y.js
define(function(require, exports, module) {

  var x = require('./x');

  //          x     a
  console.log(x.a); // undefined

});
二:define(id?dependencies?factory);
defineは2つ以上のパラメータをも受け入れることができる.文字列IDはモジュール識別を表し、配列depsはモジュール依存性である.たとえば:
define('hello', ['jquery'], function(require, exports, module) {

  //     

});
idとdepsパラメータは省略できます.省略すると、構築ツールによって自動的に生成されます.
注意:idとdepsパラメータを持つdefineの使い方はCMD仕様ではなく、Modules/Transport仕様です.
(1)id:モジュール識別(2)dependenciesは、現在のモジュールの依存性を示す配列です.
三:RequireJSとSeaJS
RequireJSはJames Burkeによって創建され、彼もAMD仕様の創始者です.
define方法はモジュールを定義するために用いられ、RequireJSはモジュールごとに個別のファイルに入れる必要があります.
同じ点:
RequireJSとSea.jsはモジュール搭載器であり、モジュール化の開発理念を提唱し、核心価値はJavaScriptのモジュール化開発を簡単に自然にします.違い:
両者の主な違いは以下の通りです.
作者:玉伯リンク:http://www.zhihu.com/question...出所:著作権は著者の所有になりますので、転載は作者に連絡して授権してください.
AMD仕様はここです.https://github.com/amdjs/amdj...CMD 規範はここですhttps://github.com/seajs/seaj...
AMDは、RequireJSがモジュール定義のプロモーションプロセスにおける規範化出力である.CMDはSeaJSがモジュール定義の標準化出力をプロモーション中に行うものです.同様に、Common JS Modules/2.0規格もあります.BravoJSは普及過程でモジュール定義の規範化生産です.まだたくさんあります.⋯
これらの仕様の目的は、JavaScriptのモジュール開発、特にブラウザ側のものです.これらの仕様の実現は、ブラウザ側のモジュール開発の目的を達成することができます.
違い:
  • は、依存するモジュールに対して、AMDは予め実行され、CMDは遅延実行される.但し、RequireJSは2.0から遅延実行可能に変更されました.CMD推賞as lazy as possible.
  • CMDは、依存性が近く、AMDは前置依存を推奨する.コードを参照してください.//CMDdefine('./a')a.doSomething()/ここでは100行var b=require('.b')を略して書きます./頼りにしています.//ここで100行を略すb.doSomething())
    • AMDはCMDの書き方にも対応していますが、リキュールを依存項として送ることもサポートしていますが、リキュールJSの作者はデフォルトでは上記の書き方が一番好きです.公式文書ではデフォルトのモジュール定義の書き方です.
    3.AMDのAPIはデフォルトでは複数の場合に使用され、CMDのAPIは厳格に区分され、職責単一を尊重する.たとえばAMDの中で、requireは大域requireと局部requireに分けて、すべてrequireと言います.
        ：
define()      require->   require;
define()     function()   require->  require
    CMDでは、グローバルrequireではなく、モジュールシステムの完全性によって、seajs.useを提供してモジュールシステムのロード起動を実現します.CMDでは、APIはシンプルで純粋です.
           ：
   AMD      require；CMD        require。
      ：CMD       ，AMD
    4.まだ細かい差異がありますが、この仕様の定義を具体的に見ればいいです.
    また、SeaJSとRequireJSの違いは、参照できます.https://github.com/seajs/seaj...
    SeaJSとRequireJSの最大の違い:SeaJSはモジュールに対する態度が怠惰で実行され、RequireJSはモジュールに対する態度がプリ実行される.分かりませんこの文章を見てください.http://www.douban.com/note/28...
    つまり、RequireJSがProttypeクラスだというなら、Sea.jsはjQueryクラスになるように努めます.
    リボン:
    これはCMDモジュール定義仕様のすべての内容です.よく使うAPIはdefine、require、require.async、export、module.exportsの5つだけです.他のAPIのイメージがあればいいです.必要な時にもう一度ドキュメントを調べに来ます.わざわざ覚えなくてもいいです.
    RequireJSのAMD仕様に比べ、CMD仕様はできるだけ簡単に維持し、Common JSとNode.jsのModules仕様と大きな互換性を維持しています.
    jsの配列の並べ替えアルゴリズム