阅读 1315

小邵教你玩转nodejs之剖析/实现commonJs源码(2)

前言:大家好,我叫邵威儒,大家都喜欢喊我小邵,学的金融专业却凭借兴趣爱好入了程序猿的坑,从大学买的第一本vb和自学vb,我就与编程结下不解之缘,随后自学易语言写游戏辅助、交易软件,至今进入了前端领域,看到不少朋友都写文章分享,自己也弄一个玩玩,以下文章纯属个人理解,便于记录学习,肯定有理解错误或理解不到位的地方,意在站在前辈的肩膀,分享个人对技术的通俗理解,共同成长!

后续我会陆陆续续更新javascript方面,尽量把javascript这个学习路径体系都写一下
包括前端所常用的es6、angular、react、vue、nodejs、koa、express、公众号等等
都会从浅到深,从入门开始逐步写,希望能让大家有所收获,也希望大家关注我~

文章列表:juejin.im/user/5a84f8…
小邵教你玩转nodejs系列:juejin.im/collection/…

Author: 邵威儒
Email: 166661688@qq.com
Wechat: 166661688
github: github.com/iamswr/


十分抱歉,最近比较忙,临时需要把h5快速迁移到app,又不懂co swift android,基本每天都在踩坑当中,不过收获也很大,将来前端的趋势肯定是大前端,不管是pc 移动m站还是app 后端都需要懂一些,后面有时间,我也会把最近接触ios/android原生遇到的问题总结出来。

在这篇文章中,你会明白模块化的发展,明白以sea.js为代表的cmd规范和以require.js为代表的amd规范的异同,剖析node.js使用的commonJs规范的源码以及手写实现简陋版的commonJs,最后你会明白模块化是怎样一个加载过程。


Javascript最开始是怎样实现模块化呢?

我们知道javascript最开始是面向过程的思维编程,随着代码越来越庞大、复杂,在这种实际遇到的问题中,大佬们逐渐把面向对象、模块化的思想用在javascript当中。

一开始,我们是把不同功能写在不同函数当中

// 比如getCssAttr函数来获取Css属性,当我们需要获取Css属性的时候可以直接调用该方法
function getCssAttr(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return window.getComputedStyle(obj, null)[attr];
    }
}

// 比如toJSON函数能够把url的query转为JSON对象
function toJSON(str) {
  var obj = {}, allArr = [], splitArr = [];
  str = str.indexOf('?') >= 0 ? str.substr(1) : str;
  allArr = str.split('&');
  for (var i = 0; i < allArr.length; i++) {
    splitArr = allArr[i].split('=');
    obj[splitArr[0]] = splitArr[1];
  }
  return obj;
}
复制代码

这样getCssAttr函数和toJSON组成了模块,当需要使用的时候,直接调用即可,但是随着项目代码量越来越庞大和复杂,而且这种方式会对全局变量造成了污染。

为了解决上面的问题,会想到把这些方法、变量放到对象中

let utils = new Object({
    getCssAttr:function(){...},
    toJSON:function(){...}
})
复制代码

当需要调用相应函数时,我们通过对象调用即可,utils.getCssAttr()utils.toJSON(),但是这样会存在一个问题,就是可以直接通过外部修改内部方法属性。

utils.getCssAttr = null
复制代码

那么我们有办法让内部方法属性不被修改吗?

答案是可以的,我们可以通过闭包的方式,使私有成员不暴露在外部。

let utils = (function(){
    let getCssAttr = function(){...}
    let toJSON = function(){...}
    return {
        getCssAttr,
        toJSON
    }
})()
复制代码

这样的话,外部就无法改变内部的私有成员了。


CMD和AMD规范

试想一下,如果一个项目,所有轮子都自己造,在现在追求敏捷开发的环境下,我们有必要所有轮子都自己造吗?一些常用通用的功能,是否可以提取出来,供大家使用,提高开发效率?

正所谓,无规矩不成方圆,每个程序猿的代码风格肯定是有差异的,你写你的,我写我的,这样就很难流通了,但是如果大家都遵循一个规范编写代码,形成一个个模块,就显得非常重要了。

在这样的背景下,形成了两种规范,一种是以sea.js为代表的CMD规范,另外一种是以require.js为代表的AMD规范。

  • CMD规范(Common Module Definition 通用模块定义)
  • AMD规范(Asynchronous Module Definition 异步模块定义)

这一点一定要明白,非常重要!
这一点一定要明白,非常重要!
这一点一定要明白,非常重要!
在node.js中是遵循commonJS规范的,在对模块的导入是同步的,为什么这样说?因为在服务器中,模块都是存在本地的,即使要导入模块,也只是耗费了从硬盘读取模块的时间,而且可控。

但是在浏览器中,模块是需要通过网络请求获取的,如果是同步获取的话,那么网络请求的时间没办法保证,会造成浏览器假死的,但是异步的话,是不会阻塞主线程,所以不管是CMD还是AMD,都是属于异步的,CMD和AMD都是属于异步加载模块,当所需要依赖的模块加载完毕后,才通过一个回调函数,写我们所需要的业务逻辑。

CMD和AMD的异同

  • CMD是延迟执行,依赖就近,而AMD是提前执行,依赖前置(require2.0开始可以改成延迟执行),怎么理解呢?看看下面代码
// CMD
define(function(require,exports,module){
    var a = require('./a')
    a.run()
    
    var b = require('./b')
    b.eat()
})

// AMD
define(['./a','./b'],function(a,b){
    a.run()
    b.eat()
})
复制代码

上面CMD和AMD都是异步获取到这些模块,但是加载的时机是不同的
CMD是使用的时候再进行加载
AMD则是执行回调函数之前就已经把模块加载了
这样的话会存在一个问题,就是在CMD执行的时候,require模块的时候,
因为要加载指定的模块,所以当执行到var a = require('./a')、var b = require('./b')
的时候,会稍微耗费多一些时间,也就是俗称的懒加载,所以CMD中执行
这个回调函数的时间会比AMD的快。
更正:表达不准确,应该是开始执行回调函数的时间,并非执行回调函数的过程
但是在AMD中,是预加载,意思就是执行回调函数之前就把依赖的模块都加载完了,
所以AMD执行回调函数的时间会比CMD慢,但是因为已经预加载了,在AMD执行回
调函数内的业务逻辑会比CMD快。 CMD AMD 执行回调函数的时机 快 慢 执行回调函数内的业务 慢 快

  • 还有一些什么定位有差异、遵循的规范不同、推广理念有差异、对开发调试的支持有差异、插件机制不同等等就不衍生说了,最主要的还是前面说的那一条。

node.js遵循的commonJs规范

首先,我们来剖析一下commonJs的源码

我们分别创建两个文件useModule.jsmodule.js,并且打上断点。

// useModule.js
let utils = require('./module')
utils = require('./module')
utils.sayhello()
复制代码
// module.js
let utils = {
  sayhello:function(){
    console.log('hello swr')
  }
}
module.exports = utils
复制代码

然后开始执行,我们首先会进入commonJs的源码了

在最上面可以看出是一个闭包的形式(function(exports,require,module,__filename,__dirname)),这里可以看出__dirname__filename并非是global上的属性,而是每个模块对应的路径。

而且我们在模块当中this并不是指向global的,而是指向module.exports,至于为什么会这样呢?下面会讲到。

在红框中,我们可以看到require函数,exports.requireDepth可以暂时不用管,是一个引用深度的变量,接下来我们往下看,return mod.require(path),这里的mod就是每一个文件、模块,而里面都有一个require方法,接下来我们看看mod.require函数内部是怎么写的。

进来后,我们会看到2个assert断言,用来判断path参数是否传递了,path是否字符串类型等等。

return Module._load(path,this,false)path为我们传入的模块路径,this则是这个模块,false则不是主要模块,主要模块的意思是,如果a.js加载了b.js,那么a.js是主要模块,而b.js则是非主要模块。

接下来我们看看Module._load这个静态方法

var filename = Module._resolveFilename(request, parent, isMain),这里的目的是解析出一个绝对路径,我们可以进去看看Module._resolveFilename函数是怎么写的

Module._resolveFilename函数也没什么好说的,就是判断各种情况,然后解析出一个绝对路径出来,我们跳出这个函数,回到Module._load

然后我们看到var cachedModule = Module._cache[filename],这是我们加载模块的缓存机制,就是说我们加载过一次模块后,会缓存到Module._cache这个对象中,并且是以filename作为键名,因为路径是唯一的,所以以路径作为唯一标识,如果已经缓存过,则会直接返回这个缓存过的模块。

NativeModule.nonInternalExists(filename)判断是否原生模块,是的话则直接返回模块。

经过上面两个判断,基本可以判定这个模块没被加载过,那么接下来看到var module = new Module(filename, parent),创建了一个模块,我们看看Module这个构造函数有什么内容

这里的id,实际上就是filename唯一路径,另外一个很重要的是this.exports,也就是将来用于暴露模块的。

我们接着往下看,在创建一个实例后,接下来把这个实例存在缓存当中,Module._cache[filename] = module

然后执行tryModuleLoad(module, filename),这个函数非常重要,是用来加载模块的,我们看看是怎么写的

这里有个module.load,我们再往里面看看是怎么写的

兜兜转转,终于来到最核心的地方了

this.paths = Module._nodeModulePaths(path.dirname(filename)),我们知道,我们安装npm包时,node会由里到外一层层找node_modules文件夹,而这一步,则是路径一层层丢进数组里,我们可以看看this.paths的数组

继续往下看,var extension = path.extname(filename) || '.js'是获取后缀名,如果没有后缀名的话,暂时默认添加一个.js后缀名。

继续往下看,if (!Module._extensions[extension]) extension = '.js'是判断Module._extensions这个对象,是否有这个属性,如果没有的话,则让这个后缀名为.js

继续往下看,Module._extensions[extension](this, filename),根据后缀名,执行对应的函数,那么我们看一下Module._extensions对象有哪几个函数

从这里我们可以看到,Module._extensions中有3个函数,分别是.js.json.node函数,意思是根据不同的后缀名,执行不同的函数,来解析不同的内容,我们可以留意到读取文件都是用fs.readFileSync同步读取,因为这些文件都是保存在服务器硬盘中,读取这些文件耗费时间非常短,所以采用了同步而不是异步

其中.json最为简单,读取出文件后,再通过JSON.parse把字符串转化为JSON对象,然后把结果赋值给module.exports

接下来看看.js,也是一样先读取出文件内容,然后通过module._compile这个函数来解析.js的内容,我们看一下module._compile函数怎么写的

var wrapper = Module.wrap(content)这里对.js文件的内容进行了一层处理,我们可以看看Module.wrap怎么写的

在这里可以看出,NativeModule.wrapper数组中有两个数组成员,是不是看起来似曾相识?没错,这就是闭包的形式,而Module.wrap中,是直接把js文件的内容,和这个闭包拼接成一段字符串,对,就是在这里,把一个个模块,套一层闭包!实际上拼接出来的是

// 字符串
"(function(exports,require,module,__filename,__dirname){
    let utils = {
      sayhello:function(){
        console.log('hello swr')
      }
    }
})"
复制代码

我们跳出来,回到Module.prototype._compile看看,接下来看到var compiledWrapper = vm.runInThisContext(wrapper,{...}),在nodejs中是通过vm这个虚拟机,执行字符串,而且这样的好处是使内部完全是封闭的,不会被外在变量污染,而在前端的字符串模板则是通过new Function()来执行字符串,达到不被外在变量污染

继续往下看,result = compiledWrapper.call(this.exports, this.exports, require, this,filename, dirname),其中compiledWrapper就是我们通过vm虚拟机执行的字符串后返回的闭包,而且通过call来把这个模块中的this指向更改为当前模块,而不是全局的global,这里就是为什么我们在模块当中打印this时,指向的是当前的module.exports而不是global,然后后面依次把相应的参数传递过去

最终一层层跳出后Module._load中,最后是return module.exports,也就是说我们通过require导入的模块,取的是module.exports

通过剖析commonJs源码,我们收获了什么?

  • 懂得了模块加载的整个流程
    • 第一步:解析出一个绝对路径
    • 第二步:如文件没添加后缀,则添加.js.json.node作为后缀,然后通过fs.existsSync来判断文件是否存在
    • 第三步:到缓存中找该模块是否被加载过
    • 第四步:new一个模块实例
    • 第五步:把模块存到缓存当中
    • 第六步:根据后缀名,加载这个模块
  • 知道如何实现由里到外一层层查找node_modules
  • 知道针对.js.json是怎么解析的
    • .js是通过拼接字符串,形成一个闭包形式的字符串
    • .json则是通过JSON.parse转为JSON对象
  • 知道如何执行字符串,并且不受外部变量污染
    • nodejs中通过vm虚拟机来执行字符串
    • 前端则是通过new Function()来执行字符串
  • 知道为什么模块中的this指向的是this.exports而不是global
    • 通过call把指针指向了this.exports
曾经有个小伙伴问我,在vue中,想在export default{}外读取里面的data的值
<script>
export default {
    data(){
        return{
            name:"邵威儒"
        }
    }
}
// 在这外面取里面的name值,如何取呢?
</script>
复制代码

首先,我们知道,.vue文件在vue当中相当于一个模块,而模块的this是指向于exports,那么我们可以打印出this看看是什么

@舞动乾坤 大佬反馈,vue-cli3中打印this是undefined,我后面看看vue-cli3怎么处理的再更新

<script>
export default {
    data(){
        return{
            name:"邵威儒"
        }
    }
}
// 在这外面取里面的name值,如何取呢?
console.log(this)
</script>
复制代码

打印出来是这样的

那么就是说this.a.data则是data函数了, 那么我们执行this.a.data(),返回了{name:"邵威儒"}

所以当我们了解这个模块化的源码后,会为我们工作当中解决问题,提供了思路的


接下来,我们手写一个简陋版的commonJs源码

commonJs其实在加载模块的时候,做了以下几个步骤

  • 第一步:解析出一个绝对路径
  • 第二步:如文件没添加后缀,则添加.js.json.node作为后缀,然后通过fs.existsSync来判断文件是否存在
  • 第三步:到缓存中找该模块是否被加载过
  • 第四步:new一个模块实例
  • 第五步:把模块存到缓存当中
  • 第六步:根据后缀名,加载这个模块

那么我们根据这几个步骤,来手写一下源码~

// module.js
let utils = {
  sayhello: function () {
    console.log('hello swr')
  }
}
console.log('执行了')
module.exports = utils
复制代码

首先写出解析一个绝对路径以及如文件没添加后缀,则添加.js.json作为后缀,然后通过fs.existsSync来判断文件是否存在( .. 每个步骤我都会标识1、2、3…

// useModule.js
// 1.引入核心模块
let fs = require('fs')
let path = require('path')

// 3.声明一个Module构造函数
function Module(id) {
  this.id = id 
  this.exports = {} // 将来暴露模块的内容
}

// 8.支持的后缀名类型
Module._extensions = {
  ".js":function(){},
  ".json":function(){}
}

// 5.解析出绝对路径,_resolveFilename是Module的静态方法
Module._resolveFilename = function (relativePath) {
  // 6.返回一个路径
  let p = path.resolve(__dirname,relativePath)
  // 7.该路径是否存在文件,如果存在则直接返回
  //   这种情况主要考虑用户自行添加了后缀名
  //   如'./module.js'
  let exists = fs.existsSync(p)
  if(exists) return p
  // 9.如果relativePath传入的如'./module',没有添加后缀
  //   那么我们给它添加后缀,并且判断添加后缀后是否存在该文件
  let keys = Object.keys(Module._extensions)
  let r = false
  for(let val of keys){ // 这里用for循环,是当找到文件后可以直接break跳出循环
    let realPath = p + val // 拼接后缀
    let exists = fs.existsSync(realPath)
    if(exists){
      r = realPath
      break
    }
  }
  if(!r){ // 如果找不到文件,则抛出错误
    throw new Error('file not exists')
  }
  return r
}

// 2.为了不与require冲突,这个函数命名为req
//   传入一个参数p 路径
function req(p) {
  // 10.因为Module._resolveFilename存在找不到文件
  //    找不到文件时会抛出错误,所以我们这里捕获错误
  try { 
    // 4.通过Module._resolveFilename解析出一个绝对路径
    let filename = Module._resolveFilename(p)
  } catch (e) {
    console.log(e)
  }
}

// 导入模块,并且导入两次,主要是校验是否加载过一次后
// 在有缓存的情况下,会不会直接返回缓存的模块
// 为此特意在module.js中添加了console.log("执行了")
// 来看打印了几次
let utils = req('./module')
utils = req('./module')
utils.sayhello()
复制代码

然后到缓存中找该模块是否被加载过,如果没有加载过则new一个模块实例,把模块存到缓存当中,最后根据后缀名,加载这个模块( .. 每个步骤我都会标识1、2、3…

// useModule.js
// 1.引入核心模块
let fs = require('fs')
let path = require('path')

// 3.声明一个Module构造函数
function Module(id) {
  this.id = id 
  this.exports = {} // 将来暴露模块的内容
}

// * 21.因为处理js文件时,需要包裹一个闭包,我们写一个数组
Module.wrapper = [
  "(function(exports,require,module){",
  "\n})"
]

// * 22.通过Module.wrap包裹成闭包的字符串形式
Module.wrap = function(script){
  return Module.wrapper[0] + script + Module.wrapper[1]
}

// 8.支持的后缀名类型
Module._extensions = {
  ".js":function(module){ // * 20.其次看看js是如何处理的
    let str = fs.readFileSync(module.id,'utf8')
    // * 23.通过Module.wrap函数把内容包裹成闭包
    let fnStr = Module.wrap(str)
    // * 24.引入vm虚拟机来执行字符串
    let vm = require('vm')
    let fn = vm.runInThisContext(fnStr)
    // 让产生的fn执行,并且把this指向更改为当前的module.exports
    fn.call(this.exports,this.exports,req,module)
  },
  ".json":function(module){ // * 18.首先看看json是如何处理的
    let str = fs.readFileSync(module.id,'utf8')
    // * 19.通过JSON.parse处理,并且赋值给module.exports
    let json = JSON.parse(str)
    module.exports = json
  }
}

// * 15.加载
Module.prototype._load = function(filename){
  // * 16.获取后缀名
  let extension = path.extname(filename)
  // * 17.根据不同后缀名 执行不同的方法
  Module._extensions[extension](this)
}

// 5.解析出绝对路径,_resolveFilename是Module的静态方法
Module._resolveFilename = function (relativePath) {
  // 6.返回一个路径
  let p = path.resolve(__dirname,relativePath)
  // 7.该路径是否存在文件,如果存在则直接返回
  //   这种情况主要考虑用户自行添加了后缀名
  //   如'./module.js'
  let exists = fs.existsSync(p)
  if(exists) return p
  // 9.如果relativePath传入的如'./module',没有添加后缀
  //   那么我们给它添加后缀,并且判断添加后缀后是否存在该文件
  let keys = Object.keys(Module._extensions)
  let r = false
  for(let val of keys){ // 这里用for循环,是当找到文件后可以直接break跳出循环
    let realPath = p + val // 拼接后缀
    let exists = fs.existsSync(realPath)
    if(exists){
      r = realPath
      break
    }
  }
  if(!r){ // 如果找不到文件,则抛出错误
    throw new Error('file not exists')
  }
  return r
}

// * 11.缓存对象
Module._cache = {}

// 2.为了不与require冲突,这个函数命名为req
//   传入一个参数p 路径
function req(p) {
  // 10.因为Module._resolveFilename存在找不到文件
  //    找不到文件时会抛出错误,所以我们这里捕获错误
  try { 
    // 4.通过Module._resolveFilename解析出一个绝对路径
    let filename = Module._resolveFilename(p)
    // * 12.判断是否有缓存,如果有缓存的话,则直接返回缓存
    if(Module._cache[filename]){
      // * 因为实例的exports才是最终暴露出的内容
      return Module._cache[filename].exports
    }
    // * 13.new一个Module实例
    let module = new Module(filename)
    // * 14.加载这个模块
    module._load(filename)
    // * 25.把module存到缓存
    Module._cache[filename] = module
    // * 26.返回module.exprots
    return module.exports
  } catch (e) {
    console.log(e)
  }
}

// 导入模块,并且导入两次,主要是校验是否加载过一次后
// 在有缓存的情况下,会不会直接返回缓存的模块
// 为此特意在module.js中添加了console.log("执行了")
// 来看打印了几次
let utils = req('./module')
utils = req('./module')
utils.sayhello()
复制代码

这样我们就完成了一个简陋版的commonJs,而且我们多次导入这个模块,只会打印出一次执行了,说明了只要缓存中有的,就直接返回,而不是重新加载这个模块

这里建议大家一个步骤一个步骤去理解,尝试敲一下代码,这样感悟会更加深

那么为什么exports = xxx 却失效了呢?

// 从上面源码我们可以看出,实际上
// exports = module.exports = {}
// 但是当我们exports = {name:"邵威儒"}时,
// require出来却获取不到这个对象,这是因为我们在上面源码中,
// req函数(即require)内部return出的是module.exports,而不是exports,
// 当我们exports = { name:"邵威儒" }时,实际上这个exports指向了一个新的对象,
// 而不是module.exports
// 那么我们的exports是不是多余的呢?肯定不是多余的,我们可以这样写
exports.name = "邵威儒" 
// 这样写没有改变exports的指向,而是在exports指向的module.exports对象上新增了属性

// 那么什么时候用exports,什么时候用module.exports呢?
// 如果导出的东西是一个,那么可以用module.exports,如果导出多个属性可以用exports,
// 一般情况下是用module.exports

// 还有一种方式,就是把属性挂载到global上供全局访问,不过不推荐。
复制代码
关注下面的标签,发现更多相似文章
评论