3

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'));
Improve this question
1
  • Why is this getting closed? It seems like a good, objective question, which has already garnered an objective answer (method chaining, etc...) Commented Dec 9, 2014 at 18:45

3 Answers 3

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Ah so method chaining seems to be the main benefit... it looks like it'd be useful to make jquery plugins even when not dealing with jquery objects as you can make use of chaining
@Growler You still need to return this from jQuery method in order to keep chaining. The same can be done from any function
If you're making a plugin, but you're not dealing with some jquery object, then what exactly would you be chaining off of? In other words, what would be the equivalent of the string object in my simpler example?
@Katana314 I don't see any point of calling a jq method on a non jq object, i could be wrong
@A.Wolff Yeah, I agree with that - my question was directed at Growler.
2

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
Improve this answer

Comments

1

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.

Improve this answer

1 Comment

Yeah, I realized after I posted that I didn't address plugins directly... so I included a line about it. Overall, the comment applies to anything jQuery - including plugins.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.