如何手動(dòng)實(shí)現(xiàn)一個(gè) JavaScript 模塊執(zhí)行器

更新時(shí)間：2020年10月16日 10:02:09 作者：ConardLi

這篇文章主要介紹了如何手動(dòng)實(shí)現(xiàn)一個(gè) JavaScript 模塊執(zhí)行器，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下

如果給你下面這樣一個(gè)代碼片段(動(dòng)態(tài)獲取的代碼字符串)，讓你在前端動(dòng)態(tài)引入這個(gè)模塊并執(zhí)行里面的函數(shù)，你會(huì)如何處理呢?

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

node 環(huán)境的執(zhí)行

如果在 node 環(huán)境，我們可能會(huì)很快的想到使用 Module 模塊， Module 模塊中有一個(gè)私有函數(shù) _compile，可以動(dòng)態(tài)的加載一個(gè)模塊：

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

實(shí)現(xiàn)就是這么簡(jiǎn)單，后面我們會(huì)回顧一下 _compile 函數(shù)的原理，但是需求可不是這么簡(jiǎn)單，我們?nèi)绻谇岸谁h(huán)境動(dòng)態(tài)引入這段代碼呢?

嗯，你沒(méi)聽(tīng)錯(cuò)，最近正好碰到了這樣的需求，需要在前端和 Node 端抹平動(dòng)態(tài)引入模塊的邏輯，好，下面我們來(lái)模仿 Module 模塊實(shí)現(xiàn)一個(gè)前端環(huán)境的 JavaScript 模塊執(zhí)行器。

首先我們先來(lái)回顧一下 node 中的模塊加載原理。

node Module 模塊加載原理

Node.js 遵循 CommonJS 規(guī)范，該規(guī)范的核心思想是允許模塊通過(guò) require 方法來(lái)同步加載所要依賴的其他模塊，然后通過(guò) exports 或 module.exports 來(lái)導(dǎo)出需要暴露的接口。其主要是為了解決 JavaScript 的作用域問(wèn)題而定義的模塊形式，可以使每個(gè)模塊它自身的命名空間中執(zhí)行。

再在每個(gè) NodeJs 模塊中，我們都能取到 module、exports、__dirname、__filename 和 require 這些模塊。并且每個(gè)模塊的執(zhí)行作用域都是相互隔離的，互不影響。

其實(shí)上面整個(gè)模塊系統(tǒng)的核心就是 Module 類的 _compile 方法，我們直接來(lái)看 _compile 的源碼：

Module.prototype._compile = function(content, filename) { 
 // 去除 Shebang 代碼 
 content = internalModule.stripShebang(content); 
 
 // 1.創(chuàng)建封裝函數(shù) 
 var wrapper = Module.wrap(content); 
 
 // 2.在當(dāng)前上下文編譯模塊的封裝函數(shù)代碼 
 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.運(yùn)行模塊的封裝函數(shù)并傳入 module、exports、__dirname、__filename、require 
 var result = compiledWrapper.call(this.exports, this.exports, require, this, filename, dirname); 
 return result; 
};

整個(gè)執(zhí)行過(guò)程我將其分為三步：

創(chuàng)建封裝函數(shù)

第一步即調(diào)用 Module 內(nèi)部的 wrapper 函數(shù)對(duì)模塊的原始內(nèi)容進(jìn)行封裝，我們先來(lái)看看 wrapper 函數(shù)的實(shí)現(xiàn)：

Module.wrap = function(script) { 
 return Module.wrapper[0] + script + Module.wrapper[1]; 
}; 
 
Module.wrapper = [ 
 '(function (exports, require, module, __filename, __dirname) { ', 
 '\n});' 
];

CommonJS 的主要目的就是解決 JavaScript 的作用域問(wèn)題，可以使每個(gè)模塊它自身的命名空間中執(zhí)行。在沒(méi)有模塊化方案的時(shí)候，我們一般會(huì)創(chuàng)建一個(gè)自執(zhí)行函數(shù)來(lái)避免變量污染：

(function(global){ 
 // 執(zhí)行代碼。。 
})(window)

所以這一步至關(guān)重要，首先 wrapper 函數(shù)就將模塊本身的代碼片段包裹在一個(gè)函數(shù)作用域內(nèi)，并且將我們需要用到的對(duì)象作為參數(shù)引入。所以上面的代碼塊被包裹后就變成了：

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

編譯封裝函數(shù)代碼

NodeJs 中的 vm 模塊提供了一系列 API 用于在 V8 虛擬機(jī)環(huán)境中編譯和運(yùn)行代碼。JavaScript 代碼可以被編譯并立即運(yùn)行，或編譯、保存然后再運(yùn)行。

vm.runInThisContext() 在當(dāng)前的 global 對(duì)象的上下文中編譯并執(zhí)行 code，最后返回結(jié)果。運(yùn)行中的代碼無(wú)法獲取本地作用域，但可以獲取當(dāng)前的 global 對(duì)象。

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

所以以上代碼執(zhí)行后，就將代碼片段字符串編譯成了一個(gè)真正的可執(zhí)行函數(shù)：

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

運(yùn)行封裝函數(shù)

最后通過(guò) call 來(lái)執(zhí)行編譯得到的可執(zhí)行函數(shù)，并傳入對(duì)應(yīng)的對(duì)象。

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

所以看到這里你應(yīng)該會(huì)明白，我們?cè)谀K中拿到的 module，就是 Module 模塊的實(shí)例本身，我們直接調(diào)用的 exports 實(shí)際上是 module.exports 的引用，所以我們既可以使用 module.exports 也可以使用 exports 來(lái)導(dǎo)出一個(gè)模塊。

實(shí)現(xiàn) Module 模塊

如果我們想在前端環(huán)境執(zhí)行一個(gè) CommonJS 模塊，那么我們只需要手動(dòng)實(shí)現(xiàn)一個(gè) Module 模塊就好了，重新梳理上面的流程，如果只考慮模塊代碼塊動(dòng)態(tài)引入的邏輯，我們可以抽象出下面的代碼：

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); 
 } 
}

這里有個(gè)問(wèn)題，在瀏覽器環(huán)境是沒(méi)有 VM 這個(gè)模塊的，VM 會(huì)將代碼加載到一個(gè)上下文環(huán)境中，置入沙箱(sandbox)，讓代碼的整個(gè)操作執(zhí)行都在封閉的上下文環(huán)境中進(jìn)行，我們需要自己實(shí)現(xiàn)一個(gè)瀏覽器環(huán)境的沙箱。

實(shí)現(xiàn)瀏覽器沙箱

eval

在瀏覽器執(zhí)行一段代碼片段，我們首先想到的可能就是 eval， eval 函數(shù)可以將一個(gè) Javascript 字符串視作代碼片段執(zhí)行。

但是，由 eval() 執(zhí)行的代碼能夠訪問(wèn)閉包和全局作用域，這會(huì)導(dǎo)致被稱為代碼注入 code injection 的安全隱患， eval 雖然好用，但是經(jīng)常被濫用，是 JavaScript 最臭名昭著的功能之一。

所以，后來(lái)又出現(xiàn)了很多在沙箱而非全局作用域中的執(zhí)行字符串代碼的值的替代方案。

new Function()

Function 構(gòu)造器是 eval() 的一個(gè)替代方案。new Function(...args, 'funcBody') 對(duì)傳入的 'funcBody' 字符串進(jìn)行求值，并返回執(zhí)行這段代碼的函數(shù)。

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

返回的 fn 是一個(gè)定義好的函數(shù)，最后一個(gè)參數(shù)為函數(shù)體。它和 eval 有兩點(diǎn)區(qū)別：

fn 是一段編譯好的代碼，可以直接執(zhí)行，而 eval 需要編譯一次
fn 沒(méi)有對(duì)所在閉包的作用域訪問(wèn)權(quán)限，不過(guò)它依然能夠訪問(wèn)全局作用域

但是這仍然不能解決訪問(wèn)全局作用域的問(wèn)題。

with 關(guān)鍵詞

with 是 JavaScript 一個(gè)冷門的關(guān)鍵字。它允許一個(gè)半沙箱的運(yùn)行環(huán)境。with 代碼塊中的代碼會(huì)首先試圖從傳入的沙箱對(duì)象獲得變量，但是如果沒(méi)找到，則會(huì)在閉包和全局作用域中尋找。閉包作用域的訪問(wèn)可以用new Function() 來(lái)避免，所以我們只需要處理全局作用域。with 內(nèi)部使用 in 運(yùn)算符。在塊中訪問(wèn)每個(gè)變量，都會(huì)使用 variable in sandbox 條件進(jìn)行判斷。若條件為真，則從沙箱對(duì)象中讀取變量。否則，它會(huì)在全局作用域中尋找變量。

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

試想，如果 variable in sandbox 條件永遠(yuǎn)為真，沙箱環(huán)境不就永遠(yuǎn)也讀取不到環(huán)境變量了嗎?所以我們需要劫持沙箱對(duì)象的屬性，讓所有的屬性永遠(yuǎn)都能讀取到。

Proxy

ES6 中提供了一個(gè) Proxy 函數(shù)，它是訪問(wèn)對(duì)象前的一個(gè)攔截器，我們可以利用 Proxy 來(lái)攔截 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 是一個(gè)著名的標(biāo)記。一個(gè)著名的標(biāo)記即是一個(gè)內(nèi)置的 JavaScript Symbol，它可以用來(lái)代表內(nèi)部語(yǔ)言行為。

Symbol.unscopables 定義了一個(gè)對(duì)象的 unscopable(不可限定)屬性。在 with 語(yǔ)句中，不能從 Sandbox 對(duì)象中檢索 Unscopable 屬性，而是直接從閉包或全局作用域檢索屬性。

所以我們需要對(duì) 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); 
 } 
}

全局變量白名單

但是，這時(shí)沙箱里是執(zhí)行不了瀏覽器默認(rèn)為我們提供的各種工具類和函數(shù)的，它只能作為一個(gè)沒(méi)有任何副作用的純函數(shù)，當(dāng)我們想要使用某些全局變量或類時(shí)，可以自定義一個(gè)白名單：

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); 
 } 
}

最終代碼：

好了，總結(jié)上面的代碼，我們就完成了一個(gè)簡(jiǎn)易的 JavaScript 模塊執(zhí)行器：

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); 
 } 
}

測(cè)試執(zhí)行效果：

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

以上就是如何手動(dòng)實(shí)現(xiàn)一個(gè) JavaScript 模塊執(zhí)行器的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 模塊執(zhí)行器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: