I'm still learning JavaScript, but I'm missing or misunderstanding a step to take me from theory to practice.
I need an object that keeps and maintains the page state.
myState={
page_no=...
form_show=...
input_show=...
}
The most obvious solution is to just declare it as global. But everywhere I turn I see - global is bad. What is the alternative?
Global isn't always bad. You just shouldn't abuse it. Anyway here is how you would write it properly to make it global (with some default values):
window.myState={
page_no: 0,
form_show: false,
input_show: false
}
Your question is a little too general. The answer is "it depends". Without more context it's hard to give a more specific answer. Globals are sometimes bad, but sometimes they are the only sensible solution. If you have many globals, you should consider wrapping them up in a single object so that you have only a single global instead of a whole bunch.
Example:
var myModule = {
myState : {
page_no: 0,
form_show: false,
input_show: false
},
someOtherGlobal: {
someProp: "foo"
}
someFunction: function() {
return bar;
}
}
The idea here is to limit the possibility of conflicts with other code that might be running on a page. There might be another myState somewhere, but it's less likely to be another myModule.myState.
Even better is if you can limit all you code to a single closure which is great if your code doesn't need to expose anything to other code.
(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
};
})();
A common way to do this is to use the doc load or doc ready events. In jQuery, people often do this:
$(function() {
// all your code that will run when the DOM is ready...
});
And you can combine the two by having you closure return an object and assign it to a variable. Something like:
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
};
})();
And now you can do something like:
myModule.myState.page_no = 1;
And:
myModule.increaseCount(); // would echo 1
But not:
myModule.hiddenCount = 3; // hiddenCount wasn't exposed by returning it
:rather than=to assign values to it's properties and separate them via,. Second, I'm not sure I understand your question. Can you be more specific?