JS模块化

分支主题

生活中的例子——“模块化手机”：

模块化的进化史

子主题

1. 什么是模块/模块化?

2. 为什么要模块化?

避免命名冲突(减少命名空间污染)

更高复用性

高可维护性

3. 模块化的好处

请求过多

依赖模糊

难以维护

问题

4. 页面引入加载script

理解

http://wiki.commonjs.org/wiki/Modules/1.1

每个文件都可当作一个模块

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

在浏览器端: 模块需要提前编译打包处理

说明

module.exports = value

exports.xxx = value

问题: 暴露的本质到底是什么?exports对象

暴露模块

第三方模块:xxx为模块名

自定义模块: xxx为模块文件路径

require(xxx)

引入模块

基本语法

规范

Node.js

http://nodejs.cn/

服务器端实现

Browserify

http://browserify.org/

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

浏览器端实现

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

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

区别Node与Browserify

实现

CommonJS

Asynchronous Module Definition(异步模块定义)

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

//定义没有依赖的模块define(function(){\treturn 模块})

定义暴露模块

//页面引入使用<script type="text/javascript" src="js/libs/require.js" data-main="js/main.js"></script>

引入使用模块

Require.js

http://www.requirejs.cn/

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

实现(浏览器端)

AMD

Common Module Definition(通用模块定义)

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

模块使用时才会加载执行

//入口js配置define(function (require) {\tvar m1 = require('./module1')\tvar m4 = require('./module4')\tm1.show()\tm4.show()})

//页面引入使用<script type="text/javascript" src="js/libs/sea.js"></script><script type="text/javascript"> seajs.use('./js/modules/main')</script>

Sea.js

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

CMD

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

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

暴露模块-export:

引入模块-import:

语法

使用Babel将ES6编译为ES5代码

使用Browserify编译打包js

ES6

模块化规范

https://github.com/seajs/seajs/issues/588(前端模块化开发那点历史)

http://zccst.iteye.com/blog/2215317(CommonJS，AMD，CMD区别)

http://www.zhihu.com/question/20351507/answer/14859415(AMD和CMD 的区别)

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html(Javascript模块化编程)

扩展阅读

JS模块化