思考下面的代码
image
- 变量污染，命令冲突经常发生。
- 代码复用性不高。
- 代码可维护性不高。
- 依赖关系管理不方便。
模块化开发思想
什么是模块化开发思想：
一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。
模块化开发带来的好处：
- 避免变量污染，命令冲突
- 提高代码复用率
- 提供代码可维护性
- 依赖关系的管理更方便
前端模块化的实现过程
NodeJS 中的模块化实现是基于 CommonJS规范
规范与实现是一个相互促进的关系：
image
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 加载规则：
- 后缀名默认为 ==.js===。所以 require 的时候可以省略 .js 的后缀。
var foo = require('./foo');
// 等价于
var foo = require('./foo.js');
- 核心模块或安装的第三方模块，直接写模块名称即可。
var http = require('http'); // http 是核心模块
var jquery = require('jquery'); // jquery 是通过npm安装的第三方模块
-
加载项目中手动写的模块的话，需要使用 相对路径或绝对路径
image
作者：Elvmx
链接：https://www.jianshu.com/p/9700e3c589e0
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
](//upload-images.jianshu.io/upload_images/12201495-7fa58ee4f83aa772.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/503/format/webp)
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 加载规则：
- 后缀名默认为 ==.js===。所以 require 的时候可以省略 .js 的后缀。
var foo = require('./foo');
// 等价于
var foo = require('./foo.js');
- 核心模块或安装的第三方模块，直接写模块名称即可。
var http = require('http'); // http 是核心模块
var jquery = require('jquery'); // jquery 是通过npm安装的第三方模块
-
加载项目中手动写的模块的话，需要使用 相对路径或绝对路径
image
