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

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

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

CommonJS

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

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

UMD 及 源碼解析

ES6 Module

webpack打包策略

CommonJS

同步加載

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

如果沒(méi)有寫(xiě)后綴名Node會(huì)嘗試為文件名添加.js、.json、.node后再搜索。

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

AMD

異步加載（對(duì)象）

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

AMD核心實(shí)現(xiàn)

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

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

CMD

按需加載

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

CMD核心實(shí)現(xiàn)

  // ajax，怕忘了原生ajax怎么寫(xiě)。順手寫(xiě)一個(gè)

  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 {
        // 省略...
      }
    }
  }

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

UMD

兼容AMD，CommonJS 模塊化語(yǔ)法。

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"));

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

import

加載引用

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

加載的是引用

不能處于代碼塊中

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

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

不能使用表達(dá)式和變量 等運(yùn)行時(shí)加載的語(yǔ)法

同上

webpack打包策略

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

1. 直接引入

import xxx.js或者import xxx.css會(huì)像添加