javascript - 嵌套 Javascript 函数和 jQuery

Question

我正在学习 javascript 和 jquery，想知道将所有函数嵌套在 $(document).ready(function) 中是好是坏。这之间有什么区别吗:

function someFunction()
{
  return someThing;
}

$(document).ready(function()
{
  // some code
  ...
  someFunction();
});

还有这个:

$(document).ready(function()
{
  // some code
  ...
  function someFunction()
  {
    return someThing;
  }

  someFunction();
});

要温柔 - 我对此还很陌生!

Answer 1

你至少忘记了一个:-)

function someFunction()
{
  return someThing;
}

$(someFunction);

通常，$(document).ready(argFunc) 和 $(argFunc) 之间没有区别。您列出的其他变体对于不同的事物具有不同的范围。

例如，在第二个 block 中，您在非全局范围内声明 someFunction，而您的第一个和我的示例在全局范围内声明它，这对可达性有影响。

此外，从技术上讲，您的这两种变体都会产生一个无关的函数调用。因为在这种情况下，您调用的只是一个函数(您也可以像我的示例一样编写)。

更新1:添加一些附加信息并进一步讨论范围 - JavaScript 对变量存在的要求非常宽松。如果它在当前作用域中没有找到它们，它只会向上遍历调用链并寻找它 - 直到找到或找不到为止。这就是为什么您可以从任何地方访问 jQuery 对象 ($)。

但是有这样的:

someFunction($) {
  // You can use $ here like always 
  return someThing; 
} 
$(someFunction);

这意味着 jQuery 文档就绪事件的处理程序(可以有多个)将 jQuery 本身作为参数传递。

如果您为函数指定此参数，那么您将使用该参数(如果您引用它)。否则，您将使用全局的。这减少了向上查找链的长度。从性能的 Angular 来看，这完全无关。

但是，通过将其指定为参数，您可以完全清楚 jQuery 对象的来源。即使这可能无关紧要。

我只是想表明，jQuery 中的这些回调类型函数通常采用有用的参数。因此，如果您遇到困难并且需要访问某些您没有的对象，那么可能值得检查 jQuery 文档，看看是否没有参数，是否可以满足您的要求。

作为本次更新的总结，我非常喜欢对该问题的第一条评论，这比我的答案要好得多。

更新2:关于文档就绪的多个回调(或 jQuery 中的任何事件绑定(bind)器):你可以这样做:

$(func1); // or $(document).ready(func1);
$(func2); // or $(document).ready(func2);

一旦 jQuery 触发其文档就绪事件，两者都会被调用。根据观点的不同，这可能会派上用场。有人会说，它鼓励传播你的逻辑。其他人可能会说，它可以更清晰地分离文档就绪时需要完成的所有事情。