摘要：模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。將一個復(fù)雜的系統(tǒng)分解為多個模塊以方便編碼。順手寫一個省略省略實現(xiàn)此時的對應(yīng)的形式解析省略執(zhí)行兼容，模塊化語法。

模塊化主要是用來抽離公共代碼，隔離作用域，避免變量沖突等。將一個復(fù)雜的系統(tǒng)分解為多個模塊以方便編碼。

會講述以下內(nèi)容

CommonJS

AMD 及 核心原理實現(xiàn)

CMD 及 核心原理實現(xiàn)

UMD 及 源碼解析

ES6 Module

webpack打包策略

CommonJS

同步加載

CommonJS API是以在瀏覽器環(huán)境之外構(gòu)建 JS 生態(tài)系統(tǒng)為目標(biāo)而產(chǎn)生的項目

如果沒有寫后綴名Node會嘗試為文件名添加.js、.json、.node后再搜索。

.js件會以文本格式的JavaScript腳本文件解析，.json文件會以JSON格式的文本文件解析，.node文件會以編譯后的二進制文件解析。

AMD

異步加載（對象）

"Asynchronous Module Definition"（異步模塊定義），是由RequireJS提出的

AMD核心實現(xiàn)

  function require (url, callback) {
    // url可以換成List，然后遍歷；
    var $script = document.createElement("script");
    $script.src = url;

    // 利用onload回調(diào)，實現(xiàn)依賴加載
    $script.onload = function (e) {
      // 省略callback 檢測
      callback();
    }
    document.body.appendChild($script);
  }

CMD

按需加載

由玉伯提出的（seajs），按需解析加載模塊（代價挺大的），需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K

CMD核心實現(xiàn)

  // ajax，怕忘了原生ajax怎么寫。順手寫一個

  function myAjax (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send();

    xhr.onreadystatechange = function () {
      if (request.readyState === 4) {
          if (request.status === 200) {
              return callback(request.responseText);
          } else {
              // 省略...
          }
      } else {
        // 省略...
      }
    }
  }

  // 實現(xiàn)
  function require(url) {
    myAjax(url, function(res) {
      // 此時 res 的對應(yīng)JS的 String形式
      // 解析 省略
      // 執(zhí)行
      eval(res);
    });
  }

UMD

兼容AMD，CommonJS 模塊化語法。

UMD源碼解析

  (function (root, factory) {

    // 判斷是否支持AMD（define是否存在）
    if (typeof define === "function" && define.amd) {
        define(["b"], factory);

    // 判斷是否支持NodeJS模塊格式（exports是否存在）
    } else if (typeof module === "object" && module.exports) {
        module.exports = factory(require("b"));

    // 前兩個都不存在，則將模塊公開到全局（window或global）
    } else {
        root.returnExports = factory(root.b);
    }
  } (this, function (b) {
      // ...
  }));

import

加載引用

編譯時加載（靜態(tài)執(zhí)行）。

加載的是引用

不能處于代碼塊中

為了實現(xiàn)編譯時加載

提案表示可以用 import()使用時加載

不能使用表達式和變量 等運行時加載的語法

同上

webpack打包策略

import會被編譯成 require/exports （CommonJS規(guī)范）

1. 直接引入

import xxx.js或者import xxx.css會像添加