Commonjs，AMD，CMD和ES6module的实现及差别

为何要模块化

1. 下降复杂度，下降耦合度

2. 部署方便，功能点明确

 

模块化的好处

1. 避免命名冲突

2. 更好的分离，按需加载

3. 提升复用性

4. 高可维护性

 

CommonJS

规范：

1. 每一个文件均可以当作一个模块

2. 在服务器端：模块的加载是运行时同步加载的

3. 在浏览器端：模块须要提早编译打包处理

 

基本语法：

1. 暴露模块，暴露的本质是exports这个对象

module.exports = value

exports.xxx =value

 

2. 引入模块

require()

 

实现

1. 服务器端实现 Node.js

//module1.js
module.exports = {
msg : 'module1',
foo(){
console.log(this.msg);
}
}

　　

//module2.js
module.exports = function(){
console.log('module2');
}
//至关于给exports对象赋值

 

//module3.js
exports.foo = function(){
console.log('foo() module3');
}
exports.boo = function(){
console.log('boo() module3');
}
exports.arr = [1,2,3,4,4,6,6,5,2,1]
//至关于给exports对象属性赋值

 

let uniq = require('uniq') //数组去重排序第三方包,是一个函数
let module1 = require('./modules/modules1')
let module2 = require('./modules/modules2')
let module3 = require('./modules/modules3')


module1.foo() //module1
module2() //module2
module3.foo() //foo() module3
module3.boo() //boo() module3
console.log(uniq(module3.arr))

　　

 

2. 浏览器端实现 Browserify

1. 建立好文件目录结构

 

 

2. 下载browserify

全局安装: npm install browserify -g

局部安装: npm install browserify --save-dev

 

3. 模块实现

//module1.js
module.exports = {
msg : 'module1',
foo(){
console.log(this.msg);
}
}
//module2.js
module.exports = function(){
console.log('module2');
}
//至关于给exports对象赋值
 

//module3.js
exports.foo = function(){
console.log('foo() module3');
}
exports.boo = function(){
console.log('boo() module3');
}



//app.js
let module1 = require('./module1')
let module2 = require('./module2')
let module3 = require('./module3')
 

module1.foo()
module2()
module3.boo()
module3.foo()

　　

 

4. 此时运行app.js在浏览器会报错，须要打包处理js

browserify js/src/app.js -o js/dist/bundle.js

 

5. 页面使用引入

<script src="./js/dist/build.js"></script>

　　

AMD(异步模块定义)

专门用于浏览器端，模块的加载是异步的

 

基本语法：

1. 定义暴露模块

//1.定义没有依赖的模块
define(function(){
return 模块
})
 

//2.定义有依赖的模块
define(['module1','module2'],function(m1,m2){
return 模块
})

　　

 

2. 引入使用模块

require(['module1','module2'],function(m1,m2){
使用m1 m2
})

　　

 

使用教程：

1. 下载require.js而且引入

2. 建立项目结构

　

 

3. 定义模块

//定义没有依赖的模块
define(function(){
let name = 'module1.js',
function getName(){
return name
}
//暴露模块
return {getName}
})
 

//定义有依赖的模块
define(['module1','jquery'],function(module1,$){
let msg = 'module2.js',
function show(){
console.log(msg,module1.getName())
}
$('body').css('backgroundColor','red')
//暴露模块
return {show}
})
 

//引入模块
(function(){
requirejs.config({
//baseUrl: 'js/lib', //基本的路径，和paths里面的路径要拼接
paths:{ //配置路径
module1:'./modules/module1',
module2:'./modules/module2'，
jquery:'./libs/jquery-1.10.1'
}
})
requirejs(['module2'],function(module2){
module2.show()
})
})()
 

//html
<script data-main="js/main.js" src="js/lib/require.js"></script>

　

 

CMD

专门用于浏览器端，模块的加载是异步的，使用时才会加载执行

 

基本语法

1. 定义暴露模块

//定义没有依赖的模块
define(function(reqiuire,exports,module){
exports.xxx = value
module.exports = value
})
 

//定义有依赖的模块
define(function(require,exports,module){
//同步引入依赖模块
let module2 = require('./module2')
//异步引入依赖模块
require.async('./module3',function(module3){
 

})
//暴露模块
exports.xxx = value
})

　　

2. 引入使用模块

define(function(require){
let m1 = require('./module1')
let m4 = require('./module4')
m1.show()
m4.show()
})

　　

 

使用教程：

1. 下载安装

2. 建立项目结构

js

　　lib

　　　　sea.js

　　modules

　　　　module1.js

　　　　module2.js

　　　　module3.js

　　　　module4.js

　　main.js

index.html

 

3. 定义模块

define(function(require,exports,module){
let msg = 'module1'
function foo(){
return msg
}
//暴露模块
module.exports = {foo}
})



define(function(require,exports,module){
let msg = 'module2'
function boo(){
console.log(msg)
}
module.exports = boo
})



define(function(require,exports,module){
let data = 'module3'
function fun(){
console.log(data)
}
exports.module3 = {fun}
})



define(function(require,exports,module){
let msg = 'module4'
//同步引入
let module2 = require('./module2')
module2() //module2
//异步引入
require.async('./module3',function(module3){
module3.module3.fun() //module3
})
function fun2(require,exports,module){
console.log(msg)
}
exports.fun2 = fun2
})



define(function(require){
let module1 = require('./module1')
module1.foo() //module1
let module4 = require('./module4')
module4.fun2() //module4
})
 

//html
<script src="js/lib/sea.js"></script>
<script>
seajs.use('./js/modules/main.js')
</script>

　　

模块3是异步引入的，回调函数先放到事件队列，加载其余主线程的模块，主线程执行完后，才把队列中的勾出来使用，因而输出的顺序是1243

 

由于CMD如今几乎不用了，官网也打不开，所以不去实现

ES6模块化规范

依赖模块须要编译打包处理

 

语法：

1. 导出模块 export

2. 引入模块 import

 

实现(浏览器端)

1. 使用Babel将ES6编译为ES5代码

2. 使用Browserify编译打包js

 

使用教程：

1. 文件目录结构

 

2. 建立package.json文件

 

3. 安装babel-cli,babel-preset-es2015和browserify(cli:command line interface 命令行接口)

1. npm insatll babel-cli browserify -g

2. npm install babel-preset-es2015 --save-dev

preset 预设(将es6转换成es5的全部插件打包)

3. 定义.babelrc文件 (rc：run control 运行时控制文件)

{

"presets" : ["es2015"]

}

 

4. 编码

//module1.js
//暴露模块 分别暴露
export function foo() {
console.log('foo() module1')
}
 

export function boo() {
console.log('boo() module1')
}
export let arr = [1,2,3,4,5]
 

//module2.js
//统一暴露
function fun(){
console.log('fun() module2');
 
}
 

function fun2(){
console.log('fun2() module2');
 
}
 

//module3.js
//默认暴露 能够暴露任意数据类型 暴露什么数据就是接受什么数据
export default ()=>{
console.log('默认暴露的箭头函数')
}
 

//默认暴露只能暴露一次，不然会报错，暴露多个数据能够放到一个对象中暴露
 

export {fun,fun2}
 

//main.js
//引入其余的模块
 

//import xxx from '路径'
 

import $ from 'jquery'
 

import {foo,boo,arr} from './module1'
import {fun,fun2} from './module2'
import module3 from './module3'
 

$('body').css('backgroundColor','red')
console.log(foo,boo,arr)
console.log(fun,fun2)
module3()
 

//规定在使用分别暴露和统一暴露的时候，必需要用解构赋值的方法接受
 

//html
<script src="js/dist/bundle.js"></script>

　　

5. 编译

1. 使用Babel将es6编译成es5代码，包含CommonJS语法 babel js/src -d js/lib

2. 使用Browserify编译js browserify js/lib/main.js -o js/dist/bundle.js

 

CommonJS模块和ES6模块的差别

1. Commonjs是值的复制，原来模块的值改变了不会影响已经加载的该值。ES6是值是动态的，原来模块的值改变会影响import加载的值

2. Commonjs是对模块的浅拷贝，能够对值进行修改，对复杂数据类型进行修改会影响应原来模块。ES6是对模块的引用，改变值会报错

3. Commonjs重复使用require加载同一个模块，都只会在第一次加载的时候运行一次，之后的就返回第一次加载的结果

4. Commonjs的this指向当前模块，ES6的this指向undefined

5. Commonjs加载的是整个模块，全部接口所有加载进来，ES6能够单独加载其中某个接口

 

 AMD和CMD的差别

1. AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程当中对模块定义的规范化产出。

2. 对于依赖的模块，AMD是提早执行，CMD是延迟执行，也称为延迟加载，即须要的时候才加载

3. AMD推崇依赖前置，CMD推崇依赖就近。AMD一开始依赖就必须写好，CMD能够在使用的时候才引入依赖

4. AMD的API默认一个当多个用，CMD的API严格区分