模块化开发之CommonJS规范

欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

@TOC

1 前言

随着网站开发的复杂度越来越高，不管是前台还是后台的js文件都越来越多，就出现了几个问题：

1. 变量命名冲突
2. 文件依赖复杂度增高
3. 页面载入过多依赖傻傻分不清，不利于维护

NodeJS 模块化开发解决以上问题妥妥的，NodeJs模块化开发遵循CommonJS规范

2 CommonJS

模块化最初产生于服务端，并引申到客户端，CommonJS由Node推广并主要用于服务器

2.1 定义模块

1. 在CommonJS规范中，一个单独的JS文件就是一个模块
2. 每个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性

2.2 模块导出和载入

模块导出：exports 和 module.exports

模块载入：require

1. 在 Node 中，每个模块内部都有一个自己的 module 对象

2. 该 module 对象中，有一个成员叫：exports 也是一个对象

3. 通过exports对象导出当前方法或者变量，也可以通过module.exports导出

4. Node 为了简化程序员的操作，专门提供了一个变量：exports 等于 module.exports，相当于在模块中还有这么一句代码var exports = module.exports

5. 所以，语法：

   1. 导出多个成员：exports.xxx = xxx 或者 module.exports = { }
   2. 到处单个成员：module.exports

6. 下面是模拟一个模块的导出

// math.js 该模块专门处理计算方面的操作 ，从该模块导出

// 1. 如果一个模块需要直接导出某个成员，而非挂载的方式
module.exports = 'hello'

module.exports = function (x, y) {
  return x + y
}

// 2. 将上述两次导出合成一次的写法
module.exports = {
    add: function (x, y) {
        return x + y
    }, 
    str: 'hello'
}

7. 下面是模拟一个模块的载入以及require加载顺序
   1. 首先我们先去创建几个模块用来做模拟a.js，b.js，main.js
   2. 写上一些简单的代码

// a.js
console.log('a.js 被加载了')
var fn = require('./b')

console.log(fn)

// b.js
console.log('b.js 被加载了')

module.exports = function () {
  console.log('hello bbb')
}

require('./a')

var fn = require('./b')

console.log(fn)

分析与结论：

1. 我们看上面三个模块中的代码，他们在后续的程序处理过程中可能会产生依赖，但是在没有加载之前，他们是相互独立的，互不影响
2. require优先从缓存中加载
3. 看上面的代码，在main.js中提前加载了a.js，同时在a.js和main.js中加载b.js，由于a.js已经加载过b.js了，所以在main.js加载b.js的时候只是能拿到借口对象，但是不会重复执行里面的代码，这样做的好处是避免了重复加载，提高模块效率
4. .js文件后缀可以省略

3 文章推荐

• 模块化开发之AMD规范
• 模块化开发之CMD规范
• ES6中Module语法与加载实现
• 浅谈模块化开发