前端模块化
把一个复杂系统分解到多个模块以方便编码
- 解决命名冲突,两个库的名称可能相同
- 合理的管理依赖和版本
- 方便控制依赖加载顺序
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("<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 优点
- 可在不转换代码的情况下直接在浏览器运行 ( 这点和 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);
}
