Javascript Document.ready 在外部文件中？

Document.ready in external files?

提问by Richard

I am referencing JavaScript as follows on an HTML page:

我在 HTML 页面上按如下方式引用 JavaScript：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;region=GB"></script>
<script type="text/javascript" src="js/shared.js"></script>
<script type="text/javascript">
$('document').ready(function() {   
    // In-page code: call some functions in shared.js
});
</script>

The functions defined in shared.js are not wrapped inside $('document').ready. So:

shared.js 中定义的函数没有包含在$('document').ready. 所以：

1. Is it safe to assume that functions defined in shared.jsare available to the "in-page code"?

2. If I pull out the in-page code into a separate file called local.js(keeping it wrapped in $('document').ready), is it still safe to assume that functions defined in shared.jsare available?

3. Finally, is the fact that I'm not wrapping shared.js inside $('document').readya problem? I'm finding that if I do wrap it, its functions are no longer available to the in-page code.

1. 假设定义的函数shared.js可用于“页内代码”是否安全？

2. 如果我将页内代码提取到一个名为local.js（将其包裹在 中$('document').ready）的单独文件中，假设 中定义的函数shared.js可用是否仍然安全？

3. 最后，我没有将 shared.js 包装在$('document').ready一个问题中的事实吗？我发现如果我将它包装起来，它的功能将不再可用于页内代码。

The reason for question 3 is that I'm hitting this problem: Uncaught TypeError: Property ... is not a function - after page has loaded

问题 3 的原因是我遇到了这个问题：Uncaught TypeError: Property ... is not a function - after page has loaded

and wondering if it is something to do with how I've organised my code.

并想知道这是否与我组织代码的方式有关。

UPDATE: Thanks for the answers. It's now clear that using $('document').readyin shared.js would remove those functions from global scope. However, I just want to clarify the original question in point 3.

更新：感谢您的回答。现在很明显，$('document').ready在 shared.js中使用会从全局范围中删除这些函数。但是，我只想澄清第 3 点中的原始问题。

Can I assume that if I do the following:

我可以假设如果我执行以下操作：

• inside my in-page code, loaded inside $('document').ready, call a function from shared.js
• have the function in shared.js refer to jQuery, Google Maps, or elements on my page

• 在我的页内代码中，在里面加载$('document').ready，从 shared.js 调用一个函数
• 让 shared.js 中的函数引用 jQuery、Google Maps 或我页面上的元素

there will be no problems?

不会有问题吗？

In other words, is it safe to assume that the page will have loaded by the time the functions inside shared.jsare called, even if I'm not wrapping everything in that file inside $('document').ready?

换句话说，shared.js即使我没有将该文件中的所有内容都包装在里面，假设页面在调用内部函数时已经加载是否安全$('document').ready？

回答by Raynos

Is it safe to assume that functions defined in shared.js are available to the "in-page code"?

假设 shared.js 中定义的函数可用于“页面内代码”是否安全？

Yes, As long as those functions are injected into global scope

是的，只要这些函数被注入到全局作用域中

If I pull out the in-page code into a separate file called local.js (keeping it wrapped in $('document').ready), is it still safe to assume that functions defined in shared.js are available?

如果我将页内代码提取到一个名为 local.js 的单独文件中（将其包裹在 $('document').ready 中），那么假设 shared.js 中定义的函数可用是否仍然安全？

Yes, As long as local.jsis included after shared.jsANDshared.js injects functions into global scope.

是的，只要local.js包含在shared.jsANDshared.js 将函数注入全局范围之后。

Finally, is the fact that I'm not wrapping shared.js inside $('document').ready a problem? I'm finding that if I do wrap it, its functions are no longer available to the in-page code.

最后，我没有将 shared.js 包装在 $('document').ready 中是个问题吗？我发现如果我将它包装起来，它的功能将不再可用于页内代码。

Wrapping functions in document.readytakes them outside of global scope.

将函数包装在document.ready全局范围之外。

var foo = 4; // global
$(function() {
  var bar = 5; // local
});
foo = bar; // error

You need to inject variables in global scope, this is as easy as doing

您需要在全局范围内注入变量，这很简单

$(function() {
  /* all your code */

  window["SomeGlobalVariable"] = someFunctionIWantGlobal;
});

回答by davin

1. Yes
2. Yes
3. Maybe. If you wrap code in a function you will lose global access to functions defined. For the most part that's a good thing - not polluting the global namespace. You can still access these functions in the global namespace if instead of function foo(){}you do window.foo = function(){};.

1. 是的
2. 是的
3. 也许。如果将代码包装在函数中，您将无法全局访问定义的函数。在大多数情况下，这是一件好事 - 不会污染全局命名空间。如果function foo(){}您不这样做，您仍然可以在全局命名空间中访问这些函数window.foo = function(){};。

This is all irrelevant however, because you either need a dom ready listener or you don't - depending on whether or not you're trying to access the dom in that code. If yes, then wrap it, if not, then don't. As mentioned, either way you can close over your code so as not to pollute the global namespace, or pollute it if you so desire.

然而，这一切都无关紧要，因为您要么需要一个支持 dom 的侦听器，要么不需要——这取决于您是否尝试访问该代码中的 dom。如果是，则包装它，如果不是，则不要。如前所述，无论哪种方式，您都可以关闭代码以免污染全局命名空间，或者如果您愿意，也可以污染它。

回答by Ben

Your code organisation is fine as presented. Any functions defined in "shared.js" will be available to the rest of your page, including your $('document').ready(function()block.

您的代码组织很好。“shared.js”中定义的任何函数都可用于页面的其余部分，包括您的$('document').ready(function()块。

However, if you place the functions in shared.js withinthat block, then you limit the code's scope to the $('document').ready(function()(i.e. nothing else in the page can use it) -- so that's not the way to go if you want to make stuff in "shared.js" available to other parts of your code / application.

但是，如果您将功能shared.js内该块，那么你就限制了代码的范围为$('document').ready(function()（页面即别的什么可以用它） -所以这不是去，如果你想的东西，在路上“shared.js”可用于您的代码/应用程序的其他部分。

回答by kapa

1. It is safe to assume (if the definitions are not hidden inside a closure that cannot be accessed).

   //shared.js
   function DoThis() {}
   function DoThat() {}   
   

2. It will still work, just embed local.jsafter shared.js

   <script type="text/javascript" src="js/shared.js"></script>
   <script type="text/javascript" src="js/local.js"></script>
   

3. It did not work, because the functions were wrapped in a closure (the one that will be run on domready), so they are only available inside that closure

   $(document).ready(function () { //this is a closure!
       function DoSg() {} 
       //DoSg is only available inside the closure
       //cannot be accessed from the outside, it's defined inside
   });
   

   Also, it is unnecessary to put function definitions into $(document).ready(). The part that matters is when you callthese functions, that should be inside .ready()(well, if it involves DOM stuff or anything that should be done after page load).

1. 可以安全地假设（如果定义没有隐藏在无法访问的闭包中）。

   //shared.js
   function DoThis() {}
   function DoThat() {}   
   

2. 它仍然可以工作，只是local.js在之后嵌入shared.js

   <script type="text/javascript" src="js/shared.js"></script>
   <script type="text/javascript" src="js/local.js"></script>
   

3. 它不起作用，因为函数被包装在一个闭包中（将在 domready 上运行的那个），所以它们只能在该闭包内使用

   $(document).ready(function () { //this is a closure!
       function DoSg() {} 
       //DoSg is only available inside the closure
       //cannot be accessed from the outside, it's defined inside
   });
   

   此外，没有必要将函数定义放入$(document).ready(). 重要的部分是当你调用这些函数时，它应该在内部.ready()（好吧，如果它涉及 DOM 内容或页面加载后应该完成的任何事情）。

回答by Nicola Peluchetti

Finally, is the fact that I'm not wrapping shared.js inside $('document').ready a problem? I'm finding that if I do wrap it, its functions are no longer available to the in-page code.

最后，我没有将 shared.js 包装在 $('document').ready 中是个问题吗？我发现如果我将它包装起来，它的功能将不再可用于页内代码。

If you wrap your function inside document.ready those function are not available in the global scope, as function have local scope (I.E inside the function where they are contained)

如果您将函数包装在 document.ready 中，则这些函数在全局范围内不可用，因为函数具有局部范围（即包含它们的函数内部）