前端JS模块化

将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并组合在一起

块的内部数据/实现是私有的，只是向外部暴露一些接口（方法）与外部其它模块通信

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

网站应用趋于复杂化

代码复杂度越来越高

开发人员希望代码被高度解耦

运维人员希望减少http请求，优化代码架构，提升用户体验

面临的问题：

避免命名冲突（减少命名空间污染）

更好地分离，按需加载

更高复用性

高可维护性

模块化的好处：

2. 为什么要模块化?

Global被污染，很容易命名冲突

1. 最早，全部在一个文件中或是简单的分成几个文件

减少Global上的变量数目

本质是对象，外部可以修改对象的属性，不安全

2. 简单封装：Namespae模式（命名空间）

3. 匿名闭包：IIFE模式

现代模块化实现的基石

4. 增强闭包模式，引入依赖，但还没有规范

没有规范的代码

1. 请求过多

2. 依赖模糊

3. 难以维护

没有规范的问题

CommonJs

AMD

CMD

ES6

模块化规范的发展

5. 模块化规范

3. 模块化的发展

Commonjs规范说明

CommonJS规范

每个文件都当做一个模块

服务端：模块的加载是运行时同步加载的

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

说明

module.exports = value

exports.xxx = value

问题：暴露的模块到底是什么？

暴露模块

第三方模块：xxx为模块名

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

require(xxx)

引入模块

基本语法

规范

Nodejs

http://node.js.cn

服务端实现

Browserify

https://browserify.org

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

浏览器端实现

Nodejs运行时动态加载模块（同步）

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

Node与Browserify的区别

实现

4. CommonJS

Asynchronous Module Definition(异步模块定义)

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

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

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

Require.js

http://www.requirejs.cn/

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

实现（浏览器端）

5. AMD

Common Module Define（通用模块定义）

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

模块使用时才会加载执行

define(function(require){  var m1 = require('./module1')  var m2 = require('./module2')  m1.show()  m2.show()})

Sea.js

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

实现(浏览器端)

6.CMD

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

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

暴露模块: export

引入模块：import

语法

使用Babel将ES6编译为ES5代码

使用Browserify编译打包js

7. 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模块化编程)

8. 扩展阅读

前端JS模块化