何时初始化对象

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 
}