模块化开发

Performance

 2019/11/07 

模块化的好处

解决命名冲突、提高代码的复用性和可维护性

模块化的实现方式

立即执行函数

在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题。少用了

(function(globalVariable){
   globalVariable.test = function() {}
   // ... 声明各种变量、函数都不会污染全局作用域
})(globalVariable)

AMD 和 CMD

其实这两种实现方式也已经很少见到

CommonJS

Node.js，webpack
每个文件是一个模块，有自己的作用域；在模块内部module变量代表模块本身；module.exports属性代表模块的对外接口（通过写module.exports的属性/其本身来导出数据，require的时候是得到module，用module的属性/其本身来获取数据）

模块中写exports会默认等于module.exports，也可以用exports的属性（不能是本身，会重写exports）来导出数据

ES Module

ES6模块功能主要由两个命令构成：import和export。import命令用于输入其他模块提供的功能。export命令用于规范模块的对外接口

// 输出变量
export var name = 'weiqinl'
export var year = '2018'
 
// 输出一个对象（推荐）
var name = 'weiqinl'
var year = '2018'
export { name, year}
 
 
// 输出函数或类
export function add(a, b) {
return a + b;
}
 
// export default 命令
export default function() {
console.log('foo')
}
 
// 正常命令
import { name, year } from './module.js' //后缀.js不能省略
 
// 如果遇到export default命令导出的模块
import ed from './export-default.js'

原文作者：Jacleklm

原文链接：http://jacleklm.github.io/2019/11/07/%E6%A8%A1%E5%9D%97%E5%8C%96/

发表日期：November 7th 2019, 4:50:21 pm

更新日期：September 17th 2023, 10:00:22 pm

Next Post

GoWhere项目总结
Previous Post

性能优化

CATALOG

1. 模块化的好处
2. 模块化的实现方式