首先,在ES6的class
出来之前是没有模块的,JS就不是一个模块化的语言,所谓的“模块”要么是个匿名函数,要么就是个对象的伪模块
var module = (function(){
let _count = 2 // 私有变量
let m1 = function() {
console.log(_count)
}
let m2 = function() {
console.log(_count + 1)
}
return {
m1,
m2
}
})()
转折点: 2009年美国大神程序员发明了nodeJs
用于服务端编程,服务端必须要有模块,因为要跟操作系统和其他应用互动,否则无法编程,所以引出了commonJs
规范
commonJs规范
导出
module.exports = {
math
}
exports // 跟module.exports区别很小,但是容易出错,不要使用
引入
let math = require('math') // 同步加载,会引起阻塞
math.add(2,3)
缺点:
因为nodeJs
是服务器语言,它的模块都在本地放着,加载速度比较快,但是前端加载JS是从服务器加载的,比较慢,可能会引起浏览器假死状态
AMD规范
define(id?, dependencies?, factory)
* id:字符串,模块名称(可选),默认文件名称
* dependencies: 是我们要载入的依赖模块(可选),使用相对路径。,注意是数组格式
* factory: 工厂方法,返回一个模块函数
导出
// math.js
define(['lib'],function(){ // 依赖lib.js
let add = function(x, y){
return x + y
}
return {
add
}
})
引入
require(['math'],function(){
math.add(2,3)
})
优点: 异步加载模块,执行内容放在回调里
缺点: 也算不得缺点,所有的依赖必须声明在文件头部
使用者: require.js
CMD规范
跟AMD的规范就一丢丢小区别
define(['lib'],function(require, exports, module){ // 依赖lib.js
let a = require('./a') // 依赖a.js
a.test()
let add = function(x, y){
return x + y
}
module.exports = {
add
}
})
与AMD的区别:
- 工厂函数默认有三个参数,
require
用来引入模块,exports
和module
用于导出,当然导出也可以直接用return
- 在工厂函数内部可以用
require
引入模块,不需要把所有依赖都声明在头部,实现就近依赖,对于开发者比较友好
缺点:
就近依赖就必须先解析一下模板才知道加载哪些模块,不过解析模块的时间可以短到忽略不计
使用者: seaJs
ES6 Module
导出
// 注意注意,这里是export,不是exports
function addition(){}
export {addition} // 导出函数
export const foo = 'Hello' // 导出一个变量
export default function(){} // 默认导出一个函数,引入时比较方便,但是只能导出一个
export default class() // 默认导出一个类
引入
import defaultModule from 'module-name' // export default导出
import * as name from 'module-name' // 引入所有导出,可以使用 name.add()使用
import { add, del } from 'module-name' // 解构,按需引入
import from 'module-name' // 仅引入