views:

239

answers:

2

I'm having troubles with the order of my code in my program. right now I have some things with in document.ready(function() { } ); and some things out side of it. Whenever I move anything (to organize or improve my code) I end up breaking something, I'm guessing because of either order of declarations or access levels (ie. something outside of document.ready(function {}); cannot access something inside of it.

Anyone have any insight as to where things should be located javascript wise?

Should everything be within document.ready(function() {});?
Is there any reason to have anything outside of document.ready(function() {});?
Is the code within document.ready(function() {}); inaccessible by outer code?

+3  A: 

1 . Should everything be within document.ready(function() {});?

No, I think that the document.ready function must be only to initialize things, assign event handlers and so on.

2 . Is there any reason to have anything outside of document.ready(function() {});?

Code reutilization, and better code organization.

3 . Is the code within document.ready(function() {}); inaccessible by outer code?

Yes, the variables and objects created on the document.ready are inaccessible from the outer scope.

CMS
A: 

Should everything be within document.ready(function() {});?

Yes and no. In large scale JavaScript applications, I initialize my main controllers into the global scope from this event handler. However, there is code that doesn't need to wait for the DOM to be ready, specifically: code that doesn't rely on the DOM. I think that's pretty straight forward. For example, I declare configuration objects classes, functions, etc outside of this event handler.

Is there any reason to have anything outside of document.ready(function() {});?

Sure, for the reason's touched on above. Mainly, code that doesn't require DOM interaction shouldn't wait for the DOM to load, especially if it can execute asynchronously to the DOM loading (e.g.: function definitions, configuration objects, etc).

Also, not including all of your code in one event handler keeps things more organized, allows you to modularize code, use proper design patterns, etc.

Is the code within document.ready(function() {}); inaccessible by outer code?

Again, yes and no. If you declare it as local with var then it is yes, it is inaccessible by the outer scope as it is local to the event handler; otherwise, it is in the global scope and is accessible to the outer scope. Here's an example (hosted here: http://jsbin.com/uriqe)

JavaScript

var foo = function() {
  alert(global);
  return false;
}

$(document).ready(function() {
  global = "you can see me!?";
  alert("global is initiated");
});

HTML

<body>
  <p><a href="#" onclick="foo()">click me</a></p>
</body>

onclick rather than unobtrusive method event attachment in $(document).ready() is used intentionally to avoid any questions/arguments about foo having access to global via the closure property.

Edit: I thought I made it clear in the previous sentence, but onclick is used intentionally to avoid confusion between global scope and the closure property, but I'm not advocating the use of onlick. Of course it's a bad practice and you shouldn't be using it.

Justin Johnson
inline js handlers, yak. Not good practice
redsquare
Ya, that's why I said, "onclick ... is used intentionally." Read the whole post please.
Justin Johnson