扩展jQuery插件的最佳方法


77

我是一个相当新的jQuery用户,希望扩展现有的jQuery插件,该插件可完成我需要的75%的任务。我已经尽力做好这项工作。我已经检查了关于stackoverflow的以下问题:

我已经阅读了extend方法。但是,所有这些作业使我感到困惑。我正在使用fullcalendar插件,需要修改某些行为以及添加新的事件挂钩。我会在插件关闭本身中坚持这样做吗?我是否缺少明显的东西?

理想情况下,我们可以将我们的代码与插件代码分开,以进行可能的升级。我们将不胜感激任何帮助,尤其是在我缺少某些信息或关于其他Stack Overflow问题中已经提出的解决方案是否有意义的观点时。对我来说,他们彼此矛盾,我仍然感到困惑。


justkt,您能张贴一些示例代码来说明如何扩展fullcalendar插件吗?我目前正在尝试做同样的事情,但是却陷入困境,无法调用我应该添加的任何功能。
马特·麦考密克

@MattMcCormick-您是否尝试过下面列出的可接受的答案?
justkt 2012年

啊,我包括.prototype。我不需要那个 现在我只有$ .extend(true,$ .fullCalendar,extensionMethods); 而且有效!理想情况下,我想扩展Event对象,但是该对象没有命名空间,因此我不知道如何实现。目前,这是可行的。
马特·麦考密克

Answers:


85

我只是在尝试扩展jquery UI插件时遇到了同样的问题,这是我找到的解决方案(通过jquery.ui.widget.js找到了):

(函数($){
/ **
 *命名空间:插件位于的命名空间
 * pluginName:插件的名称
 * /
    var extensionMethods = {
        / *
         *检索元素的ID
         *这是现有插件中的一些上下文
         * /
        showId:function(){
            返回this.element [0] .id;
        }
    };

    $ .extend(true,$ [命名空间] [pluginName] .prototype,extensionMethods);


})(jQuery);

希望对您有所帮助,请询问您是否有任何问题。


2
因此要澄清一下,如果我想扩展jQuery UI的自动完成功能,那么Namespace将是“ ui”而pluginName将是“自动完成”?
Matt Huggins

1
我想我回答了我自己的问题。我在autocomplete源中找到了它jQuery.widget("ui.autocomplete", ...),在小部件源中找到了它在“。”处拆分,命名空间是索引0,pluginName是索引1。换句话说,看起来我是对的。:)
Matt Huggins

4
@Jared-我最终在这里接受您的建议以扩展jQuery UI自动完成功能。我在这里描述我的目标:matthuggins.com/articles/…,我在这里有完整的代码:github.com/mhuggins/jquery-ui-autocomplete-hints。如果您有任何改进建议,我很乐意听取!
马特·哈金斯

4
如何找到命名空间和pluginName?
Pablo SG Pacheco 2014年

17

我遇到了同样的问题,来到这里,然后Jared Scott的回答启发了我。

(function($) {

    var fullCalendarOrg = $.fn.fullCalendar;

    $.fn.fullCalendar = function(options) {
        if(typeof options === "object") {
            options = $.extend(true, options, {
                // locale
                isRTL: false,
                firstDay: 1,
                // some more options
            });
        }

        var args = Array.prototype.slice.call(arguments,0);
        return fullCalendarOrg.apply(this, args);
    }

})(jQuery);

3

香港专业教育学院发现,有很多插件的方法是受保护的/私有的(即在闭包范围内)。如果您需要修改方法/功能的功能,那么除非您愿意分叉,否则您将不走运。现在,如果您不需要更改任何这些方法/功能,则可以使用$.extend($.fn.pluginName, {/*your methods/properties*/};

香港专业教育学院最终做的另一件事就是简单地将插件用作我插件的属性,而不是尝试扩展它。

真正要归结为您要扩展的插件的编码方式。


在主要扩展中,我要做的只是在某些情况下,例如在插件内部创建的DOM元素上添加事件处理程序。在其他情况下,我需要覆盖现有方法内部的行为。我读得越多,看到的干净方法就越少。还有其他想法吗?
justkt 2010年

好吧,如果这些方法是公共API中的方法(它们似乎不是),那么您可以使用我上面提到的方法替换函数定义。除此之外,没有干净的方法。您只需将其分叉以供使用,然后砍掉。
prodigitalson

2
@prodigitalson public * API;)
Niks

2
$.fn.APluginName=function(param1,param2)
{
  return this.each(function()
    {
      //access element like 
      // var elm=$(this);
    });
}

// sample plugin
$.fn.DoubleWidth=function()
  {
    return this.each(function()
      {
        var _doublWidth=$(this).width() * 2;
        $(this).width(_doubleWidth);
      });
  }

//

<div style="width:200px" id='div!'>some text</div>

//使用自定义插件

$('#div1').DoubleWidth();

///上面编写的utils类型通常是dom元素的工作//////////////// custom utils

(function($){
  var _someLocalVar;
  $.Afunction=function(param1,param2) {
    // do something
  }
})(jquery);

//在util上方访问as

$.Afunction();

//这种类型的utils通常会扩展javascript


1
那不是他要问的-他在问如何最好地扩展现有插件,以允许更新他用作基础的基础插件,同时在其上添加所需功能。
prodigitalson

1

我重写jQuery插件的方法是将需要访问的方法和变量移至options块并调用“ extend”

// in the plugin js file
$.jCal = function (target, opt) {
    opt = $.extend({
       someFunctionWeWantToExpose: function() {
           // 'this' refers to 'opt', which is where are our required members can be found
       }
    }

    // do all sorts of things here to initialize

    return opt; // the plugin initialisation returns an extended options object
}


////// elsewhere /////

var calendar = $("#cal1").jCal();
calendar.someFunctionWeWantToExpose();

1

该示例类似于Jared Scott的答案,但制作原始对象原型的副本使您可以调用父方法:

(function($) {

    var original = $.extend(true, {}, $.cg.combogrid.prototype);

    var extension = {
        _renderHeader: function(ul, colModel) {
            original._renderHeader.apply(this, arguments);

            //do something else here...
        }
    };

    $.extend(true, $.cg.combogrid.prototype, extension);

})(jQuery);

0

可以使用jQuery Widget Factory扩展jQuery Widget。

(function ($) {
    "use strict";

    define([
        "jquery",
        "widget"
    ], function ($, widget) {
        $.widget("custom.yourWidget", $.fn.fullCalendar, {
            yourFunction: function () {
                // your code here
            }
        });

        return $.custom.yourWidget;
    });
}(jQuery));

查看jQuery文档以了解更多信息:
Widget Factory API
使用Widget Factory扩展Widget

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.