CMDモジュール定義規範解説

19266 ワード

モジュール化

CMDモジュール定義仕様
Sea.jsでは、JavaScriptモジュールはすべてCMD(Common Module Definition)モジュール定義仕様に従っています.この規範はモジュールの基本的な書き込みフォーマットと基本的なインタラクティブルールを明確にしている.
CMD仕様では、モジュールはファイルです.コードの書き方は以下の通りです.

define(factory);

define Functiondefine は、モジュールを定義するための大域関数です.
define define(factory)define 受け入れる factory パラメータ関数でもいいし、オブジェクトや文字列でもいいです.factory 対象、文字列の場合、モジュールを表すインターフェースがそのオブジェクト、文字列です.例えば、以下のようにJSONデータモジュールを定義することができる.

define({ "foo": "bar" });

テンプレートモジュールを文字列で定義することもできます.

define('I am a template. My name is {{name}}.');

factory 関数の場合は、モジュールの構造方法を表します.この構成方法を実行すると、モジュールが外部に提供するインターフェースが得られます.factory 方法が実行されると、デフォルトは3つのパラメータに入る.factory、require. 和 exports:

define(function(require, exports, module) {

  //     

});

define moduledefine(id?, deps?, factory) 二つ以上のパラメータも受け入れられます.文字列 define モジュールの識別、配列を表します. id モジュール依存です.たとえば:

define('hello', ['jquery'], function(require, exports, module) {

  //     

});

deps 和 id パラメータは省略できます.省略すると、構築ツールによって自動的に生成されます.
注意:バンド deps 和 id パラメータ deps 使い方はCMD規格ではなく、 Modules/Transport 規範
define.cmd define空のオブジェクトは、現在のページにCMDモジュールのキャリアがあるかどうかを判定するために使用できます.

if (typeof define === "function" && define.cmd) {
  //   Sea.js   CMD        
}

define(function(require,export,module)解説
1、require ObjectFunction はい、 require 関数の最初のパラメータです.
require factoryrequire(id) 一つの方法です. モジュールの識別一意のパラメータとして、他のモジュールが提供するインターフェースを取得します.

define(function(require, exports) {

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

  //      a    
  a.doSomething();

});

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

define(function(require, exports, module) {

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

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

});

注意:callback 同期ダウン実行です.require 非同期コールバックが実行されます.require.async 一般的には非同期ローディングを遅延させるためのモジュールをロードします.
require.reolve require.asyncモジュールシステム内部の経路解析機構を使用してモジュールパスを解析して返します.この関数はモジュールをロードせず、解析後の絶対パスのみを返します.

define(function(require, exports) {

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

});

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

define(function(require, exports) {

  //      foo   
  exports.foo = 'bar';

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

});

くれるほかはない exports オブジェクトにメンバーを追加しても使用できます. exports 直接にインターフェースを提供します.

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 または return 割り当て:

define(function(require, exports, module) {

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

});

ヒント:module.exports ただそれだけで exports の参照です. module.exports 内部フィード factory 再割当時には、exportsは変更されません. の値を返します.したがって、 module.exports 割り当ては無効です.モジュールインターフェースの変更には使用できません.
3、module exportsObject は、現在のモジュールに関連したいくつかの属性と方法が格納されているオブジェクトです.
module.id moduleモジュールの一意の識別.

define('id', [], function(require, exports, module) {

  //     

});

上記のコードの中で、String の最初のパラメータはモジュールの識別です.
module.uri defineモジュールシステムの経路解析規則に従って得られたモジュール絶対パス.

define(function(require, exports, module) {

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

});

普通の状況では String 手書きにする define パラメータの場合)id の値は module.id、両者は全く同じです.
module.dependencies module.uriArray は、現在のモジュールの依存性を表します.
module.exports dependencies現在のモジュールが外部に提供するインターフェース.
手渡す Object 構造方法の factory パラメータは exports オブジェクトの参照. module.exports パラメータでインターフェースを提供します.開発者のすべての要求を満たすことができない場合があります.たとえば、モジュールのインターフェースがある種類のインスタンスである場合は、 exports 実装:

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

});

結び目
これはCMDモジュール定義仕様のすべての内容です.よく使うAPIは唯一のAPIです. module.exports、 define、 require、 require.async,exports この5つです.他のAPIのイメージがあればいいです.必要な時にもう一度ドキュメントを調べに来てください.わざわざ覚えなくてもいいです.
RequireJSのAMD仕様と比較して、CMD仕様はできるだけ簡単に維持し、Common JSとNode.jsのModules仕様との互換性が大きいです.CMD規格で書いたモジュールによって、Node.jsで動作しやすくなります.後で紹介します.

Reactプロジェクトノートのcreat-react-apカスタムESLintプロファイル