前端模块化

前端模块化

把一个复杂系统分解到多个模块以方便编码

• 解决命名冲突,两个库的名称可能相同
• 合理的管理依赖和版本
• 方便控制依赖加载顺序

commonjs javascript 模块化规范 核心思路通过 require 方法同步加载其他依赖模块通过 module.exports 导出需要暴露的接口
node 就实现了 commonjs

// 由于是node所以我们可以通过fs模块来实现

const fs = require("fs");

function require(moduleName) {
  let content = fs.readFilesync(moduleName, "utf8"); //指定字符串编码格式
  //前面的都是参数 最后一个是函数的内容
  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);
}

  // 相当于我们构建了一个函数
  function (exports,module,require,__dirname,__filename){
    content // 里面的 module.exports = xx
    return module.exports // 我们把module.exports返回了
  }

Amd

也是一种 js 模块化规范与 CommonJS 最大不同在与异步加载方式，加载 Amd 主要针对浏览器环境模块化问题 代表性的实现是 requirejs

在实现 Amd 之前 js 要怎么引入 js 文件

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

Amd 优点

• 可在不转换代码的情况下直接在浏览器运行 ( 这点和 script 标签很像 )
• 可加载多个依赖
• 代码可运行在浏览器和 node 环境下

// 使用define声明模块 通过require使用模块
// 参数一为名字 参数二为依赖 参数三 定义的值
define("aaa", [], function () {
  return "111";
});

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

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

let factories = {};
// 名字 依赖 工厂函数
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