开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情
🎈大家好，我是
李乐一，新人初来乍到，请多多关照~📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~
写在前面
我们在前端开发中常见的模块化解决方案有CommonJS，AMD，CMD等。记录一下，温故而知新。
CommonJS
- 常用于：
服务器端，node，webpack - 特点：
同步/运行时加载，磁盘读取速度快
📝举个栗子
// 导出：通过module.exports或exports来暴露模块
module.exports = {
attr1,
attr2
}
exports.attr = xx
注意
不能直接写exports = xxx，这样是无效的，因为更改了exports的地址
而 exports 是 module.exports 的引用指向的是同一个内存，模块最后导出的是module.exports
// 引用：require('x')
const xx = require('xx') // 整体重命名
const { attr } = require('xx') // 解构某一个导出
AMD
CommonJs的浏览器端实现异步加载：因为面向浏览器端，为了不影响渲染肯定是异步加载依赖前置：所有的依赖必须写在最初的依赖数组中，速度快，但是会浪费资源，预先加载了所有依赖
📝举个栗子
// 导出：通过define来定义模块
// 如果该模块还依赖其他模块，则将模块的路径填入第一个参数的数组中
define(['x'], function(x){
function foo(){
return x.fn() + 1
}
return {
foo: foo
};
});
// 引用
require(['a'], function (a){
a.foo()
});
CMD
根据CommonJs和AMD实现，优化了加载方式异步加载按需加载/依赖就近：用到了再引用依赖，方便了开发，缺点是速度和性能较差
📝举个栗子
// 导出：通过define来定义模块
// 如果该模块还依赖其他模块，在用到的地方引用即可
define(function(){
function info(){
var x = require('x')
return x.fn() + 1
}
return {
info: info
};
});
// 引用
var x = require('a');
a.info();
ES module
目前浏览器端的默认标准静态编译：在编译的时候就能确定依赖关系，以及输入和输出的变量
📝举个栗子
// 导出：通过export 或 export default 输出模块
// 边声明，边导出
export var m = 1;
export function m() {};
export class M {};
// 导出一个接口 export {}，本质上是引用集合，最常用的导出方法
export {
attr1,
attr2
}
// 默认导出
export default fn
// 2.引用
import { x } from 'demo.js' // 导出模块中对应的值，必须知道值在模块中导出时的名字
import { x as y } from 'demo.js' // 改名字
import x from 'demo.js' // 默认导出的引用方式
注意
export default在同一个文件中只能存在一个（一个模块只能有一个默认输出）- 一个模块中可以同时使用
export default和export
// 模块 demo.js
var info = {
name: 'name',
age: 18
}
export default info
export var name= '李乐一'
export var age = 18
// 引用
import person, {name, age as myAge} from 'demo.js'
console.log(person); // { name: 'name', age: 18 }
console.log(name+ '=' + myAge); // 李乐一==18
