javascript - 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() 也在第二个插件中定义，因此使用的就是这个。

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

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