モジュール化の規範と規範化の問題

モジュール化詳細まとめ
ECMAScript 2015以降、元のjsはECMAScript Moduleと呼ばれるモジュール化概念を発表しました.今主流のブラウザーはすべてとても良い支持があります.
モジュール化の役割は複雑な問題を相対的に独立したモジュールに分解するという設計が可能です.

ESM,

,

モジュール化の核心

独立モジュールのスコープの一つのファイルはモジュールです.独立したスコープを持っています.そして導き出すモジュールは標準的に の下にあります.以前の記事にはまとめがあります.小さな手で厳密モードと非厳格モードの違いを見てみてください.
1、ESM
前に書いたブログでモジュールの導入文法について導出する前に、NodejsがまとめたES 6のモジュール化を学びます.
モジュールの導入と導出は、関数の定義と呼び出しと同様であり、異なるところで異なる定義と呼び出しルールがある.
エクスポート: 文を使ってモジュール内部データをエクスポートします.
インポート:2つのモードで外部モジュールデータを導入します.

静的導入export

動的導入

キーワードimportは、関数を呼び出すように、動的にモジュールを導入することができる.このように呼び出したら、プロミセオブジェクトに戻ります.

type="module"のスクリプトタグに依存する必要はありません.

, import ，

//b.js
//   b.js      
export default "  b      ";

 //a.js
 //     
 //   b.js       a.js   
 import b from './b.js'; 
 console.log(b);

 //     
 let b2 = import ("./b.js");
 console.log(b2); 

 //          (         )
 document.onclick = async function(){
    let b3 = await import ("./b.js");
    console.log(b3);
    //            Module {Symbol(Symbol.toStringTag): "Module"}
 }

 <!-- html   -->
 <!--      script    js  ，    type="module" ，       ，     -->
 <script src="./js/a.js" type="module"></script>

2、Common JS仕様
以前のフロントエンドはモジュール化に対して規範がなく、かえってサービスエンドの応用に偏ってより強い需要があり、 import() ， default 規範はサービスエンドのモジュール化規範に偏っています.NodeJSはこの仕様を採用しています.
モジュール内部データの導出は、CommonJSまたはmodule.exportsオブジェクトを介してモジュール内部データを導出する.

// a.js
let a = 1;
let b = 2;
//    
module.exports = {
  x: a,
  y: b
}
//     
exports.x = a;
exports.y = b;

外部モジュールデータを導入するexports関数で外部モジュールデータを導入する

// b.js
//     
let a = require('./a.js');
a.x;
a.y;

3、AMD
CommunJSはいくつかの特性(ファイルシステムに基づいて、同期ローディング)を規範化しています.前に述べたように、主にサーバー側に適用されています.ブラウザ側には適用されないので、ブラウザ側の規範AMD(Aynchronous Module Definition)を別途定義しています.
ブラウザはこの規格のコードを具体的に実現していないので、第三者のプラグインライブラリを通じて解決します.requireJSプラグインライブラリコードrequire.min.jsをダウンロードします.
define法により、値を返していないモジュールを定義し、この方法のコールバック関数パラメータにより、独立した作用領域パラメータ1を生成する.導入された経路(存在配列において、複数の導入が可能)パラメータ2:コールバック関数、関数内のパラメータは、導入されたデータである.

// a.js
/*
  define         ，        ，           (    )        
     1：     （     ，        ）
     2：    ，            
*/

//         
//                 
//   b.js  
//     './js/b.js'
define(['./js/b.js'], function (b) {
    console.log(b);
});

// b.js
//         
//   return        
//   b.js  
define(function(){
    let val = "  AMD      ";
    return val;
});

<!--test.html -->
<script src="./js/require.min.js" data-main="./js/a.js"></script>

4、UMD
UMDは汎用モジュール定義仕様(Universal Module Definition)と呼ばれる.厳密には、requireはモジュール仕様のセットではなく、UMD、CommonJS、AMD、CMDの違いを処理するために主に使用され、モジュールコードが異なるモジュール環境下で正常に移動できるようにする.

//       ： (       )(         );
//(function(){
//  
//})(); 

(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        // Node, CommonJS-like
        module.exports = factory;
    }
    else if (typeof define === "function" && define.amd) {
        // AMD      
        define(function () {
            return factory;
        });
    }
    else {
        window.rmb = factory;
    }

})(function (val) {
    return "￥" + (val / 100).toFixed(2);
});