JavaScriptでよく言われる4つのモジュール仕様

8039 ワード

先端ステップメモ JavaScriptモジュール仕様

JavaScriptでよく言われるモジュール仕様

Common JS仕様

AMD規格

UMD規格

ES 6モジュール仕様

Common JS仕様
Common JS仕様はモジュールがどのように編纂されるべきかを定義しており、各モジュールシステム間で相互操作が可能です.

var beta = require('beta');

function verb {
     

  return beta.verb();

}

module.exports = {
     

  verb: verb

};

Common JSには以下の特徴があります.

ファイルはモジュールです.

は、require()を使用してモジュールをロードし、module.export出力モジュールを使用するので、各モジュール間で相互作用が可能である.

は、非同期ローディングをサポートしていません.
AMD仕様
名前の通り、非同期モジュール定義(AMD)は主に非同期ローディングモジュールを解決するために提案され、モジュールと依存項を指定する方法でモジュールを定義します.

define("alpha", ["require", "exports", "beta"], function (

  require,

  exports,

  beta

) {
     

  exports.verb = function () {
     

    return beta.verb();

    //        

    return require("beta").verb();

  };

});

この例では、IDがアルファのモジュールであり、IDがベータのモジュールに依存する.
Node.js環境におけるモジュールシステムはCommon JS規格に基づいており、ブラウザ環境においてはAMDを使用して実現する必要があることを知っています.
もしモジュールがあれば、Node.js環境とブラウザ環境の中で同時に実行できます.どうすればいいですか?UMDモードは使えます.
UMD仕様
AMDとCommunJSの仕様を両立させるために、汎用モジュール定義(UMD)モードが提案され、両者を互換しながら、従来のグローバル変数モードもサポートされています.

(function (root, factory) {
     

  if (typeof define === "function" && define.amd) {
     

    // AMD

    define(["jquery"], factory);

  } else if (typeof exports === "object") {
     

    // CommonJS

    module.exports = factory(require("jquery"));

  } else {
     

    //     

    root.returnExports = factory(root.jQuery);

  }

})(this, function ($) {
     

  // ...

});

UMDモジュールのヘッダは、通常、モジュールのキャリア環境を判断するためのコードがあり、異なる環境によって様々な方法でロードされます.
ES 6モジュール仕様

// import   

import BaseTask, {
      TaskType } from "./BaseTask";

// export   

export {
      BaseTask };

この例では、importローディングモジュールを使用して、export出力モジュールを使用する.
ES 6モジュールの特徴は以下の通りです.

は、importローディングとexport出力を使用する.

モジュールは一回だけロードされます.

で導出されたモジュールは変数参照であるため、メモリ内で共有することができる.

現在はほとんどの先端項目でES 6モジュールを使用していますが、ES 6モジュール化の目的はコンパイル段階でモジュール間依存関係を確定するため、コンパイル時にBabel、Webpackなどを使って依存関係ツリーを構築する必要があります.
このほか、ES 6は各ブラウザでの互換性の違いが大きいので、BabalコンパイルやWebpackをパッケージ化する必要があります.このプロセスは先端コード構築といいます.

JavaScriptの部分は12月27日に作業します.