JavaScript 同頁面函式間傳值：模組模式與全域變數對比

場景

函式 A() 接收 WebView 傳值，函式 B() 需使用該值，兩者在同一頁面。

方案一：模組模式（推薦、無污染全域）

const DataBus = (() => {
    let currentValue = null;
    return {
        setValue(val) { currentValue = val; },
        getValue() { return currentValue; },
        clear() { currentValue = null; }
    };
})();

function A(valFromWeb) {
    DataBus.setValue(valFromWeb);
    // 觸發後續流程
    B();
}

function B() {
    const val = DataBus.getValue();
    if (val !== null) {
        console.log('B 取得:', val);
        // 業務邏輯
    }
}

• IIFE 建立私有作用域，currentValue 不洩漏到 window。
• 單一職責、易測試、可擴充為事件總線。

方案二：全域變數（快速原型、不建議生產）

var sharedValue = null; // 掛在 window.sharedValue
function A(val) { sharedValue = val; }
function B() { console.log(sharedValue); }

• 命名衝突風險高、難追蹤修改處、污染全域命名空間。

方案三：CustomEvent 解耦（複雜頁面推薦）

// A 發送
function A(val) {
    window.dispatchEvent(new CustomEvent('dataReady', { detail: val }));
}

// B 監聽
window.addEventListener('dataReady', (e) => {
    const val = e.detail;
    B(val);
});

function B(val) { console.log('B 收到:', val); }

• 發送者與接收者完全解耦、支援多監聽者、符合瀏覽器事件模型。

方案四：直接呼叫帶參數（最簡單）

function A(val) { B(val); }
function B(val) { /* 使用 val */ }

• 若呼叫關係固定、無中介邏輯，直接傳參數最清晰。

選型指南

總結

「同頁面函式傳值」本質是狀態共享。優先用模組模式封裝狀態，複雜場景升級為事件總線，避免裸全域變數造成維護噩夢。