Type 1 :
var EXAMPLE = function() {};
Type 2:
var EXAMPLE = function($) {
return {};
}(jQuery);
I'm JavaScript beginner and trying to understand the difference between these two piece of code. In functionality wise I didn't see the difference when I tried to add a property to the EXAMPLE object.
There are a couple of major differences there:
With the first one, the value of EXAMPLE ends up being a function object. With the second one, it ends up being a plain object (not a function), because in the second one, the function is being called and you're storing its return value (the {}) in EXAMPLE.
The second one relies on your having a jQuery symbol defined (probably as a result of including jQuery on the page). The first doesn't.
So they're pretty different.
The first is a pretty generic way of creating a function (in this case, a function that doesn't do anything).
The second is a fairly standard way to use jQuery without relying on the $ global (because sometimes people use jQuery.noConflict() to release the $ symbol). The idea is that since jQuery is being passed into the function as the $ argument, within the function code can use $ even though there is no $ global. People routinely do this and return an object with functions on it, like this:
jQuery.noConflict(); // Release $
display("typeof $ = " + typeof $); // "undefined"
var EXAMPLE = function($) {
return {
red: function(selector) {
// Note we can use $ here, even though $ isn't
// defined globally
$(selector).css("color", "red");
},
green: function(selector) {
$(selector).css("color", "green");
}
};
}(jQuery);
setTimeout(function() {
EXAMPLE.red("#target");
}, 700);
setTimeout(function() {
EXAMPLE.green("#target");
}, 1400);
function display(msg) {
jQuery("<p>").html(String(msg)).appendTo(document.body);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="target">I'm the target element</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments