JS模块化规范管理

2.1.2 实现

2.1.2.1 服务器端实现

Node.js

http://nodejs.cn/

2.1.2.2 浏览器端实现

Browserify

http://browserify.org/

也称为CommonJS的浏览器端的打包工具

• 打包处理JS命令

browserify 源文件 -o 目标文件

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

• 打包处理后直接引入目标文件即可

2.1.2.3 区别Node与Browserify

• Node.js运行时动态加载模块(同步)

• Browserify是在转译(编译)时就会加载打包(合并)require的模块

2.2 AMD

---

2.2.1 规范

2.2.1.1 说明

Asynchronous Module Definition(异步模块定义)

https://github.com/amdjs/amdjs-api/wiki/AMD

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

2.2.1.2 基本语法

• 定义暴露模块

//定义没有依赖的模块

define(function(){

return 模块

})

//定义有依赖的模块

define([‘module1’, ‘module2’], function(m1, m2){

return 模块

})

• 引入使用模块

require([‘module1’, ‘module2’], function(m1, m2){

使用m1/m2

})

2.2.2 实现(浏览器端)

Require.js

http://www.requirejs.cn/

http://www.ruanyifeng.com/blog/2012/11/require_js.html

• 如果没有AMD等，原生引入

• 自定义模块

• 第三方模块

注意：由于jQuery在源码中支持了AMD规范，并且自定义了名称，因此只能使用jquery

注意Plus：有些第三方库需要进行额外配置，例如angular.js

2.3 CMD

---

2.3.1 规范

2.3.1.1 说明

Common Module Definition(通用模块定义)

https://github.com/seajs/seajs/issues/242

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

模块使用时才会加载执行

2.3.1.2 基本语法

• 定义暴露模块

//定义没有依赖的模块

define(function(require, exports, module){

exports.xxx = value

module.exports = value

})

//定义有依赖的模块

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()

})

2.3.2 实现(浏览器端)

Sea.js

http://www.zhangxinxu.com/sp/seajs/

2.4 ES6

---

2.4.1 规范

2.4.1.1 说明

http://es6.ruanyifeng.com/#docs/module

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

2.4.1.2 语法

导出模块: export

引入模块: import

2.4.2 实现(浏览器端)

• 常规暴露：分别暴露和统一暴露，引入的时候需要使用解构的方式

• 默认暴露：可以暴露任意数据类型，暴露什么数据就接收什么数据

在根目录下创建.babelrc文件，并添加一下内容

{

“presets”: [

“es2015”

]

}

使用Babel将ES6编译为ES5代码

• babel 源文件夹 -d 目标文件夹

babel js/src -d js/lib

使用Browserify将CommonJS规范打包编译为浏览器可识别的代码

• browserify 源文件 -o 目标文件

browserify js/lib/main.js -o js/dist/bundle.js

• browserify必须创建文件夹，babel可以自动创建文件夹

使用Browserify编译打包js

2.4.3 注意

• 在采用分别暴露或统一暴露（常规暴露）的时候，是引入的时候，必须使用解构赋值的方式

三、扩展阅读

=================================================================