Question

我还在学习JavaScript，但我错过了或误解了从理论到实践的一步。

我需要一个保持和维护页面状态的对象。

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

最明显的解决方案是将其声明为全局。但在我看到的每个地方 - 全球都很糟糕。有什么替代方案？

Answer 1

全球并非总是糟糕。你不应该滥用它。无论如何，这里是你如何正确地编写它以使其全局（具有一些默认值）：

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

Answer 2

你的问题有点过于笼统。答案是“它取决于”。没有更多的背景，很难给出更具体的答案。 Globals有时很糟糕，但有时它们是唯一明智的解决方案。如果你有很多全局变量，你应该考虑将它们包装在一个对象中，这样你就只有一个全局而不是一整个。

示例：

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 load或doc ready事件。在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

Javascript何时初始化对象

2 个答案: