Javascript何時初始化一個對象

Question

我仍在學習JavaScript，但是我錯過了或誤解了一個從理論到實踐的步驟。

我需要一個對象來保持和保持頁面狀態。

myState={ 
page_no=... 
form_show=... 
input_show=... 
} 

最明顯的解決方案是將其聲明爲全局。 但是到處都是我看到的 - 全球化很糟糕。 什麼是替代方案？

Answer 1

你的問題有點過於籠統。答案是「視情況而定」。沒有更多的上下文，很難給出更具體的答案。全局有時很糟糕，但有時它們是唯一明智的解決方案。如果你有很多全局變量，你應該考慮把它們包裝在一個對象中，這樣你只有一個全局變量而不是整個變量。

例子：

var myModule = { 
    myState : { 
     page_no: 0, 
     form_show: false, 
     input_show: false 
    }, 
    someOtherGlobal: { 
     someProp: "foo" 
    } 
    someFunction: function() { 
     return bar; 
    } 
} 

這裏的想法是限制與其他代碼可能會在頁面上運行的衝突的可能性。有可能是另一個myState某處，但它不太可能是另一個myModule.myState。

更好的是，如果您可以將所有代碼限制爲單個閉包，如果您的代碼不需要向其他代碼公開任何內容，那麼這非常棒。

(function() { 
    // this only exists inside this closure 
    var myState = { 
     page_no: 0, 
     form_show: false, 
     input_show: false 
    } 

    // some code that will execute inside the closure and has access to stuff inside the closure 
    if (myState.page_no === 0) { 
     myState.form_show = true; 
    } 

    // often you might hook up event handlers here 
    someDomElement.onClick = function() { 
     // this will have access to myState 
    }; 
})(); 

一個常見的方法是使用文檔加載或doc準備事件。在jQuery中，人們經常這樣做：

$(function() { 
    // all your code that will run when the DOM is ready... 
}); 

而且你可以通過讓你關閉返回一個對象，並將其分配給一個變量將二者結合起來。喜歡的東西：

var myModule = (function() { 
    var myState = { 
     page_no: 0, 
     form_show: false, 
     input_show: false 
    }; 

    var hiddenCount = 0;  // this won't be accessible outside this closure 

    var increaseCount = function() { 
     hiddenCount++;  // this can access hiddenCount because it's inside the closure 
     console.log(hiddenCount); 
    } 

    return { 
     myState: myState, 
     increaseCount: increaseCount 
    }; 
})(); 

現在你可以這樣做：

myModule.myState.page_no = 1; 

和：

myModule.increaseCount();  // would echo 1 

但不是：

myModule.hiddenCount = 3;  // hiddenCount wasn't exposed by returning it 

Answer 2

全球不是總是不好。你不應該濫用它。無論如何，這裏是如何正確寫入，以使其成爲全球（有一些默認值）：

window.myState={ 
    page_no: 0, 
    form_show: false, 
    input_show: false 
}