模块化开发之CommonJS规范
欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~
前言
随着网站开发的复杂度越来越高,不管是前台还是后台的js
文件都越来越多,就出现了几个问题:
- 变量命名冲突
- 文件依赖复杂度增高
- 页面载入过多依赖傻傻分不清,不利于维护
NodeJS 模块化开发解决以上问题妥妥的,NodeJs模块化开发遵循CommonJS规范
CommonJS
模块化最初产生于服务端,并引申到客户端,
CommonJS
由Node
推广
定义模块
- 在
CommonJS
规范中,一个单独的JS
文件就是一个模块 - 每个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性
模块导出和载入
模块导出:
exports
和module.exports
模块载入:
require
- 在
Node
中,每个模块内部都有一个自己的module
对象 该
module
对象中,有一个成员叫:exports
也是一个对象通过
exports
对象导出当前方法或者变量,也可以通过module.exports
导出Node
为了简化程序员的操作,专门提供了一个变量:exports
等于module.exports
,相当于在模块中还有这么一句代码var exports = module.exports
所以,语法:
- 导出多个成员:
exports.xxx = xxx
或者module.exports = { }
- 到处单个成员:
module.exports
- 导出多个成员:
下面是模拟一个模块的导出
1 | // math.js 该模块专门处理计算方面的操作 ,从该模块导出 |
- 下面是模拟一个模块的载入以及require加载顺序
- 首先我们先去创建几个模块用来做模拟
a.js
,b.js
,main.js
- 首先我们先去创建几个模块用来做模拟
1 | // a.js |
1 | // b.js |
1 | require('./a') |
分析与结论:
- 我们看上面三个模块中的代码,他们在后续的程序处理过程中可能会产生依赖,但是在没有加载之前,他们是相互独立的,互不影响
require
优先从缓存中加载- 看上面的代码,在
main.js
中提前加载了a.js
,同时在a.js
和main.js
中加载b.js
,由于a.js
已经加载过b.js
了,所以在main.js
加载b.js
的时候只是能拿到借口对象,但是不会重复执行里面的代码,这样做的好处是避免了重复加载,提高模块效率 .js
文件后缀可以省略