Why use jQuery plugins over javascript functions?
Why are you using jQuery plugin over traditional javascript function? The only difference I can see is passing a jQuery object to a js function ... another that I don't see a huge difference since both seem to be able to accomplish the same thing in similar steps:
$(document).ready(function () {
$('p').jQuery_greenify();
greenify($('p'));
});
$.fn.jQuery_greenify = function () {
this.css("color", "green");
};
function greenify (el) {
el.css("color", "green");
}
I also find the namespace easier with javascript functions:
var mynamespace = {
greenify : function (el) {
el.css("color", "green");
}
}
mynamespace.greenify($('p'));
source to share
Always jQuery object
When using a plugin as you said (this is really an object prototype). Are you sure that this
will be the object of jQuery, as you can not call it without jQuery object except if you make your way by using .call
, .apply
, .bind
etc.
In the meantime, you can pass anything to a function, so the argument may not be a jQuery object and will throw an error.
Readability on chain
You can bind a function to both methods, but honestly, with a jQuery prototype, this is prettier:
$.fn.jQuery_greenify = function () {
return this.css("color", "green");
};
$('div').jQuery_greenify().append(...);
//VS
function greenify (el) {
return el.css("color", "green");
}
greenify($('div')).append(...);
Sphere
When you add a function to a prototype, no matter what area you are in, it will be available everywhere. This allows you to create a specific closure:
(function(){
$.fn.jQuery_greenify = function () {
return this.css("color", "green");
};
})();
$('div').jQuery_greenify(); //Work
//VS
(function(){
function greenify (el) {
return el.css("color", "green");
}
})();
greenify($('div')); //Undefined is not a function error
source to share
Usually, the usefulness of jQuery functions lies in their chaining. Also how you want to call:
string.substring(2, 5).startsWith("lol")
instead
Util.StartsWith(Util.substring(string, 2, 5), "lol")
It's easier to read this. In fact, I think the second function might need to "return this" to be useful?
This can be context dependent - some operations are very element-specific or set-of-elements, while others just make sense to stand on their own - so your approach to namespace will be very good. This is partially coding style.
Disclaimer - I'm not that good at writing jQuery plugins, these are just my general observations based on the JS language design.
source to share
JQuery's original usefulness was to provide a consistent API for things like DOM manipulation and AJAX - things that [older] browsers have implemented differently. What you can do with 1 - 2 lines with jQuery takes 20 lines of code. It distracted all the inconsistencies so you can just focus on coding.
Then came John Resig's worst nightmare, and now people think jQuery is a language that is almost separate and independent of Javascript. </rant>
Most browsers today have adopted standards, and you don't have to worry about inconsistencies so much unless you're trying to support <IE9. You can use something like underscore to take advantage of the new javascript features (backwards compatible for things that are still incompatible even in modern browsers).
When it comes to plugins, the advantage is in a consistent way of implementing reusable code. For example, I disagree with how you created the namespace (not really, but I would do it differently).
Point, this is all javascript. Learn javascript. If it's easier and faster to do it without using a library, by all means do it ! Pay attention to the community and try to use methods that have been adopted by others ... even if that sometimes means using a library.
NOTE. If someone puts jQuery in the Languages section of their resume, throw it in the trash can.
source to share