昨天在測試 Web App 於 iPad 上運作狀況時發生一個意外的狀況,相同的程式在 Windows 的 Google Chrome, Mozilla Firefox 都正常運作,但到了 iPad 上 Apple Safari, Google Chrome, Mozilla Firefox 卻全數掛掉,經過 debug 後發現一個奇特的狀況:變數的 scope 在不同環境(Browsers on Windows vs Browsers on iOS) 居然有不同範圍!?
<!-- 簡化示意 -->
<script defer>const foo={ 'bar': true };</script>
<script src="app.js" type="module"></script>
以上同樣的程式碼在 Windows 下的兩個瀏覽器,app.js 都能存取到變數 foo,但到了 iOS 上面,三個瀏覽器都拋出 undefined,因此直覺就判定是 variable scope 的問題,所以將 foo 宣告由 const foo 改成 window.foo,將其附加到 window 物件後 app.js 就能正常地直接以變數名稱 foo 存取(不需要以 window.foo),若是 module 載入的 js 不能直接存取 foo 的話並沒有什麼問題 (非全域變數),但不同平台結果不同這就有些問題了…