jQuery插件函数覆盖

Question

我已经为我当前的项目实现了几个 jQuery 插件。

由于有些插件有同名的函数，所以最后一个定义的函数调用的那个。

这是我的第一个插件的定义：

$(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(); };
});

这是我的第二个插件的定义：

$(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(); };
});

我也有这种情况：

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

对于这个特定场景，控制台显示：Function 2. Function 2.

其实因为callFunction()在第二个插件中也有定义，所以就用这个了。

我想就解决此问题的最佳方法提供一些建议。 是否可以创建类似于命名空间的东西？

Answer 1

感谢@syms 的回答，我创建了以下示例。

插件1：

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

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

插件2：

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

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

主要：

(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 对象已损坏。

Answer 2

你可以试试这个，

$(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);