JavaScript 中作为变量容器的对象

Question

最近我在我正在从事的项目的一些代码中看到了类似的东西...

var domObjects = {
  $body: $('body'),
  $someDiv: $('.some-div'),
  $someOtherDiv: $('.some-other-div')
}

var constants = {
  CONST_ONE: 'some value',
  CONST_TWO: 'some value',
  CONST_THREE: 'some value'
}

您可能已经注意到此代码旨在替换如下代码：

var $body = $('body'),
    $someDiv = $('.some-div'),
    $someOtherDiv = $('.some-other-div');

var CONST_ONE = 'some value',
    CONST_TWO = 'some value',
    CONST_THREE = 'some value';

这背后的想法是将变量包装在一个更 "semantic" 的对象中，这样它可以更容易使用，但我真的怀疑是否仅仅出于美观原因而创建一个对象。

这样可以吗？
如果我这样做声明有什么真正的优势？
有什么缺点吗？

Answer 1

不使用这种样式，因为它使用起来更快，因为需要更多的输入来访问变量，考虑 constants.const1 而不是只输入 const1.

但是，我喜欢这种风格至少有以下原因：

变量是'作用域'（因此发生全局冲突的可能性较小）
它们在语义上被封装在它们所属的位置 - 这给出了它们属于哪个组的解释 - 另一个选择它的开发人员更容易理解这些变量是什么
它们更容易使用 - 如果您想捕获组的所有属性 - 例如考虑对象是 department，您只需遍历 department其中包含您需要的所有相关信息

DOM 对象可能有点没有必要放在一个对象中，至于其余的我完全同意将它们包装在这样的对象中。

Answer 2

完全没问题：JavaScript 允许您将任何值放入一个对象中，这意味着您可以将 JS 对象用作 "containers" 用于常见变量或常量之类的东西。

这主要是个人喜好问题。像这样的构造更容易传递，所以你不会不断地 "requery" 像 $body 或 $document 这样的东西，但它也可以隐藏对象中的内容，所以你不知道有多少 "room" 您的函数输入正在占用。

有问题吗？也许，也许不是，这取决于 writes/uses 代码的任何人。这个问题（超出 "is this okay" 部分，它完全是）主要是一个意见问题，以代码风格指南为指导，以及关于如何打包常用参考的考虑。

有一种情况表明这种风格有所不同，那就是展开开关时。例如：

function(input) {
  var a = "cat",
      b = "cow",
      c = "goldfish";
  console.log("testing multiple case identities...");
  switch(input) {
    case "small": return a;
    case "large": return b;
    case "aquatic": 
    case "fish": return c;
  };
  return false;
}

我们可以立即进行，而不是逐个检查：

var values = {
  "small": generateSmallAnimal,
  "large": generateLargeAnimal,
  "aquatic": generateFish
  "fish": generateFish
};

function(input) {
  console.log("direct jump...");
  return values[input]();
}

完成，没有多案例检查，只是立即跳转到正确的地方。

Answer 3

It this ok?

是的，这完全没问题。我见过许多 JS 库将 related 值组合到一个对象中。例如，许多 jQuery 插件将配置值存储到 settings 对象中。

There is any real advantage if I do the declarations this way?

对我来说，主要优点是相关值在语义上组合在一起。想象一下，当我们在现代 IDE 中编码时，我可以简单地键入 objectName 和 [dot] 让 IDE 列出该特定组的变量。

There is any disadvantage?

如回答 here 所述，存在性能差异，但对于现代浏览器来说并不那么重要。

JavaScript 中作为变量容器的对象

Objects as variable containers in JavaScript

javascript

frontend