Just wondering if there's any benefit to using the style: (function() { <code> })(); in your script files proceeding the library scripts. Basically the place where logic goes for setting up the event listeners and other initialization logic.
So for example:
<script>
(function() {
$('div').on('click', 'a', function() {
alert('click');
});
})();
</script>
v.s.
<script>
$('div').on('click', 'a', function() {
alert('click');
});
</script>
The point of the self executing anonymous function in this case is to avoid defining global functions or variables when a true global is not needed. Since your example has neither, it is not needed in this case.
The self executing anonymous function provides a private closure for you to define anything you want and it is isolated from the outside world. It wont cause conflicts with any outside code and outside code cannot directly access the functions and variables inside the closure.
As to your question about whether it's a standard practice, that's really up to you. I personally think it's a good idea because then you are free to define helper functions or an occasional global without touching the actual global space. If you're using $(document).ready(fn), then you already have a closure around your init code so you're already set in that regard. If not, it's up to you. I personally think it's a good idea and see little downside to making it a standard practice. You do, of course, have to remember that if you need a true global variable or function, then you will have to define it on the window object so it's available outside your closure.
No, the first one is only extra code.
Now there can be a case where the first will keep globals from being created.
You need to use the jQuery(document).ready(function(){...}); model to set up event listeners, otherwise um... well, jQuery won't be ready.
Related
I am trying to understand whether or not the concept behind using multiple initialization functions is bad practice. By an initialization function I mean either of the following:
$(document).ready(function(){
//... some code here
}
(function(){
//.... some code here
})();
Time and time again I have seen multiple initialization functions being used and I always thought that this is ultimately a bad practice, but am I really wrong?
Based on that, would anyone care to enlighten me as to whether is it a good or bad practice to use multiple initialization functions?
Edit: removed irrelevant example of a bad use of closure and encapsulation.
Your suspicion is correct in that it's generally a good idea to organize code when you can.
Centralizing initialization functions makes it easier for another developer to figure out which statements are being executed at any given time. This facilitates debugging and becomes increasingly important when multiple developers are working on the same code.
Perhaps consider doing something like this:
$(document).ready(function () {
function findLionelRichie() {
console.log('found Lionel Richie');
}
function findWhomeverElseNeedsFinding() {
console.log('found all the others');
}
(function initialize() {
findLionelRichie();
findWhomeverElseNeedsFinding();
})();
});
That being said, they cannot always be avoided (for example, when calling functions from external libraries). Try to keep it as organized as you can on your end, however.
Creating a function within another function changes the scope of the function in the same way it would change the scope of a variable.
The functions defined within another function won't be accessible outside the function unless they have been attached to an object that is accessible outside the function:
Can a function declared and attached to the global scope, but having jQuery-dependent code, always be depended on to work properly if it is only ever called from within a jQuery document-ready block?
e.g.:
<script src = "https://code.jquery.com/jquery-2.1.0.js"></sript>
<script>
function myFunc(){ alert( $('#someElem').text() ); }
$(function(){
myFunct();
})
</script>
In practice, I've seen this done a lot, with such functions being written to separate files entirely. I have never seen it fail, but part of me wonders whether or not this is truly safe.
I think at least partially this depends on whether document-ready waits for the completion of the javascript compilation phase of page-load. But are there other reasons this might fail?
Please disregard issues around polluting the global name-space, readability, and so forth. I am only concerned here with reliable execution.
It really can't fail, the $() function that looks up the element is only executed when the myFunc function is executed, and that function only executes once document.ready fires, so the element will be available at that time.
The global myFunc function will also always be available, as long it's defined before the document.ready code in the DOM.
In many cases it will even be available if defined after the document.ready code as DOMContentLoaded (and other such methods) is async and waits for the DOM to be ready, but there's no guarantee that all scripts will be loaded at that time, just that the elements in the DOM are available, so you should generally make sure that the myFunc function is defined before the $(function(){ ... }); code.
Such constructs are written only if myfunct() will be accessible from outside the scope of document.ready(). If other functions / events may also call it, it is better to move it out.
If it is only intended to be called once or on a particular event, it may be nested in the calling function body only.
One may even like to make the function calls fully contained structures like clorjures, and the likes. In that case too, the function would be nested inside another var declaration.
Other than this, there seems no other big difference.
Please add if I missed on anything!
I am learning javascript and jquery and wondered whether it is good or bad practice to nest all my functions within $(document).ready(function). Is there any difference between this:
function someFunction()
{
return someThing;
}
$(document).ready(function()
{
// some code
...
someFunction();
});
and this:
$(document).ready(function()
{
// some code
...
function someFunction()
{
return someThing;
}
someFunction();
});
Be gentle - I'm pretty new to this!
You forgot at least one :-)
function someFunction()
{
return someThing;
}
$(someFunction);
Generally there is no difference between: $(document).ready(argFunc) and $(argFunc).
The other variations you listed have all different scopes for different things.
For example, in your 2nd block you declare someFunction inside a non-global scope, while your first and my example declare it in the global scope, which has implications for reachability.
Also, technically, with both of your variations you produce one extraneous function call. Because in this case, all you call is one function (which you can also write like my example).
UPDATE1:
To add some additional info and to further the discussion about scopes - JavaScript has very loose requirements for existence of variables. If it doesn't find them in the current scope, it wall just traverse the call chain upwards and look for it - until it finds it or not. That is why you can access the jQuery object ($) from anywhere.
There is however this:
someFunction($) {
// You can use $ here like always
return someThing;
}
$(someFunction);
This means, that the handlers (there can be more than one) for the document ready event of jQuery get passed jQuery itself as an argument.
If you specify this parameter for your function, you'll use that one, if you reference it. Otherwise, you are using the global one. That reduces the length of the upward look-up - chain.
That is completely irrelevant from a performance stand point.
But, by specifying this as a parameter, you make it absolutely clear where the jQuery object is coming from. Even that might be irrelevant.
I just wanted to show, that these callback-type functions in jQuery often take parameters that are useful.
So if you are ever stuck and need access to some object you don't have, it might be worthwhile to check the jQuery docs to see, if there is not a parameter, that does what you want.
To conclude this update, I very much like the first comment to the question, which is a much better answer than mine.
UPDATE2:
On the point of multiple callbacks for document ready (or any event binder in jQuery for that matter):
You can do this:
$(func1); // or $(document).ready(func1);
$(func2); // or $(document).ready(func2);
Both will get called as soon as jQuery fires its document ready event. That might come in handy depending on the perspective. Some would say, it encourages spreading your logic around. Others might say, it allows for cleaner separation of all the things that need to be done on document ready.
yes. The first way puts someFunction in the global scope so that it can be called by anyone. If you intend this function to be "private" and only callable by some code then the 2nd way is preferred. Generally you should prefer the 2nd way unless you need to export the function into global scope.
The differences are subtle, but worth bringing up.
Declared functions outside of DOM ready:
If you don't call the functions until DOM ready, then this is more efficient since it is registering the functions before waiting for the DOM to load (Edit: As is noted in the comments, there will be a slight performance penalty in accessing global variables due to scope resolution). This is very minor and probably not noticeable.
More importantly, you functions become globals, and you can clutter the global scope if you're not namespacing properly:
var myFuncs = {
someFunction : function() { ... },
someOtherFunciton : function() { ... }
};
Declared inside DOM ready:
Functions are no longer globals, but your functions are registered along with your other DOM ready code.
I would say it's fine to go either way in most cases, but definitely declare your functions under one namespace.
First off, functions are typically only declared if they are going to be used more than once. If you put a function inside the $(document).ready(function) then it won't be available outside the scope of the $(document).ready(function). Check out an article on Javascript Scope.
This is because $(document).ready accepts a function as a parameter and in your two examples you are declaring an inline function (that's the function () {} code in there). Check out a discussion of inline functions vs parameterized functions.
So, it boils down to deciding if you are going to use someFunction() more than once. If so, put it outside the $(document).ready function. Otherwise, you don't really need a function since you are just calling it once.
As long as someFunction() does not try to manipulate the dom, there is no difference. $(document).ready is called after all elements in the dom have loaded and can be accessed with javascript. If you try to manipulate an item in that page with javascript before it loads, it wont be there and the code will break.
Is this jQuery code
(function(jQuery){
})(jQuery);
equivalent to
$(document).ready(function () {
});
If yes, what are the differences between the two? If not, what does the first do?
EDIT:
Thanks everybody. Most response are similar with different flavours and sample
They are not equivalent.
Your first example is an Immediately-Invoked Function Expression (IIFE). It creates a closure around locally defined variables.
Your second example specifies a function to execute when the DOM is fully loaded. It is used to ensure that all element nodes in the DOM are available before executing the enclosed code. This is also a closure.
Both examples use anonymous functions.
It is worth pointing out that it is good practice to use both of your examples, like so:
(function($){
// locally-scoped, DOM-is-NOT-Ready-code here.
$(function () {
// your locally-scoped, DOM-is-ready-code here.
});
}(jQuery)); // note that I've moved the invocation into the parens
// that contain the function. This makes JSLint happy!
Absolutely not, the first one is a self-executing anonymous function and the second is the ready handler.
(function(jQuery){
//jQuery in this scope is referencing whatever is passed-in
})(jQuery);
So, the jQuery inside of the function isn't necessarily the same jQuery outside the function. But you typically do not want to mix-n-match global variable names with local ones.
Take this example:
(function(obj) {
alert(obj);
})('Hello');
This defines a function, then immediately invokes it, passing in "Hello"
$(document).ready(function () {
});
is equivalent to this:
$(function() {
});
The first snippet is an immediately invoked anonymous function which creates a local scope:
(function() {
var x = 2;
})();
alert(x); // undefined
No. The first one isn't really doing much. Just separating any variables inside from the surrounding scope, and creating a local jQuery variable inside.
The second one passes a function that is run after the DOM is ready (in other words after the <body> has loaded).
A common equivalent to:
$(document).ready(function () {
});
is:
$(function () {
});
which does the same thing.
While this:
(function(jQuery){
})(jQuery);
is often written as:
(function($){
})(jQuery);
so that the $ variable is no longer a global variable. Useful if the global $ variable is already in use.
Not at all. The first one is a closure - a function that you create and then immediately call. However, typically you would combine the two like this:
(function($) {
// use the $ variable
$(document).ready(function(){
// ...
});
})(jQuery);
By creating the closure you are renaming "jQuery" to "$" just locally for that block of code. The reason why you use the closure syntax is so that you can use the $ variable even though it might not be defined as a jQuery object in the global scope (i.e. some JavaScript frameworks like prototype use $ as a variable).
Whenever you write a jQuery plugin you should enclose all jQuery code in this kind of closure so it doesn't interfere with any other JavaScript frameworks. If you aren't writing plugins and you don't use any other JavaScript frameworks you probably don't have to bother enclosing your code in a closure.
I noticed in JQuery that the following code structure is used
(function(){var l=this,g,y=l.jQuery,p=l.$,...})()
Which seems to create a function, and call it.
What is the benefit of taking this approach versus having the contents of the function inline?
It creates a closure to prevent conflicts with other parts of code. See this:
http://docs.jquery.com/Plugins/Authoring
Particularly handy if you have some other library that uses the $() method and you have to retain the ability to use that with jQuery also. Then you can create a closure such as this:
(function($) {
// $() is available here
})(jQuery);
It creates a scope for variables, in particular defining $ for example to bind to jQuery, no matter what other libraries overwrite it. Think of it as an anonymous namespace.
With self invoking anonymous function you create a local scope, it's very efficient and it directly calls itself.
You can read about it here
It's just like:
var foo = function(){var l=this,g,y=l.jQuery,p=l.$,...};
foo();
But more simple and do not need a global variable.
It allows to have local variables and operations inside of the function, instead of having to transform them to global ones.