CODEWITHSUNDEEP
javascriptjqueryfunction
user3871
user3871

Reputation: 12718

Why use jQuery plugins over javascript functions?

Why would you use a jQuery plugin over a traditional javascript function? The only difference I see is you need to pass in a jQuery object into the js function... other that that, I don't see a huge difference, as it seems both can 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 namespacing to be easier with javascript functions:

        var mynamespace = {

            greenify : function (el) {
                el.css("color", "green");
            }
        }
        mynamespace.greenify($('p'));

Upvotes: 3

Views: 518

Answers (3)

Ryan Wheale
Ryan Wheale

Reputation: 28400

The original usefulness of jQuery was to provide a consistent API to things such as DOM manipulation and AJAX - things which [older] browsers implemented very differently. It would take 20+ lines of code to do what can be done with 1 - 2 lines with jQuery. It abstracted away all of the inconsistencies so you could just focus on coding.

Then, John Resig's worst nightmare happened and people now think jQuery is a language, almost separate and independent from Javascript. </rant>

Today, most browsers have adopted standards and you don't have to worry so much about inconsistencies unless you are trying to support < IE9. You can use something like underscore to help take advantage of newer javascript features (with backwards compatability for things which are still inconsistently implemented even in today's browsers).

Regarding plugins, the advantage is having a consistent way to implement reusable code. For example, I kind of disagree with how you created a namespace (not really, but I would have done it differently).

Point is, it's all javascript. Learn javascript. If it's easier and quicker to do it without using a library, by all means do it! Pay attention to the community and try and use techniques which have been adopted by others... even if it occasionally means using a library.

NOTE: If someone puts jQuery under the "languages" section on their resume, throw it in the trash.

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

Always a jQuery object

When using a plugin as you said (it is really an object prototype) You are sure that this will be a jQuery object since you cannot call it without a jQuery object except if you make your way around with .call, .apply, .bind and etc.

Meanwhile, you can pass anything to a function, so the argument may not be a jQuery object and will throw an error.

Readability when chaining

You can chain function with both method, but let be honest, with a jQuery prototype, it 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(...);

Scope

When adding a function to the prototype, no matter which scope you are, it will be accessible everywhere. That allow you the create a certain 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

Upvotes: 2

Katana314
Katana314

Reputation: 8610

Usually, usefulness of JQuery functions is in chaining them. Just like you want to call:

string.substring(2, 5).startsWith("lol")

instead of

Util.StartsWith(Util.substring(string, 2, 5), "lol")

It's easier to read that way. In fact, I think that second function might still need a "return this" to be useful?

It may depend on the context - some operations are very much tied to an element or set of elements, while others just make more sense standing on their own - thus, your approach of namespacing would be just fine. It's partially coding style.

A disclaimer - I'm not as experienced with writing JQuery plugins, this is just my general observations based on JS language design.

Upvotes: 3

Related Questions