内容简介:其实刚看到这个题目的时候,我的内心是拒绝的,但是本着对科学的敬畏精神,我开始了 CommonJs 的探索之路。来来来奉上我这几天的心血,拿走不客气。如有错误欢迎指正,共同进步。模块化是指将一个复杂的系统分解为多个模块以方便编码。
其实刚看到这个题目的时候,我的内心是拒绝的,但是本着对科学的敬畏精神,我开始了 CommonJs 的探索之路。
来来来奉上我这几天的心血,拿走不客气。如有错误欢迎指正,共同进步。
提到CommonJs 绕不开的就是模块化。
模块化
模块化是指将一个复杂的系统分解为多个模块以方便编码。
很久以前,开发网页要通过命名空间的方式来组织代码,例如 jQuery 库将它的 API 都放在了 window.$
下,在加载完 jQuery 后,其他模块再通过 window.$ 去使用 jQuery。这样做有很多问题,其中包括:
- 命名空间冲突,两个库可能会使用同一个名称,例如 Zepto(zepto.com) 也是放在 window.$ 下;
- 无法合理地管理项目的依赖和版本;
- 无法方便地控制依赖的加载顺序;
当项目变大,这种方式将变得难以维护,需要用模块化的思想来组织代码。
一 、模块化优点:
提升开发效率 方便后期维护
所以总结来说,在生产角度,模块化开发是一种生产方式,这种方式生产效率高,维护成本低。从软件开发角度来说,模块化开发是一种开发模式,写代码的一种方式,开发效率高,方便后期维护。
二、模块化规范
服务器端规范主要是 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使用手册>
当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内部提供了一个 Mudule
构建函数。所有模块都是 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._extensions[extension](this, filename) 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 变量的值输出。
引入一张文件查找的逻辑图:
参考:
以上所述就是小编给大家介绍的《来来来,探究一下CommonJs的实现原理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
CSS 压缩/解压工具
在线压缩/解压 CSS 代码
随机密码生成器
多种字符组合密码