前端模块化概览
amd
require.js，
依赖前置，预先下载，立即执行
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script data-main="main.js" src="./require.js"></script>
</body>
</html>
main.js
// 入口模块
require(["utils"], function(utils) {
const res = utils.add(1,2);
console.log(res);
});
utils.js
// 工具模块
// require定义模块不需要return 而define需要。require定义的js别人引用不了，而define的可以（return了）
define(function () {
return {
add(x, y) {
return x + y;
}
}
})
cmd
sea.js，
依赖就近，预先下载，延迟执行
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./sea.js"></script>
<script>
seajs.use("./main.js")
</script>
</body>
</html>
main.js
// 入口模块
define(function(require, exports, module) {
const utils = require('./utils');
const res = utils.add(1,2);
console.log(res);
})
utils.js
// 工具模块
define(function(require, exports, module) {
return {
add(x, y) {
return x + y;
}
}
})
amd和cmd区别
依赖前置 vs 依赖就近
// amd
define("module", ["utils"], function(utils) {
setTimeout(()=>{
console.log(utils);
},3000)
});
// cmd
define(function(require, exports, module) {
setTimeout(()=>{
const utils = require('./utils.js');
console.log(utils);
},3000)
})
// 以上代码可以看到，cmd是什么时候用，什么时候引入进来。
// 而amd是预先一开始就要声明好（注入进来）
预先下载
如上代码，无论amd还是cmd，都是页面载入就开始请求所有的依赖，哪怕是amd，看起来像3s后请求，实际上，仍然是立马请求。这里和webpack的懒加载刚好对立
立即执行vs延迟执行
还是如上代码，utils的模块打印一句话的情况下，amd会立刻输出，即请求完成就执行模块内代码。
相比之下，cmd，只有在你require的时候，才会去执行模块内部代码
贴上utils代码如下
define(function(require, exports, module) {
console.log('utils');
return {
uname:'utilsModule'
}
})
esModule
前两者和esModule最大的不同是，一个是官方，一个是野生。哈哈，开个玩笑
最大的区别是：前者是动态引入，后者是静态编译。
参考：
https://zhaoda.net/webpack-handbook/module-system.html
https://blog.csdn.net/aitangyong/article/details/49280923
