JS 模块化
- 什么是模块化？
将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
- 模块化的好处
1.提高复用性
2.高可维护
3.更好的分离，按需加载
4.避免命名冲突
- 模块化的缺点
1.增加请求
2.依赖过多
3.难以维护
CommonJS
- 说明
在服务器端: 模块的加载是运行时同步加载的
在浏览器端: 模块需要提前编译打包处理 （依赖Browserify）
- 基本语法
## 暴露
//文件中会生成module对象,exports === module.exports
//暴露的模块到底是什么? 暴露的本质是 exports
module.exports = value （单个暴露）
exports.xxx = value （多出暴露）
## 引入 require
//第三方模块
require('path')
//自定义模块:
require('./js/modules/module1')
注意：后缀js 不需要写 写了也可以
- 实现
在服务器端实现：Node.js
浏览器端实现： Browserify （也称为CommonJS在浏览器端的实现）
通过browserify 编译输出
browserify js/src/app.js -o js/dist/bundle.js
在hmtl里面引入bundle.js 即可
tips：不需要新建dist文件夹 ,browserify会帮助我们创建
区别：
Node.js运行时动态加载模块(同步)
Browserify是在转译(编译)时就会加载打包(合并)require的模块
AMD 异步加载
- 说明
Asynchronous Module Definition(异步模块定义)
专门用于浏览器端, 模块的加载是异步的 （依赖于require.js）
- 语法
## 暴露 define
//定义没有依赖的模块
define(function(){
return 模块
})
//定义有依赖的模块
define(['module1', 'module2'], function(m1, m2){
return 模块
})
## 引入 require
require(['module1', 'module2'], function(m1, m2){
使用m1/m2
})
- 实现
依赖于require.js
http://www.requirejs.cn/
- 配置
## html
<script src="js/libs/require.js" data-main="js/main.js"></script>
## main.js
RequireJS 需要配置config
require.config({
//基本路径
baseUrl : 'js/',
//标识名称与路径的映射
paths : {
'模块1' : 'modules/模块1', //配置中引入模块 不可以写后缀
'模块2' : 'modules/模块2',
'angular' : 'libs/angular',
'angular-messages' : 'libs/angular-messages'
},
//非AMD的模块
shim : {
'angular' : {
exports : 'angular'
},
'angular-messages' : {
exports : 'angular-messages',
deps : ['angular']
}
}
})
//配置中引入模块 不能写后缀.js 会报错
CMD
- 说明
Common Module Definition(通用模块定义)
专门用于浏览器端, 模块的加载是异步的
模块使用时才会加载执行（依赖于 Sea.js）
- 语法
## 暴露模块
//定义有依赖的模块
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
- 总结
区别：
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。
CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。
看代码：
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写 （用的时候再去引入）
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) {
// 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...})
ESM(ES6 Module)
- 说明
用于浏览器端
依赖模块需要编译打包处理
- 语法
## 暴露模块
export
export default
## 导入模块
import { } form './xx/xx' //export
import module from 'module' //export default
- 实现
1. 安装babel-cli, babel-preset-es2015和browserify
* npm install babel-cli browserify -g
* npm install babel-preset-es2015 --save-dev
* preset 预设(将es6转换成es5的所有插件打包)
2. 定义.babelrc文件
{
"presets": ["es2015"]
}
使用Babel将ES6编译为ES5代码 :
babel example.js -o compiled.js 单个文件
babel js/src -d js/lib 整个文件夹
使用Browserify编译打包js : browserify js/src/app.js -o js/dist/bundle.js
html引入最后的文件才可以运行（其实这里就是webpack的作用）
- 问题
问题: 所有浏览器还不能直接识别ES6模块化的语法
解决:
* 使用Babel将ES6--->ES5(使用了CommonJS) ----浏览器还不能直接支行
* 使用Browserify--->打包处理----浏览器可以运行
总结
到此，模块化规范简单介绍完毕，你会发现你缺少了一个自动化构建工具，不然任意修改js就需要手动打包。
猪脚登场webpack———一个实现了 CommonJS 和 ES6module 规范的自动化编译工具
参考文档
仅作为自己方便回顾，侵删
AMD 和 CMD 的区别有哪些？
资料整理来自这里
