How can i extend jquery plugin with same namespace

Question

I had created two general purpose jquery plugins files. 'script1.js' and 'script2.js'

Some project need 'script1.js' & other need 'script2.js'. My new project need these two plugins.

How can i use these plugin with same namespace.

My namespace is 'abc'

script1.js
----------
(function($)
{
    $.fn.abc = function ()
    {
        return
        {
            foo1: function()
            {
                console.log("foo1");
            },

            foo2: function()
            {
                console.log("foo2");
            }
        }
    };
})(jQuery);

$(".element").abc().foo1(); //working fine - 'foo1'

script2.js
----------
(function($)
{
    $.fn.abc = function ()
    {
        return
        {
            foo3: function()
            {
                console.log("foo3");
            }
        }
    };
})(jQuery);

Can i extend the first plugin with the second plugin.

$(".element").abc().foo3(); //expected print 'foo3'

$(".element").abc().foo1(); //expected print 'foo1'

foo1 & foo2 is need almost every application. but foo3 is not needed every application. foo3 is a larger plugin.

You can. How do you include those files on the page? With script tag? — dfsq, Nov 07 '17 at 10:32
Technically, you can do it. But this is ugly and not how you should extend jQuery prototype. So I would suggest you to just rename your second plugin as the best solution. — dfsq, Nov 07 '17 at 10:54

pmaddi · Answer 1 · 2017-11-07T11:09:09.947

Refer to this answer. Best Way to Extend a jQuery Plugin

Update: If it is possible for you to edit the existing script1.js plugin

(function($) {
    $.fn.abc = function() {
        return {
            foo1: function() {
                console.log("foo1");
            },

            foo2: function() {
                console.log("foo2");
            },

            foo3: function() {
                console.log("foo3");
            }
        }
    };
})(jQuery);

Do this.

If you want to extend functions of .abc() namespace with functions of .xyz()

$.fn.abc = function () {
     // here you can access public "members" of plugin xyz
     $.fn.pluginBar.foo3();
}


$.fn.xyz = function () {
    // private "members" (only this plugin can access them)
    var fn1 = function () { ... }
    var fn2 = function () { ... }

    return {
        foo3: function () { console.log("foo3") },
    };
}

How can i extend jquery plugin with same namespace

1 Answers1