# 模块化开发概述
————当下最重要的前端开发模式
- 提高开发效率
- 减少开发成本
# 模块化的演变过程
- stage1 文件划分方式
将一个文件设定为一个模块,里面存放模块内部需要的变量和方法
缺点: 全局引用,污染全局作用域
模块外部都可以调用和修改模块内的成员
早期模块化完全依靠约定
- stage2 命名空间方式
在第一个阶段基础之上,将每一个模块包裹成一个全局对象的方式
缺点: 模块成员仍然可以在外部调用和修改
- stage3 IIFE(立即实行函数)
为模块提供私有空间,将某块放入一个函数,将需要暴露的变量和方法挂载到全局
优点: 实现私有成员
# 模块化规范的出现
## CommonJS 规范(Node.js)
- 一个文件就是一个模块
- 每个模块都有单独的作用域
- 通过 module.exports 导出成员
- 通过 require 函数载入模块
CommonJS 是以同步模式加载模块
如果直接用浏览器来使用 CommonJS 的话,加载时间过长,效率缓慢。
## AMD(Asynchronous Module Definition)
————异步的模块规范(Require.js)
- 定义
define('moduleName',['jquery','./moduleOther'],function(\$,moduleOther){
return {
start:function(){
console.log('这就是我的模块化');
}
}
});
- 加载
require(['./moduleName'],function(moduleName){
moduleName.start()
})
AMD 使用起来相对复杂,模块 JS 文件请求频繁。
## Ses.js + CMD 淘宝推出的模块化的库(类似 CommonJs 规范)
# 模块化标准规范
————模块化的最佳实现
CommonJS in Node.js
ES Modules in Browers