Accessibility and code organization problems in javascript with jquery
-
22-07-2019 - |
Question
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?
Solution
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.
OTHER TIPS
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.