本文使用 React + Three.js + React Three Fiber 技術棧，實現一個《塞爾達傳說：王國之淚》主題風格基於滾動控制的平滑滾動圖片展示頁面。通過本文的閱讀，你將學習到的知識點包括：瞭解 R3F 中 useFrame hook 及 useThree hook 基本原理及用法... ...
淺談(0,eval)('window')
最近研究qiankun 源碼，在import-html-entry 包中看到這個，一臉懵，研究了一下，記錄一下。參考了這篇博客
這個幹啥用的
// 通過這種方式獲取全局 window，因為 script 也是在全局作用域下運行的，所以我們通過 window.proxy 綁定時也必須確保綁定到全局 window 上
// 否則在嵌套場景下， window.proxy 設置的是內層應用的 window，而代碼其實是在全局作用域運行的，會導致閉包里的 window.proxy 取的是最外層的微應用的 proxy
const globalWindow = (0, eval)('window');
globalWindow.proxy = proxy;
如代碼註釋所示，這個是確保獲取全局作用域的window。
如何做到的
- eval 直接調用與間接調用。es5規範中指明，間接調用eval是在全局作用域中執行。
- 哪些是直接調用，哪些是間接調用。簡單來說，計算出eval 值，來調用得就是間接調用，如果是引用就是直接調用。看例子
- 直接調用
eval('...')
(eval)('...')
(((eval)))('...')
(function() { return eval('...') })()
eval('eval("...")')
(function(eval) { return eval('...'); })(eval)
with({ eval: eval }) eval('...')
with(window) eval('...')
- 間接調用
(1, eval)('...')
(eval, eval)('...')
(1 ? eval : 0)('...')
(__ = eval)('...')
var e = eval; e('...')
(function(e) { e('...') })(eval)
(function(e) { return e })(eval)('...')
(function() { arguments[0]('...') })(eval)
this.eval('...')
this['eval']('...')
[eval][0]('...')
eval.call(this, '...')
eval('eval')('...')
- 為什麼
,運算符，會去最後一個運算數，然後取值=,?:也是如此- 總結來說這些運算符都有一個取值得操作
- 然而
(,)這兩個操作符沒有取值這個意味。
