iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >require加载器的原理是什么
  • 607
分享到

require加载器的原理是什么

2023-06-14 13:06:08 607人浏览 八月长安
摘要

这篇文章给大家介绍require加载器的原理是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1.node模块化的实现node中是自带模块化机制的,每个文件就是一个单独的模块,并且它遵循的是Commonjs规范,也就

这篇文章给大家介绍require加载器的原理是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

1.node模块化的实现

node中是自带模块化机制的,每个文件就是一个单独的模块,并且它遵循的是Commonjs规范,也就是使用require的方式导入模块,通过module.export的方式导出模块。
node模块的运行机制也很简单,其实就是在每一个模块外层包裹了一层函数,有了函数的包裹就可以实现代码间的作用域隔离。

你可能会说,我在写代码的时候并没有包裹函数呀,是的的确如此,这一层函数是node自动帮我们实现的,我们可以来测试一下。

我们新建一个js文件,在第一行打印一个并不存在的变量,比如我们这里打印window,在node中是没有window的。

console.log(window);

通过node执行该文件,会发现报错信息如下。(请使用系统默认cmd执行命令)。

(function (exports, require, module, __filename, __dirname) { console.log(window);ReferenceError: window is not defined    at Object.<anonymous> (/Users/choice/Desktop/node/main.js:1:75)    at Module._compile (internal/modules/cjs/loader.js:689:30)    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)    at Module.load (internal/modules/cjs/loader.js:599:32)    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)    at Function.Module._load (internal/modules/cjs/loader.js:530:3)    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)    at startup (internal/bootstrap/node.js:279:19)    at bootstrapnodejsCore (internal/bootstrap/node.js:752:3)

可以看到报错的顶层有一个自执行的函数,, 函数中包含exports, require, module, __filename, __dirname这些我们常用的全局变量。

我在之前的《前端模块化发展历程》一文中介绍过。自执行函数也是前端模块化的实现方案之一,在早期前端没有模块化系统的时代,自执行函数可以很好的解决命名空间的问题,并且模块依赖的其他模块都可以通过参数传递进来。cmd和amd规范也都是依赖自执行函数实现的。

在模块系统中,每个文件就是一个模块,每个模块外面会自动套一个函数,并且定义了导出方式 module.exports或者exports,同时也定义了导入方式require。

let moduleA = (function() {    module.exports = Promise;    return module.exports;})();

2.require加载模块

require依赖node中的fs模块来加载模块文件,fs.readFile读取到的是一个字符串

在javascrpt中我们可以通过eval或者new Function的方式来将一个字符串转换成js代码来运行。

eval

const name = 'yd';const str = 'const a = 123; console.log(name)';eval(str); // yd;

new Function

new Function接收的是一个要执行的字符串,返回的是一个新的函数,调用这个新的函数字符串就会执行了。如果这个函数需要传递参数,可以在new Function的时候依次传入参数,最后传入的是要执行的字符串。比如这里传入参数b,要执行的字符串str。

const b = 3;const str = 'let a = 1; return a + b';const fun = new Function('b', str);console.log(fun(b, str)); // 4

可以看到eval和Function实例化都可以用来执行javascript字符串,似乎他们都可以来实现require模块加载。不过在node中并没有选用他们来实现模块化,原因也很简单因为他们都有一个致命的问题,就是都容易被不属于他们的变量所影响。

如下str字符串中并没有定义a,但是确可以使用上面定义的a变量,这显然是不对的,在模块化机制中,str字符串应该具有自身独立的运行空间,自身不存在的变量是不可以直接使用的。

const a = 1;const str = 'console.log(a)';eval(str);const func = new Function(str);func();

node存在一个vm虚拟环境的概念,用来运行额外的js文件,他可以保证javascript执行的独立性,不会被外部所影响。

vm 内置模块

虽然我们在外部定义了hello,但是str是一个独立的模块,并不在村hello变量,所以会直接报错。

// 引入vm模块, 不需要安装,node 自建模块const vm = require('vm');const hello = 'yd';const str = 'console.log(hello)';wm.runInThisContext(str); // 报错

所以node执行javascript模块时可以采用vm来实现。就可以保证模块的独立性了。

3.require代码实现

介绍require代码实现之前先来回顾两个node模块的用法,因为下面会用得到。

path模块

用于处理文件路径。

basename: 基础路径, 有文件路径就不是基础路径,基础路劲是1.js

extname: 获取扩展名

dirname: 父级路劲

join: 拼接路径

resolve: 当前文件夹的绝对路径,注意使用的时候不要在结尾添加/

__dirname: 当前文件所在文件夹的路径

__filename: 当前文件的绝对路径

const path = require('path', 's');console.log(path.basename('1.js'));console.log(path.extname('2.txt'));console.log(path.dirname('2.txt'));console.log(path.join('a/b/c', 'd/e/f')); // a/b/c/d/e/console.log(path.resolve('2.txt'));

fs模块

用于操作文件或者文件夹,比如文件的读写,新增,删除等。常用方法有readFile和readFileSync,分别是异步读取文件和同步读取文件。

const fs = require('fs');const buffer = fs.readFileSync('./name.txt', 'utf8'); // 如果不传入编码,出来的是二进制console.log(buffer);

fs.access: 判断是否存在,node10提供的,exists方法已经被废弃, 原因是不符合node规范,所以我们采用access来判断文件是否存在。

try {    fs.accessSync('./name.txt');} catch(e) {    // 文件不存在}

4.手动实现require模块加载器

首先导入依赖的模块path,fs, vm, 并且创建一个Require函数,这个函数接收一个modulePath参数,表示要导入的文件路径。

// 导入依赖const path = require('path'); // 路径操作const fs = require('fs'); // 文件读取const vm = require('vm'); // 文件执行// 定义导入类,参数为模块路径function Require(modulePath) {    ...}

在Require中获取到模块的绝对路径,方便使用fs加载模块,这里读取模块内容我们使用new Module来抽象,使用tryModuleLoad来加载模块内容,Module和tryModuleLoad我们稍后实现,Require的返回值应该是模块的内容,也就是module.exports。

// 定义导入类,参数为模块路径function Require(modulePath) {    // 获取当前要加载的绝对路径    let absPathname = path.resolve(__dirname, modulePath);    // 创建模块,新建Module实例    const module = new Module(absPathname);    // 加载当前模块    tryModuleLoad(module);    // 返回exports对象    return module.exports;}

Module的实现很简单,就是给模块创建一个exports对象,tryModuleLoad执行的时候将内容加入到exports中,id就是模块的绝对路径。

// 定义模块, 添加文件id标识和exports属性function Module(id) {    this.id = id;    // 读取到的文件内容会放在exports中    this.exports = {};}

之前我们说过node模块是运行在一个函数中,这里我们给Module挂载静态属性wrapper,里面定义一下这个函数的字符串,wrapper是一个数组,数组的第一个元素就是函数的参数部分,其中有exports,module. Require,__dirname, __filename, 都是我们模块中常用的全局变量。注意这里传入的Require参数是我们自己定义的Require。

第二个参数就是函数的结束部分。两部分都是字符串,使用的时候我们将他们包裹在模块的字符串外部就可以了。

Module.wrapper = [    "(function(exports, module, Require, __dirname, __filename) {",    "})"]

_extensions用于针对不同的模块扩展名使用不同的加载方式,比如JSON和javascript加载方式肯定是不同的。JSON使用JSON.parse来运行。

javascript使用vm.runInThisContext来运行,可以看到fs.readFileSync传入的是module.id也就是我们Module定义时候id存储的是模块的绝对路径,读取到的content是一个字符串,我们使用Module.wrapper来包裹一下就相当于在这个模块外部又包裹了一个函数,也就实现了私有作用域。

使用call来执行fn函数,第一个参数改变运行的this我们传入module.exports,后面的参数就是函数外面包裹参数exports, module, Require, __dirname, __filename

Module._extensions = {    '.js'(module) {        const content = fs.readFileSync(module.id, 'utf8');        const fnStr = Module.wrapper[0] + content + Module.wrapper[1];        const fn = vm.runInThisContext(fnStr);        fn.call(module.exports, module.exports, module, Require,_filename,_dirname);    },    '.json'(module) {        const json = fs.readFileSync(module.id, 'utf8');        module.exports = JSON.parse(json); // 把文件的结果放在exports属性上    }}

tryModuleLoad函数接收的是模块对象,通过path.extname来获取模块的后缀名,然后使用Module._extensions来加载模块。

// 定义模块加载方法function tryModuleLoad(module) {    // 获取扩展名    const extension = path.extname(module.id);    // 通过后缀加载当前模块    Module._extensions[extension](module);}

至此Require加载机制我们基本就写完了,我们来重新看一下。Require加载模块的时候传入模块名称,在Require方法中使用path.resolve(__dirname, modulePath)获取到文件的绝对路径。然后通过new Module实例化的方式创建module对象,将模块的绝对路径存储在module的id属性中,在module中创建exports属性为一个json对象。

使用tryModuleLoad方法去加载模块,tryModuleLoad中使用path.extname获取到文件的扩展名,然后根据扩展名来执行对应的模块加载机制。

最终将加载到的模块挂载module.exports中。tryModuleLoad执行完毕之后module.exports已经存在了,直接返回就可以了。

// 导入依赖const path = require('path'); // 路径操作const fs = require('fs'); // 文件读取const vm = require('vm'); // 文件执行// 定义导入类,参数为模块路径function Require(modulePath) {    // 获取当前要加载的绝对路径    let absPathname = path.resolve(__dirname, modulePath);    // 创建模块,新建Module实例    const module = new Module(absPathname);    // 加载当前模块    tryModuleLoad(module);    // 返回exports对象    return module.exports;}// 定义模块, 添加文件id标识和exports属性function Module(id) {    this.id = id;    // 读取到的文件内容会放在exports中    this.exports = {};}// 定义包裹模块内容的函数Module.wrapper = [    "(function(exports, module, Require, __dirname, __filename) {",    "})"]// 定义扩展名,不同的扩展名,加载方式不同,实现js和jsonModule._extensions = {    '.js'(module) {        const content = fs.readFileSync(module.id, 'utf8');        const fnStr = Module.wrapper[0] + content + Module.wrapper[1];        const fn = vm.runInThisContext(fnStr);        fn.call(module.exports, module.exports, module, Require,_filename,_dirname);    },    '.json'(module) {        const json = fs.readFileSync(module.id, 'utf8');        module.exports = JSON.parse(json); // 把文件的结果放在exports属性上    }}// 定义模块加载方法function tryModuleLoad(module) {    // 获取扩展名    const extension = path.extname(module.id);    // 通过后缀加载当前模块    Module._extensions[extension](module);}

5.给模块添加缓存

添加缓存也比较简单,就是文件加载的时候将文件放入缓存在,再去加载模块时先看缓存中是否存在,如果存在直接使用,如果不存在再去重新嘉爱,加载之后再放入缓存。

// 定义导入类,参数为模块路径function Require(modulePath) {    // 获取当前要加载的绝对路径    let absPathname = path.resolve(__dirname, modulePath);    // 从缓存中读取,如果存在,直接返回结果    if (Module._cache[absPathname]) {        return Module._cache[absPathname].exports;    }    // 尝试加载当前模块    tryModuleLoad(module);    // 创建模块,新建Module实例    const module = new Module(absPathname);    // 添加缓存    Module._cache[absPathname] = module;    // 加载当前模块    tryModuleLoad(module);    // 返回exports对象    return module.exports;}

6.自动补全路径

自动给模块添加后缀名,实现省略后缀名加载模块,其实也就是如果文件没有后缀名的时候遍历一下所有的后缀名看一下文件是否存在。

// 定义导入类,参数为模块路径function Require(modulePath) {    // 获取当前要加载的绝对路径    let absPathname = path.resolve(__dirname, modulePath);    // 获取所有后缀名    const extNames = Object.keys(Module._extensions);    let index = 0;    // 存储原始文件路径    const oldPath = absPathname;    function findExt(absPathname) {        if (index === extNames.length) {           return throw new Error('文件不存在');        }        try {            fs.accessSync(absPathname);            return absPathname;        } catch(e) {            const ext = extNames[index++];            findExt(oldPath + ext);        }    }    // 递归追加后缀名,判断文件是否存在    absPathname = findExt(absPathname);    // 从缓存中读取,如果存在,直接返回结果    if (Module._cache[absPathname]) {        return Module._cache[absPathname].exports;    }    // 尝试加载当前模块    tryModuleLoad(module);    // 创建模块,新建Module实例    const module = new Module(absPathname);    // 添加缓存    Module._cache[absPathname] = module;    // 加载当前模块    tryModuleLoad(module);    // 返回exports对象    return module.exports;}

7.分析实现步骤

导入相关模块,创建一个Require方法。

抽离通过Module._load方法,用于加载模块。

Module.resolveFilename 根据相对路径,转换成绝对路径。

缓存模块 Module._cache,同一个模块不要重复加载,提升性能。

创建模块 id: 保存的内容是 exports = {}相当于this。

利用tryModuleLoad(module, filename) 尝试加载模块。

Module._extensions使用读取文件。

Module.wrap: 把读取到的js包裹一个函数。

将拿到的字符串使用runInThisContext运行字符串。

让字符串执行并将this改编成exports。

关于require加载器的原理是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: require加载器的原理是什么

本文链接: https://www.lsjlt.com/news/271083.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • require加载器的原理是什么
    这篇文章给大家介绍require加载器的原理是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1.node模块化的实现node中是自带模块化机制的,每个文件就是一个单独的模块,并且它遵循的是CommonJS规范,也就...
    99+
    2023-06-14
  • require加载器实现原理的深入理解
    前言 我们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下我们会在浏览器中去运行java...
    99+
    2024-04-02
  • Node.js中Require机制的原理是什么
    这篇文章给大家介绍Node.js中Require机制的原理是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。什么是 CommonJS每一个文件就是一个模块,拥有自己独立的作用域,变量...
    99+
    2024-04-02
  • Tomcat类加载器的工作原理是什么
    Tomcat类加载器的工作原理是通过使用Java类加载器来加载Web应用程序的类。Tomcat使用了一种层次结构的类加载器体系,每个...
    99+
    2024-04-02
  • webpack的异步加载原理是什么
    这篇文章主要讲解了“webpack的异步加载原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“webpack的异步加载原理是什么”吧!webpack ...
    99+
    2024-04-02
  • unity异步加载原理是什么
    Unity的异步加载原理是利用协程(Coroutine)和异步操作(AsyncOperation)来实现的。在Unity中,协程是一...
    99+
    2023-09-29
    unity
  • java懒加载的实现原理是什么
    Java的懒加载(Lazy Loading)是一种延迟加载的策略,即在需要使用某个对象时才进行实例化和初始化,在之前不会占用额外的资...
    99+
    2023-09-14
    java
  • 全加器的原理是什么
    这篇文章将为大家详细讲解有关全加器的原理是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。全加器原理:全加器英语名称为full-adder,是用门电路实现两个二进制数相加并求出和的组合线路...
    99+
    2023-06-14
  • SpringBoot中bootstrap.properties文件加载的原理是什么
    这篇文章主要介绍“SpringBoot中bootstrap.properties文件加载的原理是什么”,在日常操作中,相信很多人在SpringBoot中bootstrap.properties文件加载的原理是什么问题上存在疑惑,小编查阅了各...
    99+
    2023-06-22
  • Android中setContentView加载布局的原理是什么
    Android中setContentView加载布局的原理是什么?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。Activiy setContentView源码分析 p...
    99+
    2023-05-30
    android setcontentview
  • SpringBoot属性文件加载原理是什么
    本篇内容介绍了“SpringBoot属性文件加载原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前言首先我们来看一个问题。就是我们在...
    99+
    2023-06-29
  • Node.js中模块加载机制的原理是什么
    这期内容当中小编将会给大家带来有关Node.js中模块加载机制的原理是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。简单例子老规矩,讲原理前我们先来一个简单的例子,从...
    99+
    2024-04-02
  • JVM加载class文件的原理机制是什么
    今天小编给大家分享一下JVM加载class文件的原理机制是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、JVM简介J...
    99+
    2023-06-30
  • 单步调试理解webpack里通过require加载nodejs原生模块实现原理
    在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块。原生模块的加载,比如:const path = require("path");这个语句是webpack和nodejs...
    99+
    2023-06-03
  • 前端JS图片懒加载原理是什么
    这篇文章主要介绍“前端JS图片懒加载原理是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“前端JS图片懒加载原理是什么”文章能帮助大家解决问题。原理图片懒加载的原理是没有在可视区域的图片暂时不加载...
    99+
    2023-07-05
  • CDN的加速原理是什么
    这篇文章主要介绍“CDN的加速原理是什么”,在日常操作中,相信很多人在CDN的加速原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CDN的加速原理是什么”的疑惑有所帮...
    99+
    2024-04-02
  • CSS/JS网页资源阻塞浏览器加载的原理是什么
    本篇内容介绍了“CSS/JS网页资源阻塞浏览器加载的原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!正文一个页面允许加载的外部资源有...
    99+
    2023-07-05
  • 负载均衡的原理是什么
    负载均衡的原理是指将大量请求作业合理地分摊到多个操作单元上进行执行,从而解决网络中的高并发和高可用问题。具体内容如下:负载均衡是高可用网络基础架构的一个关键组成部分,有了负载均衡,我们通常可以将我们的应用服务器部署多台,然后通过负载均衡将用...
    99+
    2024-04-02
  • 浏览器中css加载失败的原因是什么
    这篇文章主要介绍了浏览器中css加载失败的原因是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇浏览器中css加载失败的原因是什么文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • cdn加速是什么原理
    cdn加速的原理有以下几点负载均衡技术cdn中的负载均衡就是将网络的流量尽可能均匀分配到几个能完成相同任务的服务器或网络节点上,由此来避免部分网络节点过载。缓存技术 cdn通过缓存来改善用户的响应时间,如代理缓存服务、透明代理缓存服务、使用...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作