JS模块化（commonjs）
2019-02-09 本文已影响0人
原来哥哥是万家灯火
模块化的意义：将代码按拆分成一个个模块，按需加载模块。提高代码复用率，加速开发效率，有利用代码逻辑清晰。
有5中方式实现：CommonJS、AMD、CMD、UMD、es6（import\export）
commonjs是同步的，用于服务器端，也就是node程序。
amd、cmd用于浏览器端，是异步的。
umd是commonjs和amd的结合体，可用于服务端和客户端
es6是在语言标准的层面上实现，可用于服务器和浏览器
commonjs 实现原理、加载规则、缓存、用于浏览器
一、实现原理
// add.js
function addFn(a, b) {
return a + b;
}
module.exports = addFn;
以上是模块add
// app.js
let add = require('./add');
let result = add(5, 5);
console.log(result) ;
以上是app模块。
app模块是如何实现另外一个模块的调用的呢？
在require('./add')调用时，服务端node程序就将原add模块的所有代码加上一些 “料” 后执行
let module = { id: 'add', exports: {}, parent: ... };
// 根据一定的规则生成一个对象module
let exports = module.exports;
// 变量exports指向module.exports，所以直接对exports进行赋值，会导致变量exports不在指向module.exports，从而使对外暴露的数据丢失。
(function (module, exports) {
function addFn(a, b) {
return a + b;
}
module.exports = addFn;
// 或 exports.addFn = addFn;
})(module，exports);
二、加载规则
require('add'); // 从node核心模块加载
require('./add'); // 相对路径
require('/home/add') // 绝对路径，不知道怎么用
三、缓存
// anotherApp.js
let add = require('./add');
add.cacheTest = 'on purpose'; // 修改add的module.exports
console.log('anotherApp：', add) ;
let anotherApp = require('./anotuerApp');
// delete require.cache[require.resolve('./add')];
// 可用以删除缓存
let add = require('./add'); // 并不会重新去加载、包装、执行add.js，而是从缓存结果中拿出结果来
console.log('app：', add) ;
结果：
缓存
四、用于浏览器
使用commonjs规范的程序，无法在浏览器正确运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./app.js"></script>
</body>
</html>
浏览器会出现如下报错：
运行结果
可用browserify进行编译：
npm i browserify -D
browserify app.js > index.js
浏览器运行结果
