---

思考下面的代码

image.png

• 变量污染，命令冲突经常发生。
• 代码复用性不高。
• 代码可维护性不高。
• 依赖关系管理不方便。

---

模块化开发思想

什么是模块化开发思想：

一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。

模块化开发带来的好处：

• 避免变量污染，命令冲突
• 提高代码复用率
• 提供代码可维护性
• 依赖关系的管理更方便

---

前端模块化的实现过程

• https://www.cnblogs.com/qingkong/p/5092003.html
• https://www.cnblogs.com/code-klaus/p/9011911.html

---

NodeJS 中的模块化实现是基于 CommonJS规范

规范与实现是一个相互促进的关系：

image.png

---

CommonJS规范

1. 一个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类都是私有的，对其他文件不可见。不会污染全局作用域。

// test1.js
var x = 5;
var addX = function (value) {
    return value + x;
};

// test2.js
var test1 = require('./test1');

console.log(test1);

2. 每个模块内部，==module==变量代表当前模块。这个变量是一个对象，他的==exports属性==（即==module.exports==）是对外的接口。加载(require)某个模块，其实就是加载该模块的==module.exports==属性。

// test3.js
var x = 5;
var addX = function (value) {
    return value + x;
}

module.exports.x = x;
module.exports.addX = addX;

// test4.js
var test1 = require('./test1.js');

console.log(test1);  // { x: 5, addX: [Function: addX] }
console.log(test1.x); // 5
console.log(test1.addX(1)); // 6

3. 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。

// test5.js
console.log('加载 test5 咯');
module.exports.x = 5;

// test6.js
var test5 = require('./test5.js');
console.log(test5.x);

var test5 = require('./test5.js');
console.log('end');

4. 模块加载的顺序，按照其在代码中出现的顺序。

// test7.js
console.log('加载 test7 咯');
module.exports.x = 7;

// test8.js
console.log('加载 test8 咯');
module.exports.x = 8;

// test9.js
var test7 = require('./test7.js');
var test8 = require('./test8.js');

5. 模块还提供有一个==exports==变量，指向==module.exports==。这等于在每个模块头部，有一行隐藏的如下代码：

var exports = module.exports;

于是我们我们在对外暴露接口时，可以直接通过 exports 来添加属性或方法。

// test10.js
var x = 5;
var addX = function (value) {
    return value + x;
};
exports.x = x;
exports.addX = addX;

// test11.js
var test10 = require('./test10.js');
console.log(test10.x);
console.log(test10.addX(1));

PS:

• 不能直接将==exports==变量指向一个值，因为这样等于切断了==exports==与==module.exports==的联系。

6. require

==require== 函数的基本功能是，读入并执行一个模块文件，然后返回该模块的 ==module.exports== 对象。如果没有发现指定的模块，会报错。

require 加载规则：

1. 后缀名默认为 ==.js===。所以 require 的时候可以省略 .js 的后缀。

var foo = require('./foo');
// 等价于
var foo = require('./foo.js');

2. 核心模块或安装的第三方模块，直接写模块名称即可。

var http = require('http'); // http 是核心模块
var jquery = require('jquery'); // jquery 是通过npm安装的第三方模块

3. 加载项目中手动写的模块的话，需要使用 相对路径或绝对路径

   
   image.png