JQuery plugin functions are overwritten

Question

I have implemented several jQuery plugins for my current project.

Since some plugins have functions with the same name, one that is specified in the last defined one.

Here is the definition of my first plugin:

$(function($)
{
    $.fn.initPlugin1 = function(parameters)
    {
        var defaultParameters = {};
        $(this).data('parameters', $.extend(defaultParameters, parameters));
        return $(this);
    };

    $.fn.function1 = function(){ console.log('Function 1.'); };

    $.fn.callFunction = function(){ $(this).function1(); };
});

And here is the definition of my second plugin:

$(function($)
{
    $.fn.initPlugin2 = function(parameters)
    {
        var defaultParameters = {};
        $(this).data('parameters', $.extend(defaultParameters, parameters));
        return $(this);
    };

    $.fn.function2 = function(){ console.log('Function 2.'); };

    $.fn.callFunction = function(){ $(this).function2(); };
});

I have this scenario too:

$("#div1").initPlugin1().callFunction();
$("#div2").initPlugin2().callFunction();

In this particular scenario, the consoles show: Function 2. Function 2.

In fact, since it is callFunction()also defined in the second plugin, this is the one that is used.

I would like some to advise what is the best way to solve this problem. Is it possible to create something similar to a namespace?

Answer 1

,

$(function($) {
  $.fn.initPlugin1 = function() {
    console.log('Initialized Plugin1');
    return $(this);
  };


});
$(function($) {
  $.fn.initPlugin2 = function() {
    console.log('Initialized Plugin2');
    return $(this);
  };

  $.fn.callFunction = function(param) {
    $(this).append(param);
  };
});
(function($) {
  $(document).ready(
    function() {
      $("#div1").initPlugin1(); //Run correctly
      $("#div2").initPlugin2(); //Run correctly

      $("#div1").initPlugin1().callFunction('function1');
      $("#div2").initPlugin2().callFunction('function2');
    });

})(jQuery);

Hide result

Answer 2

@syms , .

Plugin1:

$(function($) {
    $.fn.initPlugin1 = function() {
        console.log('Initialized Plugin1');
        return $(this);
    };

    $.fn.initPlugin1.testFunction = function() {
        $(this).append('Function 1.');
    };
});

Plugin2:

$(function($) {
    $.fn.initPlugin2 = function() {
        console.log('Initialized Plugin2');
        return $(this);
    };

    $.fn.initPlugin2.testFunction = function() {
        $(this).append('Function 2.');
    };
});

Main:

(function($)
{
    $(document).ready(
        function()
        {
            $("#div1").initPlugin1(); //Run correctly
            $("#div2").initPlugin2(); //Run correctly

            $("#div1").initPlugin1.testFunction(); //Fail
            $("#div2").initPlugin2.testFunction(); //Fail
        });

})(jQuery);

, : Cannot read property 'createDocumentFragment' of null.

-, this .