javascript - 如何使用对象来存储全局变量？最佳实践

Question

我是 JavaScript 中 OOP 的新手，因为我总是使用一些框架和我自己的简单结构，但从未想过幕后发生了什么。现在，我想解决许多 JS 程序员面临的一个问题——全局变量。我知道创建全局变量是一种不好的做法，许多人建议改用对象。这就是问题出现的地方。我不知道创建对象并在应用程序中某处调用它以获取全局变量值的最佳方法是什么。例如，我不确定是否使用 init 函数以及如何返回全局变量值(通过函数或“点”符号)。我看过很多关于对象的例子，但它们看起来风格不同。想象一个具体的例子。我想将全局变量存储在一个对象中——窗口的高度和窗口的宽度。为了使其跨浏览器，我将使用此代码

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    w = w.innerWidth || e.clientWidth || g.clientWidth, // this is global variable
    h = w.innerHeight|| e.clientHeight|| g.clientHeight; // and this is global varibale too

那么，如何在对象中应用这段代码以及如何在应用程序的某处获取这些全局变量的值？

编辑

现在，我的代码如下所示:

var module = (function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
width = w.innerWidth || e.clientWidth || g.clientWidth,
height = w.innerHeight || e.clientHeight || g.clientHeight;
return {
  getHeight:function(){
     return height;
  },
  getWidth:function(){
     return width;
  }
}
}());

要访问 height 和 width 属性，我调用了 getHeight 和 getWidth 方法。唯一让我觉得奇怪的是重叠的 return 中的这些 returns。这是正确的做法吗？

Answer 1

我会建议您避免全局变量。

全局变量是一个非常糟糕的主意。

原因:您的代码可能会被在您的代码之后添加到页面的任何其他 JavaScript 覆盖。

解决方法:使用闭包和模块模式

解释模块和闭包的示例代码:

module = function(){
   var current = null;
   var labels = {
      'home':'home',
      'articles':'articles',
      'contact':'contact'
   };
   var init = function(){
   };
   var show = function(){
      current = 1;
   };
   var hide = function(){
      show();
   }
   return{init:init, show:show, current:current}
}();
module.init();

您的代码:

var module = (function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
width = w.innerWidth || e.clientWidth || g.clientWidth,
height = w.innerHeight || e.clientHeight || g.clientHeight;
    var getWidth = function(){
        console.log(width);
        return width;
}
    var getHeight = function(){
        console.log(height);
        return height;
}
    return{getWidth:getWidth, getHeight:getHeight}
}());
module.getHeight();
module.getWidth();

DEMO FIDDLE