如何手动实现一个 JavaScript 模块执行器

如果给你下面这样一个代码片段(动态获取的代码字符串),让你在前端动态引入这个模块并执行里面的函数,你会如何处理呢?

module.exports = {
 name : 'ConardLi',
 action : function(){
  console.log(this.name);
 }
}; 

node 环境的执行

如果在 node 环境,我们可能会很快的想到使用 Module 模块, Module 模块中有一个私有函数 _compile,可以动态的加载一个模块:

export function getRuleFromString(code) {
 const myModule = new Module('my-module');
 myModule._compile(code,'my-module');
 return myModule.exports;
} 

实现就是这么简单,后面我们会回顾一下 _compile 函数的原理,但是需求可不是这么简单,我们如果要在前端环境动态引入这段代码呢?

嗯,你没听错,最近正好碰到了这样的需求,需要在前端和 Node 端抹平动态引入模块的逻辑,好,下面我们来模仿 Module 模块实现一个前端环境的 JavaScript 模块执行器。

首先我们先来回顾一下 node 中的模块加载原理。

node Module 模块加载原理

Node.js 遵循 CommonJS 规范,该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来导出需要暴露的接口。其主要是为了解决 JavaScript 的作用域问题而定义的模块形式,可以使每个模块它自身的命名空间中执行。

再在每个 NodeJs 模块中,我们都能取到 module、exports、__dirname、__filename 和 require 这些模块。并且每个模块的执行作用域都是相互隔离的,互不影响。

其实上面整个模块系统的核心就是 Module 类的 _compile 方法,我们直接来看 _compile 的源码:

Module.prototype._compile = function(content, filename) {
 // 去除 Shebang 代码
 content = internalModule.stripShebang(content); 

 // 1.创建封装函数
 var wrapper = Module.wrap(content); 

 // 2.在当前上下文编译模块的封装函数代码
 var compiledWrapper = vm.runInThisContext(wrapper, {
  filename: filename,
  lineOffset: 0,
  displayErrors: true
 }); 

 var dirname = path.dirname(filename);
 var require = internalModule.makeRequireFunction(this);
 var depth = internalModule.requireDepth; 

 // 3.运行模块的封装函数并传入 module、exports、__dirname、__filename、require
 var result = compiledWrapper.call(this.exports, this.exports, require, this, filename, dirname);
 return result;
}; 

整个执行过程我将其分为三步:

创建封装函数

第一步即调用 Module 内部的 wrapper 函数对模块的原始内容进行封装,我们先来看看 wrapper 函数的实现:

Module.wrap = function(script) {
 return Module.wrapper[0] + script + Module.wrapper[1];
}; 

Module.wrapper = [
 '(function (exports, require, module, __filename, __dirname) { ',
 '\n});'
]; 

CommonJS 的主要目的就是解决 JavaScript 的作用域问题,可以使每个模块它自身的命名空间中执行。在没有模块化方案的时候,我们一般会创建一个自执行函数来避免变量污染:

(function(global){
 // 执行代码。。
})(window) 

所以这一步至关重要,首先 wrapper 函数就将模块本身的代码片段包裹在一个函数作用域内,并且将我们需要用到的对象作为参数引入。所以上面的代码块被包裹后就变成了:

(function (exports, require, module, __filename, __dirname) {
 module.exports = {
  name : 'ConardLi',
  action : function(){
   console.log(this.name);
  }
 };
}); 

编译封装函数代码

NodeJs 中的 vm 模块提供了一系列 API 用于在 V8 虚拟机环境中编译和运行代码。JavaScript 代码可以被编译并立即运行,或编译、保存然后再运行。

vm.runInThisContext() 在当前的 global 对象的上下文中编译并执行 code,最后返回结果。运行中的代码无法获取本地作用域,但可以获取当前的 global 对象。

var compiledWrapper = vm.runInThisContext(wrapper, {
 filename: filename,
 lineOffset: 0,
 displayErrors: true
}); 

所以以上代码执行后,就将代码片段字符串编译成了一个真正的可执行函数:

(function (exports, require, module, __filename, __dirname) {
 module.exports = {
  name : 'ConardLi',
  action : function(){
   console.log(this.name);
  }
 };
}); 

运行封装函数

最后通过 call 来执行编译得到的可执行函数,并传入对应的对象。

var result = compiledWrapper.call(this.exports, this.exports, require, this, filename, dirname); 

所以看到这里你应该会明白,我们在模块中拿到的 module,就是 Module 模块的实例本身,我们直接调用的 exports 实际上是 module.exports 的引用,所以我们既可以使用 module.exports 也可以使用 exports 来导出一个模块。

实现 Module 模块

如果我们想在前端环境执行一个 CommonJS 模块,那么我们只需要手动实现一个 Module 模块就好了,重新梳理上面的流程,如果只考虑模块代码块动态引入的逻辑,我们可以抽象出下面的代码:

export default class Module {
 exports = {}
 wrapper = [
  'return (function (exports, module) { ',
  '\n});'
 ]; 

 wrap(script) {
  return `${this.wrapper[0]} ${script} ${this.wrapper[1]}`;
 }; 

 compile(content) {
  const wrapper = this.wrap(content);
  const compiledWrapper = vm.runInContext(wrapper);
  compiledWrapper.call(this.exports, this.exports, this);
 }
} 

这里有个问题,在浏览器环境是没有 VM 这个模块的,VM 会将代码加载到一个上下文环境中,置入沙箱(sandbox),让代码的整个操作执行都在封闭的上下文环境中进行,我们需要自己实现一个浏览器环境的沙箱。

实现浏览器沙箱

eval

在浏览器执行一段代码片段,我们首先想到的可能就是 eval, eval 函数可以将一个 Javascript 字符串视作代码片段执行。

但是,由 eval() 执行的代码能够访问闭包和全局作用域,这会导致被称为代码注入 code injection 的安全隐患, eval 虽然好用,但是经常被滥用,是 JavaScript 最臭名昭著的功能之一。

所以,后来又出现了很多在沙箱而非全局作用域中的执行字符串代码的值的替代方案。

new Function()

Function 构造器是 eval() 的一个替代方案。new Function(...args, 'funcBody') 对传入的 'funcBody' 字符串进行求值,并返回执行这段代码的函数。

fn = new Function(...args, 'functionBody'); 

返回的 fn 是一个定义好的函数,最后一个参数为函数体。它和 eval 有两点区别:

  • fn 是一段编译好的代码,可以直接执行,而 eval 需要编译一次
  • fn 没有对所在闭包的作用域访问权限,不过它依然能够访问全局作用域

但是这仍然不能解决访问全局作用域的问题。

with 关键词

with 是 JavaScript 一个冷门的关键字。它允许一个半沙箱的运行环境。with 代码块中的代码会首先试图从传入的沙箱对象获得变量,但是如果没找到,则会在闭包和全局作用域中寻找。闭包作用域的访问可以用new Function() 来避免,所以我们只需要处理全局作用域。with 内部使用 in 运算符。在块中访问每个变量,都会使用 variable in sandbox 条件进行判断。若条件为真,则从沙箱对象中读取变量。否则,它会在全局作用域中寻找变量。

function compileCode(src) {
 src = 'with (sandbox) {' + src + '}'
 return new Function('sandbox', src)
} 

试想,如果 variable in sandbox 条件永远为真,沙箱环境不就永远也读取不到环境变量了吗?所以我们需要劫持沙箱对象的属性,让所有的属性永远都能读取到。

Proxy

ES6 中提供了一个 Proxy 函数,它是访问对象前的一个拦截器,我们可以利用 Proxy 来拦截 sandbox 的属性,让所有的属性都可以读取到:

function compileCode(code) {
 code = 'with (sandbox) {' + code + '}';
 const fn = new Function('sandbox', code);
 return (sandbox) => {
  const proxy = new Proxy(sandbox, {
   has() {
    return true;
   }
  });
  return fn(proxy);
 }
} 

Symbol.unscopables

Symbol.unscopables 是一个著名的标记。一个著名的标记即是一个内置的 JavaScript Symbol,它可以用来代表内部语言行为。

Symbol.unscopables 定义了一个对象的 unscopable(不可限定)属性。在 with 语句中,不能从 Sandbox 对象中检索 Unscopable 属性,而是直接从闭包或全局作用域检索属性。

所以我们需要对 Symbol.unscopables 这种情况做一次加固,

function compileCode(code) {
 code = 'with (sandbox) {' + code + '}';
 const fn = new Function('sandbox', code);
 return (sandbox) => {
  const proxy = new Proxy(sandbox, {
   has() {
    return true;
   },
   get(target, key, receiver) {
    if (key === Symbol.unscopables) {
     return undefined;
    }
    Reflect.get(target, key, receiver);
   }
  });
  return fn(proxy);
 }
} 

全局变量白名单

但是,这时沙箱里是执行不了浏览器默认为我们提供的各种工具类和函数的,它只能作为一个没有任何副作用的纯函数,当我们想要使用某些全局变量或类时,可以自定义一个白名单:

const ALLOW_LIST = ['console']; 

function compileCode(code) {
 code = 'with (sandbox) {' + code + '}';
 const fn = new Function('sandbox', code);
 return (sandbox) => {
  const proxy = new Proxy(sandbox, {
   has() {
    if (!ALLOW_LIST.includes(key)) {
      return true;
    }
   },
   get(target, key, receiver) {
    if (key === Symbol.unscopables) {
     return undefined;
    }
    Reflect.get(target, key, receiver);
   }
  });
  return fn(proxy);
 }
} 

最终代码:

好了,总结上面的代码,我们就完成了一个简易的 JavaScript 模块执行器:

const ALLOW_LIST = ['console']; 

export default class Module { 

 exports = {}
 wrapper = [
  'return (function (exports, module) { ',
  '\n});'
 ]; 

 wrap(script) {
  return `${this.wrapper[0]} ${script} ${this.wrapper[1]}`;
 }; 

 runInContext(code) {
  code = `with (sandbox) { $[code] }`;
  const fn = new Function('sandbox', code);
  return (sandbox) => {
   const proxy = new Proxy(sandbox, {
    has(target, key) {
     if (!ALLOW_LIST.includes(key)) {
      return true;
     }
    },
    get(target, key, receiver) {
     if (key === Symbol.unscopables) {
      return undefined;
     }
     Reflect.get(target, key, receiver);
    }
   });
   return fn(proxy);
  }
 } 

 compile(content) {
  const wrapper = this.wrap(content);
  const compiledWrapper = this.runInContext(wrapper)({});
  compiledWrapper.call(this.exports, this.exports, this);
 }
} 

测试执行效果:

function getModuleFromString(code) {
 const scanModule = new Module();
 scanModule.compile(code);
 return scanModule.exports;
} 

const module = getModuleFromString(`
module.exports = {
 name : 'ConardLi',
 action : function(){
  console.log(this.name);
 }
};
`); 

module.action(); // ConardLi 

以上就是如何手动实现一个 JavaScript 模块执行器的详细内容,更多关于JavaScript 模块执行器的资料请关注我们其它相关文章!

时间: 2020-10-15

Python是怎样处理json模块的

首先,了解下什么是JSON? JSON:JavaScript Object Notation [JavaScript 对象表示法] JSON 是一种轻量级的数据交换格式,完全独立于任何程序语言的文本格式.一般,后台应用程序将响应数据封装成JSON格式返回. JSON的基本语法如下:JSON名称/值对.JSON 数据的书写格式是:名称/值对.名称/值对包括字段名称(在双引号中),然后着是一个冒号(:),最后是值. JSON最常用的格式是对象的键值对:key只能是string, value可以是 o

谈谈node.js中的模块系统

Node.js 的模块 JavaScript 做为一门为网页添加交互功能的简单脚本语言问世,在诞生时并不包含模块系统,随着 JavaScript 解决问题越来越复杂,把所有代码写在一个文件内,用 function 区分功能单元已经不能支撑复杂应用开发了,ES6 带来了大部分高级语言都有的 class 和 module,方便开发者组织代码 import _ from 'lodash'; class Fun {} export default Fun; 上面三行代码展示了一个模块系统最重要的两个要素

Node.js中文件系统fs模块的使用及常用接口

fs是filesystem的缩写,该模块提供本地文件的读写能力,基本上是POSIX文件操作命令的简单包装.但是,这个模块几乎对所有操作提供异步和同步两种操作方式,供开发者选择. JavaScript 的是没有操作文件的能力,但是 Node 是可以做到的,Node 提供了操作文件系统模块,是 Node 中使用非常重要和高频的模块,是绝对要掌握的一个模块系统. fs 模块提供了非常多的接口,这里主要说一下一些常用的接口. 1.常用API快速复习 fs.stat 检测是文件还是目录 const fs

Node.js API详解之 dgram模块用法实例分析

本文实例讲述了Node.js API详解之 dgram模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 dgram dgram模块提供了 UDP 数据包 socket 的实现. 使用以下方式引用: const dgram = require('dgram'); dgram.createSocket(options[, callback]) 说明: 创建一个 dgram.Socket 对象. 一旦创建了套接字,调用 socket.bind() 会指示套接字开始监听数据报消息

JavaScript 几种循环方式以及模块化的总结

小小最近学习到了js的几种循环方式,对这几种循环方式进行总结.以及对模块化的相关知识点进行总结, 循环方式 循环方式分为好几种循环方式,分别是for循环,forEach循环,map循环,for..in循环,for-of循环,jquery的循环. 小小将会依次对这几种循环方式进行介绍. 一般数组遍历循环 这里使用常用的数组遍历方式. 一般来说,常用的数组遍历如下 for (var index = 0; index < myArray.length; index++) { console.log(m

通过实例了解Nodejs模块系统及require机制

一.简介 Nodejs 有一个简单的模块加载系统.在 Nodejs 中,文件和模块是一一对应的(每个文件被视为一个独立的模块),这个文件可能是 JavaScript 代码,JSON 或编译过的C/C++ 扩展,例如: /** *foo.js *将这个js文件导出为模块 */ exports.hello = function() { console.log("hello Nodejs!"); } /** *main.js *main.js和foo.js在同一目录下 *在控制台中将会输出:

详解Node.JS模块 process

process 模块是 nodejs 提供给开发者用来和当前进程交互的工具,它的提供了很多实用的 API.从文档出发,管中窥豹,进一步认识和学习 process 模块: 如何处理命令参数? 如何处理工作目录? 如何处理异常? 如何处理进程退出? process 的标准流对象 深入理解 process.nextTick 如何处理命令参数? 命令行参数指的是 2 个方面: 传给 node 的参数.例如 node --harmony script.js --version 中,--harmony 就是

Python json模块与jsonpath模块区别详解

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它使得人们很容易的进行阅读和编写.同时也方便了机器进行解析和生成.适用于进行数据交互的场景,比如网站前台与后台之间的数据交互. JSON和XML相比较可谓不相上下. Python 3.X中自带了JSON模块,直接import json就可以使用了. 官方文档:http://docs.python.org/library/json.html Json在线解析网站:http://www.json.cn/ JS

JavaScript 模块化开发实例详解【seajs、requirejs库使用】

本文实例讲述了JavaScript 模块化开发.分享给大家供大家参考,具体如下: JS开发的问题 冲突 依赖 JS引入的文件,产生依赖. 使用命名空间解决: 命名空间的弊端 调用的时候 名字比较长. 只能减低冲突,不能完全避免 SeaJs使用 引入sea.js的库 如何变成模块? define 如何调用模块? exports 和 seajs.use 如何依赖模块? require //html: <script src="js/sea.js" type="text/ja

在Html中使用Requirejs进行模块化开发实例详解

在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理.这里就介绍下如何通过requirejs,实现html代码的模块化开发. 如何使用requirejs加载html Reuqirejs有一个text的插件,它可以读取指定文件的内容,读取到的内容就是文本. 如何下载text插件 第一种方法,可以通过npm下载: npm install requirejs/text 第二种方法,也可以直接去官方github上面直接下载. 直接拷贝内容到text.js中即可. 如何安装t

Android USB转串口通信开发实例详解

 Android USB转串口通信开发实例详解 好久没有写文章了,年前公司新开了一个项目,是和usb转串口通信相关的,需求是用安卓平板通过usb转接后与好几个外设进行通信,一直忙到最近,才慢慢闲下来,趁着这个周末不忙,记录下usb转串口通信开发的基本流程. 我们开发使用的是usb主机模式,即:安卓平板作为主机,usb外设作为从机进行数据通信.整个开发流程可以总结为以下几点: 1.发现设备 UsbManager usbManager = (UsbManager) context.getSystem

Android6.0指纹识别开发实例详解

Android6.0指纹识别开发实例详解 最近在做android指纹相关的功能,谷歌在android6.0及以上版本对指纹识别进行了官方支持.当时在FingerprintManager和FingerprintManagerCompat这两个之间纠结,其中使用FingerprintManager要引入com.android.support:appcompat-v7包,考虑到包的大小,决定使用v4兼容包FingerprintManagerCompat来实现. 主要实现的工具类FingerprintU

JavaScript hasOwnProperty() 函数实例详解

hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性.如果有,返回true,否则返回false. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. IE 5.5+.FireFox.Chrome.Safari.Opera等主流浏览器均支持该函数. 语法 object.hasOwnProperty( propertyName ) 参数 参数 描述 propertyName Str

Android 音乐播放器的开发实例详解

本文将引导大家做一个音乐播放器,在做这个Android开发实例的过程中,能够帮助大家进一步熟悉和掌握学过的ListView和其他一些组件.为了有更好的学习效果,其中很多功能我们手动实现,例如音乐播放的快进快退等. 先欣赏下本实例完成后运行的界面效果: 首先我们建立项目,我使用的SDK是Android2.2的,然后在XML中进行布局. 上方是一个ListView用来显示我们的音乐列表,中间是一个SeekBar可以拖动当前音乐的播放进度,之所以用SeekBar而不用ProgressBar是因为我们需

JavaScript命名空间模式实例详解

本文实例讲述了JavaScript命名空间模式.分享给大家供大家参考,具体如下: 前言 命名空间可以被认为是唯一标识符下代码的逻辑分组.为什么会出现命名空间这一概念呢?因为可用的单词数太少,并且不同的人写的程序不可能所有的变量都没有重名现象.在JavaScript中,命名空间可以帮助我们防止与全局命名空间下的其他对象或变量产生冲突.命名空间也有助于组织代码,有更强的可维护性和可读性.本文旨在探讨JavaScript里的几种常见命名空间模式,为我们提供一个思路. JavaScript执行环境有很多

JavaScript作用域链实例详解

本文实例讲述了JavaScript作用域链.分享给大家供大家参考,具体如下: 跟其他语言一样,变量和函数的作用域揭示了这些变量和函数的搜索路径.对于JavaScript而言,理解作用域更加重要,因为在JavaScript中,作用域可以用来确定this的值,并且JavaScript有闭包,闭包是可以访问外部环境的作用域的. 每一个JavaScript的函数都是Function对象的一个实例,Function对象有一个内部属性[[Scope]],这个属性只能被JavaScript的引擎访问.通过[[

JavaScript模块模式实例详解

本文实例讲述了JavaScript模块模式.分享给大家供大家参考,具体如下: 在JS中没有Class的概念,那么如何体现Object的Public和Private属性呢,答案就是模块模式(Module Pattern). JS中有一个显著的特性: 匿名函数(anonymous function),通过匿名函数的建立和执行,匿名函数里的代码就形成了一个闭包(closure),从而形成,封装和控制一个对象的Private和Public的特性,避免了全局变量的泛滥和与其他脚本的冲突. (functio

微信小程序开发实例详解

"小程序"破解IDE + Demo:https://github.com/gavinkwoe/weapp-ide-crack.git 资源汇总:https://github.com/Aufree/awesome-wechat-weapp 官方简易教程·MINA:http://wxopen.notedown.cn/ Hello小程序 - 非官方:http://www.helloxcx.com 微信应用号开发教程:https://my.oschina.net/wwnick/blog/750

javascript继承机制实例详解

本文实例讲述了javascript继承机制.分享给大家供大家参考.具体分析如下: 初学javascript一般很难理解Javascript语言的继承机制它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解