JavaScript window.hasLoaded 與 window.loading 全局變量的用途解析

現象

在瀏覽器控制台檢查 window 對象時，發現自定義屬性 hasLoaded 和 loading，疑惑其含義。

本質解析

• 非標準屬性：這兩個屬性**不是**瀏覽器原生 API，而是開發者或第三方庫**自定義的全局標記**。
• 典型用途：防止重複初始化、標識頁面/資源加載狀態。

常見使用模式

// 頁面入口腳本
if (window.hasLoaded) {
    console.log('頁面邏輯已初始化，跳過重複執行');
} else {
    window.loading = true;  // 標記正在加載
    initApp().then(() => {
        window.loading = false;
        window.hasLoaded = true; // 標記加載完成
    });
}

// 其他腳本檢查狀態
function useSharedResource() {
    if (window.loading) {
        // 等待初始化完成
        return waitFor(() => !window.loading).then(useSharedResource);
    }
    if (!window.hasLoaded) {
        throw new Error('核心模塊未就緒');
    }
    // 正常使用共享資源
}

對比：原生加載事件

最佳實踐建議

• 命名規範：使用項目前綴避免衝突，如 window.MYAPP_hasLoaded。
• 封裝狀態機：用 Promise/async-await 替代布爾標記，如 window.appReady = initApp()，其他模塊 await window.appReady。
• 避免污染全局：模塊化構建 (Webpack/Rollup) 時盡量不掛載 window，通過 export/import 共享狀態。

調試技巧

// 控制台查看所有自定義 window 屬性
Object.keys(window).filter(k => !['chrome','document','navigator'...].includes(k))