其实刚看到这个题目的时候,我的内心是拒绝的,但是本着对科学的敬畏精神,我开始了 CommonJs 的探索之路。

来来来奉上我这几天的心血,拿走不客气。如有错误欢迎指正,共同进步。

提到CommonJs 绕不开的就是模块化。

模块化

模块化是指将一个复杂的系统分解为多个模块以方便编码。

很久以前,开发网页要通过命名空间的方式来组织代码,例如 jQuery 库将它的 API 都放在了 window.$ 下,在加载完 jQuery 后,其他模块再通过 window.$ 去使用 jQuery。这样做有很多问题,其中包括:

  • 命名空间冲突,两个库可能会使用同一个名称,例如 Zepto(zepto.com) 也是放在 window.$ 下;
  • 无法合理地管理项目的依赖和版本;
  • 无法方便地控制依赖的加载顺序;

当项目变大,这种方式将变得难以维护,需要用模块化的思想来组织代码。

一 、模块化优点:

  1. 提升开发效率:代码方便重用,别人开发的模块直接拿过来就可以使用,不需要重复开发法类似的功能。

  2. 方便后期维护:代码方便重用,别人开发的模块直接拿过来就可以使用,不需要重复开发法类似的功能。

所以总结来说,在生产角度,模块化开发是一种生产方式,这种方式生产效率高,维护成本低。从软件开发角度来说,模块化开发是一种开发模式,写代码的一种方式,开发效率高,方便后期维护。

二、模块化规范

服务器端规范主要是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.jsmodule.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),以它作为模块的识别符。

它的内部处理流程是:

  1. 检查 Module._cache,是否在缓存中有指定的模块,如果模块已经在缓存中,就从缓存取出。
  2. 如果没有判断是否为内置模块,如果是内置模块就返回内置模块。
  3. 如果缓存之中没有就会创建一个新的Moudle实例,将它保存到缓存中。
  4. 加载模块
  5. 如果加载/解析过程报错,就从缓存删除该模块
  6. 返回该模块的 module.exports

因此,Module._load 的关键步骤是两个。

  1. Module._resolveFilename() : 确定模块的绝对路径
  2. 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, .nodevar 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 变量的值输出。

引入一张文件查找的逻辑图:

参考:

javascript.ruanyifeng.com/nodejs/modu…

segmentfault.com/a/119000000…

www.cnblogs.com/TomXu/archi…

zhuanlan.zhihu.com/p/22890374

来来来,探究一下CommonJs的实现原理相关推荐

  1. 基于探究式教学法的计算机网络原理课程的教学改革与实践,基于探究式教学法的“计算机网络原理”课程的教学改革与实践分析...

    基于探究式教学法的 "计算机网络原理"课程的教学改革与实践分析 张敏莉 摘要":计算机网络原理"课程教学的目标是让学生学习和掌握计算机网络的基本概念.原理.方法 ...

  2. android digest 认证,探究 Android 签名机制和原理

    背景 最近在调研一个测试工具的使用,在使用中发现被测试工具处理过的apk文件经安装后打开就会崩溃,分析崩溃日志后原因是签名不一致导致的. 说到Android中的签名,可能大家都知道签名的目的就是为了保 ...

  3. commonjs 使用与原理

    commonjs特点: 1.在 commonjs 中每一个 js 文件都是一个单独的模块,我们可以称之为 module: 2.该模块中,包含 CommonJS 规范的核心变量: exports.mod ...

  4. 浏览器加载 CommonJS 模块的原理与实现

    转载:http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html 就在这个周末,npm 超过了cpan ,成为地球上最大的软件模块仓 ...

  5. 面试官说:说一说CommonJs的实现原理

    其实刚看到这个题目的时候,我的内心是拒绝的,但是本着对科学的敬畏精神,我开始了 CommonJs 的探索之路. 来来来奉上我这几天的心血,拿走不客气.如有错误欢迎指正,共同进步. 提到CommonJs ...

  6. 【Java】探究自增运算符++的原理

    荐读 C语言里++能随便用吗 j=j++到底是什么 a++ + ++a到底是什么 i++与++i 看下面的两组代码: public class IntegerPlusTest {public stat ...

  7. 探究call 和 apply 的原理

    建议看这片文章时可以点击音乐?,来个单曲循环,美滋滋 我的博客内容更精彩,好东西需要耐心等待哦!? 先拿call开刀 作用:call和apply都是替换函数内错误的this var a = {valu ...

  8. 探究KVO的底层实现原理

    addObserver:forKeyPath:options:context:各个参数的作用分别是什么, observer中需要实现哪个方法才能获得KVO回调? /**1. self.person:要 ...

  9. 软件测试 | 测试开发 | 探究 PHP_CodeSniffer 的代码静态分析原理

    导读 PHP_CodeSniffer是一个用来检查PHP代码规范的开源项目.它主要通过词法分析的方式将PHP源码解析成TOKEN数组,然后在TOKEN中标记出不符合代码规范的代码位置. 目前编程语言可 ...

最新文章

  1. php根据循环条件切换图片,thinkphp 循环显示图片问题!!!~~~~
  2. Python踩坑:类与类对象类型参数传递与使用
  3. bootstrap 表格不用tr td如何写_Pandas还能用来写爬虫?
  4. NOI2019省选模拟赛 第三场
  5. xml json 比较_JSON和XML:它们如何比较?
  6. python第九天(9-33)
  7. 用三国杀讲分布式算法,太舒适了吧?
  8. DirectX12(D3D12)基础教程(五)——理解和使用捆绑包,加载并使用DDS Cube Map
  9. 零知识证明:一个基于zk-SNARKs的Mastermind棋盘游戏
  10. php生成中国标准时间,中国时间标准
  11. 「中国好SaaS」重装升级,真正以用户视角,发现SaaS好项目
  12. 【直击DTCC】浪潮霍俊路详解数据库集群锁机制管理
  13. 来自GPU的Hello World-基于Win10+VS2019+CUDA 11.0搭建CUDA编程环境
  14. 小程序转发二维码携带参数不生效的问题
  15. csdn markdown编辑器设置字体大小和颜色换行
  16. php计算时间早上中午,php如何判断上午还是下午
  17. 【mongodb】python操作mongodb
  18. 推荐几款简单的音视频编辑软件
  19. mysql 免安装配置问题
  20. IP地址与二进制的转换

热门文章

  1. Matlab中两种矩阵除法运算:右除 / 和左除 \ 的区别
  2. 电池容量的使用时间计算
  3. SSM毕设项目羽毛球场预约系统axx7m(java+VUE+Mybatis+Maven+Mysql)
  4. 古币杂谈:清十二帝之 清太宗 爱新觉罗·皇太极
  5. itune备份在哪里_iTune的iPhone备份文件在哪里,以及如何从中获取真实文件?
  6. Nancy使用模型(Using Models)
  7. 行政组织学【0856】
  8. border-image巧妙实现带圆角的渐变边框
  9. Excel学习和使用的一些心得
  10. 树莓派GPIO控制LED彩灯