前端模块化详解(完整版) about blog

[jessiezhudev]

跟着代码敲了一遍并做了个小总结😋，难得有这么通俗易懂并且一步步带着敲代码并讲解的关于模块化的文章。
为什么有前端模块化：
前端代码的日益增多，避免命名冲突，更高复用性，更好的分离，按需加载。
模块化的历史：全局function模式（命名冲突） -> namespace,简单对象封装（外部可以直接修改内部数据）->IIFE问题（依赖）->IIFE增强（引入依赖），现代模块化的基石。

模块化规范的必要性：引入多个<script>出现的问题->请求过多，依赖模糊，难以维护。

CommonJS：
特点：同步加载，适用于服务端，加载一次缓存结果。浏览器端需要编译后执行。
语法：
暴露模块：module.exports = value或exports.value = value
引入模块：require(xxx)

AMD:
特点：异步加载，允许指定回调函数，适用于浏览器端。
语法：
定义：
define(['module1','module2'], function(m1, m2){
return 模块
})
使用：
require(['module1', 'module2'], function(m1, m2){
使用m1, m2
})
借助工具：RequireJS

CMD:
特点：用于浏览器端，模块加载是异步的，模块使用时才会加载执行。结合了CommonJS和AMD规范的特点。
定义暴露模块：
define(function(require, exports, module){
//引入依赖模块(同步)
var module2 = require('./module2')
//引入依赖模块(异步)
require.async('./module3', function (m3) {
})
//暴露模块
exports.xxx = value
})
引入模块：
define(function (require) {
var m1 = require('./module1')
var m4 = require('./module4')
m1.show()
m4.show()
})

借助工具：sea.js

ES6模块化：
特点：编译时确定依赖关系。

[lijingxiang888]

赞一个

[ljianshu]

赞一个

感谢

[likwotsing]

写的非常好，谢谢分享！
注：“ 引入多个<script>后出现出现问题”

[ljianshu]

写的非常好，谢谢分享！
注：“ 引入多个<script>后出现出现问题”

十分感谢，多多关注我的文章

[lubyxu]

是不是叫ES Module会比较好一点。。。

[ljianshu]

是不是叫ES Module会比较好一点。。。

ES6 Module？可以啊

[jessiezhudev]

就是我对于运行时和编译时这个概念还是不太清晰。

[ljianshu]

就是我对于运行时和编译时这个概念还是不太清晰。

很认真的妹子，CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。这句话是阮大神的话，你可以看es6模块，有详细介绍！欢迎加入我们的微信交流群，欢迎加我微信qqlcx55

[sumshare]

写的很好，有空可以搭建一个hexo站点，做一些分类，可以参考

[ljianshu]

写的很好，有空可以搭建一个hexo站点，做一些分类，可以参考

谢谢你的建议，最近打算先弄个vuepress

[ideazhao]

作为一枚转型中的前端，之前一直没明白项目中为什么要那样写代码，今天碰巧看到这篇，才知道原来是按照CMD规范，这层窗户纸算是捅破了，可以往里继续进攻了，感谢作者用心分享！~

[ljianshu]

作为一枚转型中的前端，之前一直没明白项目中为什么要那样写代码，今天碰巧看到这篇，才知道原来是按照CMD规范，这层窗户纸算是捅破了，可以往里继续进攻了，感谢作者用心分享！~

哈哈，有帮助就好，欢迎关注我的公众号：前端工匠

[273539918]

请问下， AMD和CMD的输出是值的引用还是值的拷贝呢？

[GitHub-Haisheng]

跟着巧了一遍 对之前不熟悉只是稀里糊涂用的东西 理解加深一步。

[mask2012]

好文！我们需要这样的文章

[dingo826]

反复看了两次，这个CMD 与 AMD看清楚与理解了，CMD其实就是AMD 与 commonJS优点的集合的升级版本……

[eric331]

你好，"CommonJS模块的加载机制是，输入的是被输出的值的拷贝。"关于这点有些疑问。

// index.js
const lib = require('./lib');
setTimeout(() => {
lib.val = 2;
}, 1000);
setInterval(() => {
console.log(lib, ' in index'); // 输出依次为0，2，4
}, 1000);

// lib.js
let val = 0;
setTimeout(() => {
module.exports.val = 4;
}, 4000);
setInterval(() => {
console.log(module.exports, " in lib"); // // 输出依次为0，2，4
}, 1000);
module.exports = {
val
};

两个文件中的val值可以相互影响，说明输入输出应该指向了同一个对象实例。
代码链接：https://stackblitz.com/edit/node-gudmqb?file=index.js