Document.ready in external files?

I am referencing JavaScript as follows on an HTML page:

<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/jav开发者_如何学JAVAascript" 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:

1. Is it safe to assume that functions defined in shared.js are 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.js are available?

3. 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.

The reason for question 3 is that I'm hitting this problem: 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').ready in shared.js would remove those functions from global scope. However, I just want to clarify the original question in point 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

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.js are called, even if I'm not wrapping everything in that file inside $('document').ready?

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

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?

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

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.

Wrapping functions in document.ready takes them outside of global scope.

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;
});

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(){};.

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.

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.js after 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 call these functions, that should be inside .ready() (well, if it involves DOM stuff or anything that should be done after page load).

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.

However, if you place the functions in shared.js within that 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.

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.

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)