简单的javascript问题答案

【问题标题】：simple javascript question简单的javascript问题
【发布时间】：2010-01-04 20:32:17
【问题描述】：

我有一个 2000 行的 jquery 文件，我只是将文件分解成更小的文件，如果我在第一个文件中有一个函数，那么 #2 所指的文件是未定义的。

每个文件都包装在一个 jquery 就绪函数中，最好的方法是什么？

【问题讨论】：

是否每个文件都需要包装在 jQuery 就绪函数中？

标签： javascript jquery

【解决方案1】：

如果有问题的函数在 ready 处理程序的范围内声明，则任何其他代码都无法访问它，包括其他 ready 处理程序。

你需要做的是在全局范围内定义函数：

function foo()
{
    alert('foo');
}

$(document).ready(function()
{
    foo();
});

附：添加ready 处理程序的更简洁的方法是：

$(function()
{
   foo();
});

编辑：如果您划分的每个 ready 处理程序的内容依赖于前面的部分，那么您不能将它们拆分，原因如上所述。更明智的做法是将大部分逻辑分解为独立函数，将它们放在 ready 事件处理程序之外的自己的文件中，然后从处理程序中调用它们。

编辑：为了进一步澄清，请考虑这个处理程序：

$(function()
{
    var foo = 'foo';
    var bar = 'bar';

    alert(foo);
    alert(bar);
});

然后我可能会把它分开：

$(function()
{
    var foo = 'foo';
    var bar = 'bar';
});

$(function()
{
    alert(foo);
    alert(bar);
});

问题在于foo 和bar 是在第一个处理程序中定义的，当它们在第二个处理程序中使用时，它们已经超出范围。

任何像这样的连续逻辑流都需要在同一范围内（在本例中为事件处理程序）。

【讨论】：

【解决方案2】：

函数定义不应包含在另一个函数中。除非您真的希望该函数定义是私有的，否则不会。如果我理解正确，那不是你的本意。

仅在 jQuery 就绪函数中包装函数调用。

如果您担心您的函数与第三方函数名称冲突，请为其命名：

var myFunctions = {}
myFunctions.doThis = function () {}
myFunctions.doThat = function () {}

但实际上，只有在创建混搭或库以供其他人使用时，您才需要担心这一点。在您自己的网站上，您可以控制 javascript 中包含的内容。

【讨论】：

【解决方案3】：

实际上，出于性能原因，将其保存在一个文件中可能会更好；多个请求实际上会占用更多带宽......但作为单独的文件，您需要按特定顺序对它们进行排序，以便有一个逻辑顺序。不要将所有内容都放在 document.ready 中，而是让每个脚本定义一个方法，页面将在其自己的 document.ready 处理程序中执行，这样您就可以保持该顺序。

【讨论】：

我不确定是否同意您将所有内容放在一个文件中以节省带宽。根据我的经验（这在 JavaScript 中是有限的），分离文件实际上可以节省带宽，因为可以缓存分离的文件（因为它们不是每次都加载）。当文件被许多页面使用时，这更加有用。只是一个想法。
很多网络上的讨论都提到了出于性能原因组合脚本，因为多个脚本文件被下载到客户端的方式；有一些开销会增加文件的总时间/大小，就好像它们是一个一样。另外，脚本缩小（如 YUI 或 MS AJAX 的组件）也有助于缩小文件。

【解决方案4】：

出现未定义的原因很可能是因为当您有单独的就绪调用时，这些调用中的代码范围是不同的。

我会重新组织我的代码。任何共享函数都可以使用 $.extend 直接附加到 jQuery 对象。这就是我们为我们的应用程序所做的事情，而且效果很好。

见this question。希望对您有所帮助。

【讨论】：

【解决方案5】：

每个文件都不应该有准备好的功能。只有一个文件应该具有就绪功能，并且应该是最后一个文件。

【讨论】：

只要它们相互独立，没关系。也就是说，他们可能不在这种情况下......

【解决方案6】：

“包装在 jquery 就绪函数中”只不过是将内容绑定到 ready 事件，当 jQuery 认为 DOM 已准备好时会触发该事件。

您应该只将依赖于 DOM 的方法绑定到 ready 事件。不管你绑定多少次，最后所有的方法都会按照绑定的顺序执行。

【讨论】：

【解决方案7】：

函数在 JavaScript 中提供范围。您在 jquery.ready 中的代码是一个匿名函数，因此它不知道其他范围。删除这些 JavaScript 函数的包装并将它们声明为常规函数，一个 la

$(document).ready(function ()
{
   functionFromFile1();
   functionFromFile2();
};

【讨论】：