jQuery插件函数覆盖

Posted 2023-02-21

【中文标题】jQuery插件函数覆盖

【英文标题】：jQuery plugins functions overwrite

【发布时间】：2015-07-05 15:31:23

【问题描述】：

我已经为我当前的项目实现了几个 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()在第二个插件中也有定义，所以就用这个了。

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

【问题讨论】：

$.fn.callFunction 是 jquery 插件，为什么要在两种情况下将其扩展为不同。所以不要为此使用原型方法。

你也想这样写吗：$("#div1").callFunction();？

@dfsq 将不胜感激！

【参考方案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 对象已损坏。

【参考方案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);

【讨论】：

这种方式initPlugin1不会被调用。

干得好！感谢您的帮助；）

@syms 当我遇到一个奇怪的错误时，我正在用你的方法重构我的代码：TypeError: Cannot read property 'createDocumentFragment' of null。显然，this 对象与以前不同。我正在使用这个插件结构： $(function($) $.fn.initPlugin1 = function() return $(this); ; $.fn.initPlugin1.function1 = function() $(this).append ('函数 1.'); ; $.fn.initPlugin1.callFunction = function() $(this).initPlugin1.function1(); ; );

@syms 我创建了一个新示例来演示该问题。

@Syms 当然可以，但这不是我想做的。每个插件都应该有自己的testFunction，因为这个插件的内容因插件而异。