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 
}