前端模塊化

把一個復雜系統(tǒng)分解到多個模塊以方便編碼

• 解決命名沖突,兩個庫的名稱可能相同
• 合理的管理依賴和版本
• 方便控制依賴加載順序

commonjs javascript 模塊化規(guī)范 核心思路通過 require 方法同步加載其他依賴模塊通過 module.exports 導出需要暴露的接口
node 就實現(xiàn)了 commonjs

// 由于是node所以我們可以通過fs模塊來實現(xiàn)

const fs = require("fs");

function require(moduleName) {
  let content = fs.readFilesync(moduleName, "utf8"); //指定字符串編碼格式
  //前面的都是參數(shù) 最后一個是函數(shù)的內(nèi)容
  let fn = new Function(
    "exports",
    "module",
    "require",
    "__dirname",
    "__filename",
    content + "\n return module.exports"
  );
  let module = {
    exports: {},
  };
  return fn(module.exports, module, require, __dirname, __filename);
}

  // 相當于我們構建了一個函數(shù)
  function (exports,module,require,__dirname,__filename){
    content // 里面的 module.exports = xx
    return module.exports // 我們把module.exports返回了
  }

Amd

也是一種 js 模塊化規(guī)范與 CommonJS 最大不同在與異步加載方式，加載 Amd 主要針對瀏覽器環(huán)境模塊化問題 代表性的實現(xiàn)是 requirejs

在實現(xiàn) Amd 之前 js 要怎么引入 js 文件

//1
document.write("<script src='xxx.js'></script>");
//2
var ele = document.createElement("script");
ele.setAttribute("type", "text/javascript");
ele.setAttribute("src", "xxx.js");
document.body.appendChild(ele);

Amd 優(yōu)點

• 可在不轉換代碼的情況下直接在瀏覽器運行 ( 這點和 script 標簽很像 )
• 可加載多個依賴
• 代碼可運行在瀏覽器和 node 環(huán)境下

// 使用define聲明模塊 通過require使用模塊
// 參數(shù)一為名字 參數(shù)二為依賴 參數(shù)三 定義的值
define("aaa", [], function () {
  return "111";
});

define("bbb", [], function () {
  return "222";
});

require(["aaa", "bbb"], function (aaa, bbb) {
  console.log(aaa, bbb);
});

let factories = {};
// 名字 依賴 工廠函數(shù)
function define(moduleName, dependencies, factory) {
  factories[moduleName] = factory;
}
function require(mods, callback) {
  mods.map((mod) => {
    return factories[mod]();
  });
  // callback(...mods);
  callback(null, mods);
}

最后還有 es6 的模塊化 import