一篇带给你No.js的模块加载器实现

前言：最近在 No.js 里实现了一个简单的模块加载器，本文简单介绍一下加载器的实现。

创新互联主要从事网站制作、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务天等,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

因为 JS 本身没有模块加载的概念，随着前端的发展，各种加载技术也发展了起来，早期的seajs，requirejs，现在的 webpack，Node.js等等，模块加载器的背景是代码的模块化，因为我们不可能把所有代码写到同一个文件，所以模块加载器主要是解决模块中加载其他模块的问题，不仅是前端语言，c语言、python、php同样也是这样。No.js 参考的是 Node.js的实现。比如我们有以下两个模块。module1.js

 
 
 
    
  
  
  
  1. const func = require("module2");func(); 
    2.

module2.js

 
 
 
    
  
  
  
  1. module.exports = () => { 
    2.   
  
  
  2.     // some code 
    3.   
  
  
  3.  
    4.   
  
  
  4. } 
    5.

我们看看如何实现模块加载的功能。首先看看运行时执行的时候，是如何加载第一个模块的。No.js 在初始化时会通过 V8 执行 No.js文件。

 
 
 
    
  
  
  
  1. const { 
    2.   
  
  
  2.     loader, 
    3.   
  
  
  3.     process, 
    4.   
  
  
  4.  
    5.   
  
  
  5. } = No; 
    6.   
  
  
  6.  
    7.   
  
  
  7.  
    8.   
  
  
  8.  
    9.   
  
  
  9. function loaderNativeModule() { 
    10.   
  
  
  10.     // 原生 JS模块列表 
    11.   
  
  
  11.     const modules = [ 
    12.   
  
  
  12.         { 
    13.   
  
  
  13.             module: 'libs/module/index.js', 
    14.   
  
  
  14.             name: 'module' 
    15.   
  
  
  15.         }, 
    16.   
  
  
  16.     ]; 
    17.   
  
  
  17.     No.libs = {}; 
    18.   
  
  
  18.     // 初始化 
    19.   
  
  
  19.     for (let i = 0; i < modules.length; i++) { 
    20.   
  
  
  20.         const module = { 
    21.   
  
  
  21.             exports: {}, 
    22.   
  
  
  22.         }; 
    23.   
  
  
  23.         loader.compile(modules[i].module).call(null, loader.compile, module.exports, module); 
    24.   
  
  
  24.         No.libs[modules[i].name] = module.exports; 
    25.   
  
  
  25.  
    26.   
  
  
  26.         } 
    27.   
  
  
  27.  
    28.   
  
  
  28. } 
    29.   
  
  
  29.  
    30.   
  
  
  30.  
    31.   
  
  
  31. function runMain() { 
    32.   
  
  
  32.     No.libs.module.load(process.argv[1]); 
    33.   
  
  
  33.  
    34.   
  
  
  34. } 
    35.   
  
  
  35.  
    36.   
  
  
  36. loaderNativeModule();runMain(); 
    37.

No.js文件的逻辑主要是两个，加载原生 JS 模块和执行用户的 JS。首先来看一下如何加载原生JS模块，模块加载是通过loader.compile实现的，loader.compile是 V8 函数的封装。

 
 
 
    
  
  
  
  1. void No::Loader::Compile(V8_ARGS) { 
    2.   
  
  
  2.     V8_ISOLATE 
    3.   
  
  
  3.     V8_CONTEXT 
    4.   
  
  
  4.     String::Utf8Value filename(isolate, args[0].As()); 
    5.   
  
  
  5.     int fd = open(*filename, 0 , O_RDONLY); 
    6.   
  
  
  6.     std::string content; 
    7.   
  
  
  7.     char buffer[4096]; 
    8.   
  
  
  8.     while (1) 
    9.   
  
  
  9.     { 
    10.   
  
  
  10.       memset(buffer, 0, 4096); 
    11.   
  
  
  11.       int ret = read(fd, buffer, 4096); 
    12.   
  
  
  12.       if (ret == -1) { 
    13.   
  
  
  13.         return args.GetReturnValue().Set(newStringToLcal(isolate, "read file error")); 
    14.   
  
  
  14.       } 
    15.   
  
  
  15.       if (ret == 0) { 
    16.   
  
  
  16.         break; 
    17.   
  
  
  17.       } 
    18.   
  
  
  18.       content.append(buffer, ret); 
    19.   
  
  
  19.     } 
    20.   
  
  
  20.     close(fd); 
    21.   
  
  
  21.     ScriptCompiler::Source script_source(newStringToLcal(isolate, content.c_str())); 
    22.   
  
  
  22.     Local params[] = { 
    23.   
  
  
  23.       newStringToLcal(isolate, "require"), 
    24.   
  
  
  24.       newStringToLcal(isolate, "exports"), 
    25.   
  
  
  25.       newStringToLcal(isolate, "module"), 
    26.   
  
  
  26.     }; 
    27.   
  
  
  27.     MaybeLocal fun = 
    28.   
  
  
  28.     ScriptCompiler::CompileFunctionInContext(context, &script_source, 3, params, 0, nullptr); 
    29.   
  
  
  29.     if (fun.IsEmpty()) { 
    30.   
  
  
  30.       args.GetReturnValue().Set(Undefined(isolate)); 
    31.   
  
  
  31.     } else { 
    32.   
  
  
  32.       args.GetReturnValue().Set(fun.ToLocalChecked()); 
    33.   
  
  
  33.     } 
    34.   
  
  
  34.  
    35.   
  
  
  35. } 
    36.

Compile首先读取模块的内容，然后调用CompileFunctionInContext函数。CompileFunctionInContext函数的原理如下。假设文件内容是 1 + 1。执行以下代码后

 
 
 
    
  
  
  
  1. const ret = CompileFunctionInContext("1+1", ["require", "exports", "module"]) 
    2.

ret变成

 
 
 
    
  
  
  
  1. function (require, exports, module) { 
    2.   
  
  
  2.     1 + 1; 
    3.   
  
  
  3.  
    4.   
  
  
  4. } 
    5.

所以CompileFunctionInContext的作用是把代码封装到一个函数中，并且可以设置该函数的形参列表。回到原生 JS 的加载过程。

 
 
 
    
  
  
  
  1. for (let i = 0; i < modules.length; i++) { 
    2.   
  
  
  2.         const module = { 
    3.   
  
  
  3.             exports: {}, 
    4.   
  
  
  4.         }; 
    5.   
  
  
  5.         loader.compile(modules[i].module).call(null, loader.compile, module.exports, module); 
    6.   
  
  
  6.         No.libs[modules[i].name] = module.exports;      
    7.   
  
  
  7. } 
    8.

首先通过loader.compile和模块内容得到一个函数，然后传入参数执行该函数。我们看看原生JS 模块的代码。

 
 
 
    
  
  
  
  1. class Module { 
    2.   
  
  
  2.     // ... 
    3.   
  
  
  3.  
    4.   
  
  
  4. }; 
    5.   
  
  
  5.  
    6.   
  
  
  6.  
    7.   
  
  
  7. module.exports = Module; 
    8.

最后导出了一个Module函数并记录到全局变量 No中。原生模块就加载完毕了，接着执行用户 JS。

 
 
 
    
  
  
  
  1. function runMain() { 
    2.   
  
  
  2.     No.libs.module.load(process.argv[1]); 
    3.   
  
  
  3.  
    4.   
  
  
  4. } 
    5.

我们看看No.libs.module.load。

 
 
 
    
  
  
  
  1. static load(filename, ...args) { 
    2.   
  
  
  2.     if (map[filename]) { 
    3.   
  
  
  3.         return map[filename]; 
    4.   
  
  
  4.     } 
    5.   
  
  
  5.     const module = new Module(filename, ...args); 
    6.   
  
  
  6.     return (map[filename] = module.load()); 
    7.   
  
  
  7.  
    8.   
  
  
  8. } 
    9.

新建一个Module对象，然后执行他的load函数。

 
 
 
    
  
  
  
  1. load() { 
    2.   
  
  
  2.     const result = loader.compile(this.filename); 
    3.   
  
  
  3.     result.call(this, Module.load, this.exports, this); 
    4.   
  
  
  4.     return this.exports; 
    5.   
  
  
  5.  
    6.   
  
  
  6. } 
    7.

load函数最终调用loader.compile拿到一个函数，最后传入三个参数执行该函数，就可以通过module.exports拿到模块的导出内容。从中我们也看到，模块里的require、module和exports到底是哪里来的，内容是什么。

当前名称：一篇带给你No.js的模块加载器实现
文章来源：http://www.shufengxianlan.com/qtweb/news2/212652.html

成都网站建设公司_创新互联，为您提供网站策划、做网站、网站制作、响应式网站、动态网站、外贸网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站建设知识

同城分类信息

网站运营　　 　wap网站制作　　 　成都网页设计　　 　江油网站建设　　 　防护网厂　　 　自适应网站建设　　 　金羊影视传媒　　 　乐山服务器托管　　 　内江做网站　　 　盐亭网站设计　　 　成都广告设计公司　　 　seo优化　　 　手机网站　　 　南充护栏钻孔机　　 　成都服务器租赁　　 　达州托管服务器　　 　绵阳服务器托管　　 　内江托管服务器　　 　鑫友邦火锅桌　　 　成都光华机房服务器托管