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

13171 ワード

モジュール化詳細まとめ
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はモジュール仕様のセットではなく、UMDCommonJSAMDCMDの違いを処理するために主に使用され、モジュールコードが異なるモジュール環境下で正常に移動できるようにする.
    //       : (       )(         );
    //(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);
    });