理清楚Commonjs中的缓存

向右看齐 2022-09-06 15:17 49阅读 0赞

### 文章目录 ###

*  前言
 *  一、网上不是很清晰的证明
 *  二、如何理解缓存
 *   *  从Node模块的引入过程理解缓存
 *  总结

--------------------

# 前言 #

最近在看commonjs规范时，提到了缓存这个东西。但是举的`证明缓存确实存在`的例子实在是含糊其辞，不知道缓存到底存的是什么,如何存的。于是就有了这篇文章，经过自己的验证，缓存确实是存在的，但是与其说是缓存，倒不如说require只加载了一次，导致后面获取到的都是第一次编译成功的require

--------------------

# 一、网上不是很清晰的证明 #

// 1.js
    var cur = require('./2')
    console.log(cur.a, '接收值 未操作前')
    
    cur.add()
    
    console.log(cur.a, '接收值 操作后')
    
    console.log(cur.get(), '原文件数据')
    
    // 2.js
    var a = 1;
    
    var add = function () { 
        a++
    }
    
    function get () { 
        return a
    }
    
    module.exports = { a,add,get}
    /* 输出结果： 1 接收值 未操作前 1 接收值 操作后 2 原文件数据 */

乍一看确实是有缓存内味儿了，但是假如我们能够正确认识到，导出的其实是一个对象，那么上面的例子就有些模糊了

console.log(typeof cur === 'object'); // true

对象本身是**引用数据类型**，导出的如果是对象，那么表示我们通过**require接收的其实是一个携带了a、add、get三个属性的新对象**，而后我们**操作的都是新对象上的属性**，一旦其属性也为引用类型，那么就能通过导出的新对象操作原文件的数据了。

我们将之前的a改为一个对象，与之对应的方法也改一下

// 1.js
    var cur = require('./2')
    console.log(cur.a, '接收值 未操作前')
    
    cur.changeName()
    
    console.log(cur.a, '接收值 操作后')
    
    console.log(cur.get(), '原文件数据')
    
    console.log(typeof cur === 'object');
    
    // 2.js
    var a = { 
        name: '张三'
    };
    
    var changeName = function () { 
        a.name = '李四'
    }
    
    function get () { 
        return a
    }
    
    module.exports = {  a,changeName,get}
    /* 输出结果： { name: '张三' } 接收值 未操作前 { name: '李四' } 接收值 操作后 { name: '李四' } 原文件数据 true */

如果单单从第一个例子来证明缓存存在的话，那么第二个例子就能表明缓存的本质是数据类型实现的（其实不是）

# 二、如何理解缓存 #

通过上面的例子，想要告诉大家的是，不要单单从导出对象的数据改变不会影响原数据这个层面理解缓存，乍一看确实有些像（第一个例子）。**真正的缓存需要我们从require加载的方式去理解**

## 从Node模块的引入过程理解缓存 ##

一般分三步

*  路径分析
 *  文件定位
 *  **编译执行**

缓存的实现就是在**编译执行**阶段完成的

在node中，我们可以输出`require.cache`来查看当前缓存，`require.cache` 指向所有缓存的模块。**第一次加载某个模块时，Node会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的module.exports属性。** 这也就解释了为什么我们操作的都是同一个导出的对象，即使多次require。

// 还是刚刚的文件，输出缓存
    // console.log(require.cache);
    [Object: null prototype] { 
      'E:\\vue-project\\nodeDemo\\1.js': Module { 
        id: '.',
        path: 'E:\\vue-project\\nodeDemo',
        exports: { },
        parent: null,
        filename: 'E:\\vue-project\\nodeDemo\\1.js',
        loaded: false,
        children: [ [Module] ],
        paths: [
          'E:\\vue-project\\nodeDemo\\node_modules',
          'E:\\vue-project\\node_modules',
          'E:\\node_modules'
        ]
      },
      'E:\\vue-project\\nodeDemo\\2.js': Module { 
        id: 'E:\\vue-project\\nodeDemo\\2.js',
        path: 'E:\\vue-project\\nodeDemo',
        exports: { 
          a: [Object],
          changeName: [Function: changeName],
          get: [Function: get]
        },
        parent: Module { 
          id: '.',
          path: 'E:\\vue-project\\nodeDemo',
          exports: { },
          parent: null,
          filename: 'E:\\vue-project\\nodeDemo\\1.js',
          loaded: false,
          children: [Array],
          paths: [Array]
        },
        filename: 'E:\\vue-project\\nodeDemo\\2.js',
        loaded: true,
        children: [],
        paths: [
          'E:\\vue-project\\nodeDemo\\node_modules',
          'E:\\vue-project\\node_modules',
          'E:\\node_modules'
        ]
      }
    }

// 证明重新拿到的是其内的exports
    var cur = require('./2')
    
    console.log(require.cache[`E:\\vue-project\\nodeDemo\\2.js`].exports === cur);
    // true

**每一个编译成功的文件都会将其文件路径作为索引缓存在`Module._cache`（require.cache）对象上，以提高二次引入的性能**。

# 总结 #

到此为止，我觉得对于Commonjs中的缓存应该有了比较清晰的认识了。

其实说白了，就是在编译模块成功后把这个编译好的对象（exports）作为属性存在了一个用于记录缓存的对象上。

之后再次require时，会从这个缓存对象上根据require内的路径查找对应的exports对象

**附（个人学习记录，不重要）如何通过原文件的方法操作缓存对象上的数据**  
尚不清楚是否需要这种写法，但是觉得有一定的封装思想在里面，所以决定记录一下

实现方法很简单，就是利用`this`的特性去完成。还是第一个例子

// 1.js
    var cur = require('./2')
    const {  get } = require('./2')
    console.log(cur.a, '接收值 未操作前')
    
    // cur.changeName()
    cur.add()
    
    console.log(cur.a, '接收值 操作后')
    
    console.log(cur.get(), '原文件数据')
    
    // 2.js
    var a = 1;
    
    var add = function () { 
        this.a++
    }
    
    function get () { 
        return a
    }
    
    module.exports = { a,add,get}
    /* 输出结果 1 接收值 未操作前 2 接收值 操作后 1 原文件数据 */

因为导出后的方法和属性都在exports对象上面，函数内this的指向是导出后的对象，自然就可以操作其数据了。