模块化是指将一个复杂的系统分解为多个模块以方便编码。
一 、模块化优点
提升开发效率:代码方便重用,别人开发的模块直接拿过来就可以使用,不需要重复开发法类似的功能。
方便后期维护:代码方便重用,别人开发的模块直接拿过来就可以使用,不需要重复开发法类似的功能。
所以总结来说,在生产角度,模块化开发是一种生产方式,这种方式生产效率高,维护成本低。从软件开发角度来说,模块化开发是一种开发模式,写代码的一种方式,开发效率高,方便后期维护。
二、模块化规范
服务器端规范主要是CommonJS
,node.js
用的就是CommonJS
规范。
客户端规范主要有:AMD(异步模块定义,推崇依赖前置)、CMD(通用模块定义,推崇依赖就近)。AMD规范的实现主要有RequireJS,CMD规范的主要实现有SeaJS。但是SeaJS已经停止维护了,因为在ES6中已经有了模块化的实现,随着ES6的普及,第三方的模块化实现将会慢慢的淘汰。
本文主要介绍的也是CommonJS
,所以其他的规范请允许我无耻的忽略了,下面进入正题:
三、CommonJS
CommonJS
作为 Node.js
的规范,一直沿用至今。由于 npm 上 CommonJS
的类库众多,以及 CommonJS
和 ES6
之间的差异,Node.js
无法直接兼容 ES6
。所以现阶段 require/exports
仍然是必要且是必须的。出自 ES6 的 import/export
相对就晚了许多。被大家所熟知和使用也是 2015 年之后的事了。 这其实要感谢 babel
(原来项目名叫做 6to5,后更名为 babel
) 这个神一般的项目。由于有了 babel
将还未被宿主环境(各浏览器、Node.js
)直接支持的 ES6 Module
编译为ES5 CommonJS
—— 也就是 require/exports
这种写法 —— Webpack 插上 babel-loader
这个翅膀才开始高飞,大家也才可以称 " 我在使用 ES6
!
CommonJS
的核心思想
通过rquire
方法来同步加载依赖的其他模块,
通过module.exports
到处需要暴露的接口。
采用CommonJS
导入及导出的代码如下:
moduleA.js
//导出
module.exports = moduleA.someFunc;
//导入
const moduleA = require('./moduleA')
1. CommonJS的简单实现解析
分析源码之前,先介绍require
语句的内部逻辑。
1.1 require的内部逻辑
摘自
当node
遇到 require(X)
,按照下面的顺序处理。
(1)如果 X 是内置模块(比如 require('http')
)
a. 返回该模块
b. 不再继续执行
(2)如果 X 以’./’ 或者 '…/ '开头
a. 根据 X 所在的父模块,确定X的绝对路径。
b. 将 X 当成文件,依次查找下面文件,
只要其中有一个存在,就返回该文件,不再继续执行。
(也就是把 X 跟下面的几种文件格式进行匹配,
匹配到了就会依照相应的文件格式进行加载)
+----------------------+
| .x |
| .x.js |
| .x.json |
| .x.node |
+-------------------- +
c.将 X 当成目录,一次查找下面文件,
只要其中有一个存在,就返回该文件,不再继续执行。
+----------------------------+
| .X/package.json(main字段) |
| .X/index.js |
| .X/index.json |
| .X/index.node |
+--------------------------- +
(3)如果 X 不带路径
a.根据 X 所在的父模块,确定 X 可能的安装目录。
b. 依次在每个目录中, 将 X 当成文件名或目录名加载
(4)抛出 "not found"
require
命令用于加载文件,后缀名默认为.js
。
比如:
var a = require('a');
// 等同于
var a = require('a.js');
根据参数的不同格式,require
命令去不同路径寻找模块文件。
总结一下加载规则如下:
(1)如果参数字符串以"/"开头,则表示加载的是一个位于绝对路径的模块文件。比如,require('/home/user/a.js'),
将加载/home/user/a.js
(2) 如果参数字符串以“./”
开头,则表示加载的是一个位于相对路径(跟)
在当前脚本文件 "/Users/danlan/node-stu/user.js"
执行了 require('bar')
, 这属于上面的第三种情况。Node
内部运行过程如下:
首先去确定 X 的绝对路径可能是下面这些位置,依次搜索每一个目录。
/Users/danlan/node-stu/node_modules/bar
/Users/danlan/node_modules/bar
/Users/node_modules/bar
/node_modules/bar
搜索时, Node
先将bar
当成文件名, 依次尝试加载下面这些文件, 只要有一个成功就返回。
+----------------------------+
| bar |
| bar.js |
| bar.json |
| bar.node |
+--------------------------- +
如果都不成功说明 bar 可能是目录名,于是尝试加载下面这些文件。
+----------------------------+
| bar/package.json(main 字段)|
| bar/index.js |
| bar/index.json |
| bar/index.node |
+-----------------------------+
如果所有的目录中,都无法找到 bar
对应的文件或目录,就抛出一个错误。
1.2 Module 对象
了解了内部逻辑以后,下面是简易版源码分析:
Node
内部提供了一个 Module
构建函数。所有模块都是Module
的实例。
require
的源码在 Node
的 lib/module.js
文件。
function Module(id, parent){
this.id = id;
this.exports = {};
this.parent = parent;
this.filename = null;
this.loaded = false;
this.children = []
}
module.exports = Module;
var module = new Module(filename, parent)
上面的代码中,Node
定义了一个构造函数 Module
,所有的模块都是 Module 的实例。可以看到,当前模块 (module.js
)也是Moudle
的一个实例。
module.id 模块的识别符,通常是带有绝对路径的模块文件名。
module.filename 模块的文件名,带有绝对路径。
module.loaded 返回一个布尔值,表示模块是否已经完成加载。
module.parent 返回一个对象,表示调用该模块的模块。
module.children 返回一个数组,表示该模块要用到的其他模块。
module.exports 表示模块对外输出的值
每个实例都有自己的属性。下面通过一个例子,看看这些属性的值是什么。新建一个脚本文件 a.js
。
//a.js
console.log('module.id: ', module.id);
console.log('module.exports: ', module.exports);
console.log('module.parent: ', module.parent);
console.log('module.filename: ', module.filename);
console.log('module.loaded: ', module.loaded);
console.log('module.children: ', module.children);
console.log('module.paths: ', module.paths);
运行一下:
$ node a.js
module.id: .
module.exports: {}
module.parent: null
module.filename: /home/ruanyf/tmp/a.js
module.loaded: false
module.children: []
module.paths: [ '/Users/danlan/workspace/node-stu/ree/node_modules',
'/Users/danlan/workspace/node-stu/node_modules',
'/Users/danlan/workspace/node_modules',
'/Users/danlan/node_modules',
'/Users/node_modules',
'/node_modules' ]
可以看到,如果没有父模块,直接调用当前模块,
parent
属性就是null
,id
属性就是一个点。filename
属性是模块的绝对路径,path
属性是一个数组,包含了模块可能的位置。另外,输出这些内容时,模块还没有全部加载,所以 loaded
属性为false
。
新建一个b.js
var a = require('./a.js')
运行一下:
module.id: /Users/danlan/workspace/node-stu/ree/a.js
module.exports: {}
module.parent: Module {
id: '.',
exports: {},
parent: null,
filename: '/Users/danlan/workspace/node-stu/ree/b.js',
loaded: false,
children:
[ Module {
id: '/Users/danlan/workspace/node-stu/ree/a.js',
exports: {},
parent: [Circular],
filename: '/Users/danlan/workspace/node-stu/ree/a.js',
loaded: false,
children: [],
paths: [Array] } ],
paths:
[ '/Users/danlan/workspace/node-stu/ree/node_modules',
'/Users/danlan/workspace/node-stu/node_modules',
'/Users/danlan/workspace/node_modules',
'/Users/danlan/node_modules',
'/Users/node_modules',
'/node_modules' ] }
module.filename: /Users/danlan/workspace/node-stu/ree/a.js
module.loaded: false
module.children: []
module.paths: [ '/Users/danlan/workspace/node-stu/ree/node_modules',
'/Users/danlan/workspace/node-stu/node_modules',
'/Users/danlan/workspace/node_modules',
'/Users/danlan/node_modules',
'/Users/node_modules',
'/node_modules' ]
这个输出稍稍有一点多,没关系慢慢缕一下哈,由于 a.js
被 b.js
调用,所以 parent
属性指向 b.js
模块,id属性和filename
属性一致,都是模块的绝对路径。
1.3 模块实例的 require 方法
每个模块实例都有一个 require
方法。
Module.prototype.require = function(path){
return Module._load(path, this)
}
由此可知,require
并不是全局命令,而是每个模块提供的一个内部方法,也就是说,只有在模块内部才能使用require
命令,(唯一的例外是REPL
环境)。另外,require 其实内部调用 Module._load
方法。
下面来看 Module._load
的源码。
Module._load = function(request, parent, isMain) {
// 计算绝对路径
var filename = Module._resolveFilename(request, parent);
// 第一步:如果有缓存,取出缓存
var cachedModule = Module._cache[filename];
if (cachedModule) {
return cachedModule.exports;
}
// 第二步:是否为内置模块
if (NativeModule.exists(filename)) {
return NativeModule.require(filename);
}
// 第三步:生成模块实例,存入缓存
var module = new Module(filename, parent);
Module._cache[filename] = module;
// 第四步:加载模块
try {
module.load(filename);
hadException = false;
} finally {
if (hadException) {
delete Module._cache[filename];
}
}
// 第五步:输出模块的exports属性
return module.exports;
};
上面的代码中,首先解析出模块的绝对路径(filename
),以它作为模块的识别符。
它的内部处理流程是:
检查 Module._cache
,是否在缓存中有指定的模块,如果模块已经在缓存中,就从缓存取出。
如果没有判断是否为内置模块,如果是内置模块就返回内置模块。
如果缓存之中没有就会创建一个新的Moudle实例,将它保存到缓存中。
加载模块
如果加载/解析过程报错,就从缓存删除该模块
返回该模块的 module.exports
因此,Module._load
的关键步骤是两个。
Module._resolveFilename()
: 确定模块的绝对路径
module.load()
:加载模块
下面来说一下Module._resolveFilename():
1.4 模块的绝对路径
下面是 Module._resolveFilename()
方法的源码。
Module._resolveFilename = function(request, parent) {
// 第一步:如果是内置模块,不含路径返回
if (NativeModule.exists(request)) {
return request;
}
// 第二步:确定所有可能的路径
var resolvedModule = Module._resolveLookupPaths(request, parent);
var id = resolvedModule[0];
var paths = resolvedModule[1];
// 第三步:确定哪一个路径为真
var filename = Module._findPath(request, paths);
if (!filename) {
var err = new Error("Cannot find module '" + request + "'");
err.code = 'MODULE_NOT_FOUND';
throw err;
}
return filename;
};
上面代码中,在 Module.resolveFilrename
方法内部,又调用了两个方法 Module.reqolveLookPaths()和 Module._findPath(),
前者用来列出可能的路径,后者用来确认哪一个路径为真。
有了可能的路径以后,下面就是 Module._findPath()
的源码,用来确定到底哪一个是正确路径。
Module._findPath = function(request, paths) {
// 列出所有可能的后缀名:.js,.json, .node
var exts = Object.keys(Module._extensions);
// 如果是绝对路径,就不再搜索
if (request.charAt(0) === '/') {
paths = [''];
}
// 是否有后缀的目录斜杠
var trailingSlash = (request.slice(-1) === '/');
// 第一步:如果当前路径已在缓存中,就直接返回缓存
var cacheKey = JSON.stringify({request: request, paths: paths});
if (Module._pathCache[cacheKey]) {
return Module._pathCache[cacheKey];
}
// 第二步:依次遍历所有路径
for (var i = 0, PL = paths.length; i < PL; i++) {
var basePath = path.resolve(paths[i], request);
var filename;
if (!trailingSlash) {
// 第三步:是否存在该模块文件
filename = tryFile(basePath);
if (!filename && !trailingSlash) {
// 第四步:该模块文件加上后缀名,是否存在
filename = tryExtensions(basePath, exts);
}
}
// 第五步:目录中是否存在 package.json
if (!filename) {
filename = tryPackage(basePath, exts);
}
if (!filename) {
// 第六步:是否存在目录名 + index + 后缀名
filename = tryExtensions(path.resolve(basePath, 'index'), exts);
}
// 第七步:将找到的文件路径存入返回缓存,然后返回
if (filename) {
Module._pathCache[cacheKey] = filename;
return filename;
}
}
// 第八步:没有找到文件,返回false
return false;
};
经过上面代码,就可以找到模块的绝对路径了。
有时在项目代码中,需要调用模块的绝对路径,那么除了 module.filename
,Node
还提供一个 require.resolve
方法,供外部调用,用于从模块名取到绝对路径。
require.resolve = function(request) {
return Module._resolveFilename(request, self);
};
// 用法
require.resolve('a.js')
// 返回 /Users/danlan/workspace/node-stu/ree/a.js
1.5 加载模块
他有了模块的绝对路径,就可以加载该模块了。下面就是 module.load
方法的源码。
Module.prototype.load = function (filename) {
var extension = path.extname(filename) || 'js'
if(!Module._extensions[extensions]) extension = '.js'
Module._extensionsextension
this.loaded = true
}
上面代码中,首先确定模块的后缀名,不同的后缀名对应不同的加载方法。下面是.js
和.json
后缀名对应的处理方法。
Module._extensions['.js'] = function(module, filename) {
var content = fs.readFileSync(filename, 'utf8');
module._compile(stripBOM(content), filename);
};
Module._extensions['.json'] = function(module, filename) {
var content = fs.readFileSync(filename, 'utf8');
try {
module.exports = JSON.parse(stripBOM(content));
} catch (err) {
err.message = filename + ': ' + err.message;
throw err;
}
};
这里只讨论 js
文件的加载。首先,将模块文件读取成字符串,然后剥离 utf8
编码特有的BOM
文件头,最后编译该模块。
module._compile 方法用于模块的编译。
Module.prototype._compile = function(content, filename) {
var self = this;
var args = [self.exports, require, self, filename, dirname];
return compiledWrapper.apply(self.exports, args);
};
上面的代码基本等同于下面的形式。
(function (exports, require, module, __filename, __dirname) {
// 模块源码
});
也就是说,模块的加载实质上就是,注入exports、require、module
三个全局变量,然后执行模块的源码,然后将模块的 exports 变量的值输出。
引入一张文件查找的逻辑图:
module.exports vs exports
很多时候,你会看到,在Node
环境中,有两种方法可以在一个模块中输出变量:
方法一:对module.exports
赋值:
// hello.js
function hello() {
console.log('Hello, world!');
}
function greet(name) {
console.log('Hello, ' + name + '!');
}
module.exports = {
hello: hello,
greet: greet
};
方法二:直接使用exports
:
// hello.js
function hello() {
console.log('Hello, world!');
}
function greet(name) {
console.log('Hello, ' + name + '!');
}
function hello() {
console.log('Hello, world!');
}
exports.hello = hello;
exports.greet = greet;
但是你不可以直接对exports赋值:
// 代码可以执行,但是模块并没有输出任何变量:
exports = {
hello: hello,
greet: greet
};
如果你对上面的写法感到十分困惑,不要着急,我们来分析Node
的加载机制:
首先,Node
会把整个待加载的hello.js
文件放入一个包装函数load
中执行。在执行这个load()
数前,Node
准备好了module
变量:
var module = {
id: 'hello',
exports: {}
};
load()
函数最终返回module.exports
:
var load = function (exports, module) {
// hello.js的文件内容
...
// load函数返回:
return module.exports;
};
var exported = load(module.exports, module);
也就是说,默认情况下,Node
准备的exports
变量和module.exports
变量实际上是同一个变量,并且初始化为空对象{},
于是,我们可以写:
exports.foo = function () { return 'foo'; };
exports.bar = function () { return 'bar'; };
也可以写:
module.exports.foo = function () { return 'foo'; };
module.exports.bar = function () { return 'bar'; };
换句话说,Node
默认给你准备了一个空对象{}
,这样你可以直接往里面加东西。
但是,如果我们要输出的是一个函数或数组,那么,只能给module.exports
赋值:
module.exports = function () { return 'foo'; };
给exports
赋值是无效的,因为赋值后,module.exports
仍然是空对象{}。
如果要输出一个键值对象{},可以利用exports
这个已存在的空对象{},并继续在上面添加新的键值;
如果要输出一个函数或数组,必须直接对module.exports
对象赋值。
所以我们可以得出结论:直接对module.exports
赋值,可以应对任何情况:
module.exports = {
foo: function () { return 'foo'; }
};
或者:
module.exports = function () { return 'foo'; };