模块化是将JavaScript拆分为可按需导入的单独模块。目前有4种模块化的暴露和饮用方式,下面分别进行介绍:
CommonJs
nodejs,Browserify(js打包工具) 均支持CommonJs规范。
使用module.exports或者exports暴露,使用require引入。
在nodejs里,module作为全局变量,module是一个对象,结构类似于{id:'',exports:{}}
,exports就是module.exports。
// module导出
module.exports = {
func: () => {
console.log('func');
},
};
// exports导出
exports.func= () => {
console.log('func');
}
引入如下,可以通过模块或者结构引入
// 模块引入
const b = require('./b');
b.func();
// 解构赋值引入
const { func } = require('./b');
func();
输出
AMD
AMD是同步的加载模块,等所需模块都加载完才进行下一步。
导出用define,导入用require,并且需要加载require.js(不超过20k)
// 导出func
define(['module'], function (module) {
module.func = () => {
console.log('AMD func');
};
return module;
});
在mian.js里引用func,在加载完a模块再去执行按钮的点击事件
require(['a'], function (a) {
document.getElementById('btn').addEventListener('click', () => {
a.func();
});
});
html如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AMD引入方式</title>
<script src="./require.js" data-main="./main.js"></script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
输出:
此方式写法不是很方便,但是在刚开始模块化js时发挥出了明显的模块化优势。
CMD
CMD和AMD类似,和AMD不同的是,AMD主张所需模块一次性加载完,CMD主张按需加载,sea.js就是以CMD为规范的js模块化框架
// 导出func
define(['module'], function (module) {
module.func = () => {
console.log('CMD func');
};
return module;
});
在main.js引用
define(function (require, exports, module) {
document.getElementById('btn').addEventListener('click', () => {
// 使用a模块时再加载(和AMD不同)
var a = require('a');
a.func();
});
});
html,和AMD不同的时,需要使用seajs.use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CMD引入方式</title>
<script src="./sea.js"></script>
<script>
seajs.use('./main.js');
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
输出:
通过seajs的git更新时间
可以看到5年没有维护了,时代的见证者。
ES6 Module
es6 module是我们开发过程中最常用的导出导入方式了,目前浏览器端并不支持此方式,需要借助babel插件将es6转换成es5的CommonJs方式,Browserify再将CommonJs编译成浏览器能识别的语言。
开发时常用到3种导入导出:单个,整体和默认
- 单个导出导入:
// 单个导出
export function func() {
console.log('es6 func');
}
// 单个引入(解构赋值导入)
import { func } from './a.js';
func();
输出:
- 整体导出导入:
function func() {
console.log('es6 func');
}
// 批量导出
export { func };
// 批量导入(解构赋值导入)
import { func } from './a.js';
func();
输出:
- 默认导出导入
function func() {
console.log('es6 func');
}
// 默认导出
export default {
func,
};
// 默认导入(变量导入)
import a from './a.js';
a.func();
输出:
注意: 单个和整体的导入,只能通过解构赋值导入,无法通过变量导入,默认导入,只能通过变量导入,无法通过解构赋值导入!