jQuery plugin with multiple methods

Question

I am going to wrap some of my functions in a nice manner and for this I want to go with jQuery approach. Like jQuery having a lots of methods

$.parseJson()
$.ajax()
$("div").text("hey my testing");

and both methods are present in a same jQuery file. But while reading about how to make a jquery plugin, its specified that you don't need to create multiple functions inside a same plugin. Instead pass an argument which contains the method name as string.

So, Is that the below snippet is correct or do i need to make some corrections in it.

<script type="text/javascript">
    (function ($) {
        $.fn.testMethod1 = function () {
            return $(this).each(function () { });
        };
        $.fn.testMethod2 = function () {
            return $(this).each(function () { });
        };
        $.test = function () {
            return "testresult"
        };
    })(jQuery);

    $("div1").testMethod1();
    $("div2").testMethod2();
    $.test();

    //Is that needed to be replace in a different way like
    $("div1").myPlugin("testMethod1");
    $("div1").myPlugin("testMethod2");
    $("div1").myPlugin("test");


</script>

this is already a jQuery object. You don't need to re-wrap it. — Blender
– Blender, Commented Mar 8, 2013 at 5:10
Ok, accepted. But is that multiple methods inside a same plugin is correct? — Manish Rawat
– Manish Rawat, Commented Mar 8, 2013 at 5:11
Twitter Bootstrap does it that way and I think it's more intuitive if all plugins followed the same syntax. — Blender
– Blender, Commented Mar 8, 2013 at 5:13
@Blender But its something like we are calling the plugins through their name. e.g. $("div").myPlugin("externalPlugin1",data) and $("div").myPlugin("externalPlugin2") — Manish Rawat
– Manish Rawat, Commented Mar 8, 2013 at 5:29

PitaJ · Accepted Answer · 2013-03-08 05:14:09Z

1

The second way is preferred because it conserves namespace in the jQuery object.

Read the official jQuery doc for this: Plugins/Authoring

answered Mar 8, 2013 at 5:14

PitaJ

15.4k6 gold badges43 silver badges58 bronze badges

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

2 Comments

Manish Rawat Over a year ago

What you mean by conserving namespaces in jQuery. There are already a bunch of pre-defined functions in jQuery so why don't they do it in the same way like $("div")("fadeIn")

PitaJ Over a year ago

It's just the preferred way for most developers. This allows for there to be more plugin possibilities without there being really complex names. It's just the preferable standard.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Have you try using jquery boilerplate. It is a good point to start study jQuery plugin development. It's provide a safe and(seem to be) a good solution to create a plugin. They use your second way to call a method.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 8, 2013 at 6:38

lngs

6981 gold badge8 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery plugin with multiple methods

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related