JS模块化
理解
1. 什么是模块/模块化?
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
- 块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
- 模块化的进化史
2. 为什么要模块化?
3. 模块化的好处
- 避免命名冲突(减少命名空间污染)
- 更好的分离, 按需加载
- 更高复用性
- 高可维护性
4. 页面引入加载script
-
问题
- 请求过多
- 依赖模糊
- 难以维护
模块化规范
CommonJS
-
规范
-
说明
- wiki.commonjs.org/wiki/Module…
- 每个文件都可当作一个模块
- 在服务器端: 模块的加载是运行时同步加载的
- 在浏览器端: 模块需要提前编译打包处理
-
基本语法
-
暴露模块
- module.exports = value
- exports.xxx = value
- 问题: 暴露的模块到底是什么?
-
引入模块
-
require(xxx)
- 第三方模块:xxx为模块名
- 自定义模块: xxx为模块文件路径
-
-
-
-
实现
-
服务器端实现
- Node.js
- nodejs.cn/
-
浏览器端实现
- Browserify
- browserify.org/
- 也称为CommonJS的浏览器端的打包工具
-
区别Node与Browserify
- Node.js运行时动态加载模块(同步)
- Browserify是在转译(编译)时就会加载打包(合并)require的模块
-
AMD
-
规范
-
说明
- Asynchronous Module Definition(异步模块定义)
- github.com/amdjs/amdjs…
- 专门用于浏览器端, 模块的加载是异步的
-
基本语法
-
定义暴露模块
- //定义没有依赖的模块 define(function(){ return 模块 })
- //定义有依赖的模块 define(['module1', 'module2'], function(m1, m2){ return 模块 })
-
引入使用模块
- require(['module1', 'module2'], function(m1, m2){ 使用m1/m2 })
-
-
-
实现(浏览器端)
- Require.js
- www.requirejs.cn/
- www.ruanyifeng.com/blog/2012/1…
CMD
-
规范
-
说明
- Common Module Definition(通用模块定义)
- github.com/seajs/seajs…
- 专门用于浏览器端, 模块的加载是异步的
- 模块使用时才会加载执行
-
基本语法
-
定义暴露模块
- //定义没有依赖的模块 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() })
-
-
实现(浏览器端)
- Sea.js
- www.zhangxinxu.com/sp/seajs/
ES6
-
规范
-
说明
- es6.ruanyifeng.com/#docs/modul…
- 依赖模块需要编译打包处理
-
语法
**导出模块:
-
分多次导出模块的多个部分
export class Emp{ }
export function fun(){ }
export var person = {};
-
一次导出模块的多个部分
class Emp{ }
function fun(){ }
var person = {};
export {Emp, fun, person}
-
default导出(只能有一个)
export default {}
**导入模块
import defaultModule from './myModule'; //导入默认的
import {Emp} from './myModule'; //导入指定的一个
import {Emp, person} from './myModule'; //导入指定的多个
import * as allFromModule from './myModule'; //导入所有
- 导出模块: export
- 引入模块: import
-
-
-
实现(浏览器端)
- 使用Babel将ES6编译为ES5代码
- 使用Browserify编译打包js
