Commonjs

什麼是 CommonJs

1. CommonJs 是 js 模塊化的社區規範

模塊化產生的原因

1. 隨著前端頁面複雜度的提升，依賴的第三方庫的增加，導致的 js 依賴混亂，全局變數的污染，和命名衝突
2. 單個 js 文件內容太多，導致了維護困難，拆分成為多個文件又會發生第一點描述的問題
3. v8 引擎的出現，讓 js 有了媲美編譯型語言的運行速度，大大激勵了前端開發者

CommonJS 的使用環境

1. nodejs 實現了 CommonJS 模塊化規範

CommonJs 有哪些規定

1. 每一個文件就是一個模塊
2. 模塊中的變數和函數不會污染全局（解決了全局污染和命名衝突）
3. 提供給外部使用的內容需要導出
4. 使用其他模塊的內容需要導入 （模塊的導入和導出共同解決了 js 依賴混亂的問題）
5. 模塊不會重覆載入，模塊第一次導入後會將第一次導入的結果緩存，下次導入時，直接使用緩存的結構
6. 省略一些細碎的內容在下麵代碼中提及.....

commonJS 語法

1. 導入

//這是導入一個模塊，module.js;commonjs中規定require導入模塊時可以省略.js尾碼
const module1 = require("./module1");
//如果沒有尋找到dir.js文件，而發現了dir路徑，則尋找dir路徑下package.json 的main屬性指定的文件
//如果package.json未指定路徑，則觸發預設規則 依次查找查找 index.js index.json
const module2 = require("./dir");
//如果require不是相對路徑，則會去node_module中尋找該模塊，重覆module1 和module2 的步驟
//如果沒有node_modules 或node_modules 中不存在模塊則繼續向上級目錄尋找node_modules,直到根目錄
const module3 = require("module3");

2. 導出

module.exports = {
  //這裡輸入導出的內容
};

//這也是導出
exports.a = "a";

//註意 module.exports導出和exports[屬性名]導出不可共存
//module.exports會覆蓋掉exports導出的內容

簡易實現類 nodejs 模塊化環境

const fs = require("fs");
const Path = require("path");
const vm = require("vm");
const ModuleStack = [];

function isRootDirectory(path) {
  // Windows 根路徑
  const windowsRootDirectory = /^[a-zA-Z]:\\$/;
  // Unix/Linux 根路徑/
  const unixRootDirectory = /^\//;

  return windowsRootDirectory.test(path) || unixRootDirectory.test(path);
}

function isRelativeDirectory(path) {
  //匹配 ../ 或者 ./開頭的路徑
  const relativeDirectory = /^(\.\.\/|\.\/).+/;
  return relativeDirectory.test(path);
}
// 計算node_modules路徑
let computePaths = (dirname) => {
  let paths = [];
  let path = dirname;
  let node_modules = "./node_modules";
  while (
    !isRootDirectory(path) ||
    !paths.includes(Path.resolve(path, node_modules))
  ) {
    paths.push(Path.resolve(path, node_modules));
    path = Path.resolve(path, "../");
  }
  return paths;
};

function myRequire(path) {
  let truelyPath;
  if (isRelativeDirectory(path)) {
    // 獲取真實路徑
    truelyPath = Path.resolve(__dirname, path);
  } else {
    //獲取可能的node_modules路徑
    let paths = computePaths(__dirname);
    for (const item of paths) {
      truelyPath = Path.resolve(item, path);
      if (fs.existsSync(truelyPath)) {
        break;
      }
    }
    if (!truelyPath) {
      throw new Error("Can't find module " + path);
    }
  }
  // 如果緩存中有，直接返回
  if (myRequire.cache[truelyPath]) {
    return myRequire.cache[truelyPath].exports;
  }
  // 讀取文件內容
  const content = fs.readFileSync(path, "utf-8");
  // 包裝代碼
  const wrapper = [
    "(function (exports, require, module, __filename, __dirname) { \n",
    "\n})",
  ];
  // 拼接代碼
  const wrapperContent = wrapper[0] + content + wrapper[1];

  // 獲取文件路徑和文件名
  let dirname = Path.dirname(truelyPath);
  let filename = truelyPath;
  let parentModule =
    ModuleStack.length > 0 ? ModuleStack[ModuleStack.length - 1] : null;
  // 模塊對象
  const Module = {
    id: Object.keys(myRequire.cache).length > 0 ? filename : ".",
    path: dirname,
    exports: {},
    parent: parentModule,
    filename: filename,
    loaded: false,
    children: [],
    paths: computePaths(dirname),
  };
  if (parentModule) {
    parentModule.children.push(Module);
  }
  //模塊入棧
  ModuleStack.push(Module);
  // 需要運行的函數
  const moduleScope = vm.runInThisContext(wrapperContent);
  // 運行代碼
  moduleScope.call(
    Module.exports,
    Module.exports,
    myRequire,
    Module,
    filename,
    dirname
  );
  // 標記模塊已載入
  Module.loaded = true;
  //模塊出棧
  ModuleStack.pop();
  // 緩存模塊
  myRequire.cache[truelyPath] = Module;
  return Module.exports;
}

myRequire.cache = Object.create(null);

模塊化的意義

1. 解決在模塊化出現之前的js依賴混亂，全局污染命名衝突的問題
2. 模塊化的出現讓js代碼可以拆分為多個模塊共同協作，單個js文件過長的問題，降低了維護難度。
3. 模塊化的出現讓js開發大型項目出現了可能

ps：當前內容為學習commonjs理解，內容正確性請謹慎甄別。