模块化是什么,有什么用?
模块化就是将一个大的功能拆分为多个块,每一个块都是独立的,你不需要去担心污染全局变量,命名冲突什么的。
那么模块化的好处也就显然易见了
- 解决命名冲突
- 依赖管理
- 代码更加可读
- 提高复用性
早期苦逼的前端er
但是,JS 这门语言在最初是没有这个设计的。所以也就苦了早期的前端开发者。下面介绍下最开始的写法。
函数封装
这个嘛,谁都会,最大的缺点就是污染全局作用域了
function fn1() {
// balabalabala
}
function fn2() {
// balabalabala
}
对象
这个嘛,也是谁都会的,最大的缺点就是没有私有变量,外部能改
var myModule = {
var1: 1,
fn1: function() {}
}
立即执行函数
这个嘛,高级了点,并且也有了模块化的意思,这种写法在老项目中很常见,一个 JS 文件中就是一个立即执行函数
(function(){
// ....
})()
CommonJS
浏览器这边表示没有模块化还行,就是写逻辑麻烦了点。但是搞服务端的必须得有这玩意啊,所以 Node.js 第一个搞出了 CommonJS规范
。
// a.js
module.exports = {
a: 1
}
// or
exports.a = 1
// b.js
var module = require('./a.js')
module.a // -> log 1
上面的写法很好用,但是 module.exports
和 exports
是咋回事?为啥这几句代码就实现模块化了,让我们来看一下基础的实现
先说 require
吧
var module = require('./a.js')
module.a
// 这里其实就是包装了一层立即执行函数,这样就不会污染全局变量了,
// 重要的是 module 这里,module 是 Node 独有的一个变量
module.exports = {
a: 1
}
// 基本实现
var module = {
id: 'xxxx', // 我总得知道怎么去找到他吧
exports: {} // exports 就是个空对象
}
// 这个是为什么 exports 和 module.exports 用法相似的原因
var exports = module.exports
var load = function (module) {
// 导出的东西
var a = 1
module.exports = a
return module.exports
};
// 然后当我 require 的时候去找到独特的
// id,然后将要使用的东西用立即执行函数包装下,over
再来说说 module.exports
和 exports
,用法其实基本是相似的,但是不能对 exports
直接赋值,不会有任何效果,看了上面代码的同学肯定明白为什么了。
CommonJS规范
是 Node 独有的,浏览器中使用就需要用到 Browserify
解析了,所以后面又蹦出了两个规范。
AMD && CMD
AMD 是由 RequireJS
提出的,CMD 由 SeaJS
提出。两者用法基本相似,当然现在用的人应该也不多了,了解下语法,看项目的时候不至于懵逼就行
// AMD
define(['./a', './b'], function(a, b) {
a.do()
b.do()
})
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
var b = require('./b')
b.doSomething()
})
原生登场
ES6总算原生支持模块化了,毁誉参半吧。当然这个语法还是早支持早好。
// 引入的语法就这样 import,XXX 这里有很多语法变化
import XXX from './a.js'
// 导出也有很多语法变化的写法,基本的就这两个,反正语法没什么难得
export function a() {}
export default function() {}
最后
这里基本的介绍了下模块的几种写法,如有错误,请提出,谢谢!
答疑
评论里有问到为什么直接对 exports
赋值无效。首先 require
出来的是 module.exports
对象,然后看下面的代码
var a = {}
a.exports = {}
// 把 e 看成 exports,现在 e === a.exports
var e = a.exports
// 引用的关系,同时也修改了 a.exports
e.c = 1
console.log(a.exports.c) // -> 1
// 但是当给 e 赋值的话就等于修改了引用了, 所以并没有修改 a.exports
e = xxxx