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)之间没有区别。您列出的其他变体对于不同的事物具有不同的范围。

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

另外，从技术上讲，使用两种变体都会产生一个无关的函数调用。因为在这种情况下，你调用的只是一个函数（你也可以像我的例子一样编写）。

UPDATE1：要添加一些额外的信息并进一步讨论范围 - JavaScript对变量的存在有非常宽松的要求。如果它在当前范围内找不到它们，它只会向上遍历调用链并查找它 - 直到找到它为止。这就是为什么你可以从任何地方访问jQuery对象（$）。

但是有：

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

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

如果为函数指定了此参数，则在引用它时将使用该参数。否则，您正在使用全局的。这减少了向上查找链的长度。从性能角度来看，这完全无关紧要。

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

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

总结这个更新，我非常喜欢这个问题的第一个评论，这是一个比我更好的答案。

UPDATE2：关于文档就绪的多个回调（或jQuery中的任何事件绑定器）：你可以这样做：

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

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

Answer 2

是肯定的。第一种方法是将 someFunction 放在全局范围内，以便任何人都可以调用它。如果您希望此函数为“私有”并且只能通过某些代码调用，则首选第二种方式。通常，您应该更喜欢第二种方式，除非您需要将函数导出到全局范围。

Answer 3

差异很微妙，但值得提出。

在DOM准备好之外声明的函数：

如果在DOM准备好之前没有调用函数，那么这会更有效，因为它在等待DOM加载之前注册函数（编辑：正如评论中所指出的那样，会有轻微的性能损失因范围解析而访问全局变量）。这非常轻微，可能并不明显。

更重要的是，你的函数变成了全局变量，如果你没有正确命名空间，你可能会混乱全局范围：

var myFuncs = {
    someFunction : function() { ... },
    someOtherFunciton : function() { ... }
};

在DOM准备中声明：

函数不再是全局变量，但是您的函数与其他DOM就绪代码一起注册。

我想说在大多数情况下都可以采用任何一种方式，但绝对可以在一个命名空间内声明你的功能。

Answer 4

首先，通常只有在多次使用函数时才会声明函数。如果您在$(document).ready(function)中放置一个函数，那么它将不在$(document).ready(function)范围之外。查看Javascript Scope上的文章。

这是因为$(document).ready接受一个函数作为参数，在你的两个例子中，你声明了一个内联函数（那里是function () {}代码）。查看inline functions vs parameterized functions的讨论。

因此，归结为决定是否要多次使用someFunction()。如果是这样，请将其置于$(document).ready函数之外。否则，您实际上并不需要一个函数，因为您只需调用一次。

Answer 5

只要someFunction（）不试图操纵dom，就没有区别。在dom中的所有元素都已加载并且可以使用javascript访问后调用$（document）.ready。如果你试图在加载之前使用javascript操作该页面中的项目，它就不会存在并且代码会中断。