77

我是一个相当新的 jQuery 用户，希望扩展一个现有的 jQuery 插件，它可以完成我需要的大约 75% 的工作。我试图在这方面做我的功课。我在stackoverflow上检查了以下问题：

我已经阅读了扩展方法。然而，所有这些作业都让我感到困惑。我正在使用fullcalendar插件，需要修改一些行为以及添加新的事件挂钩。我是否坚持在插件闭包本身中执行此操作？我错过了一些明显的东西吗？

理想情况下，我们将能够将我们的代码与插件代码分开，以允许可能的升级。任何帮助将不胜感激，尤其是关于我在哪些地方缺少一些关于其他 Stack Overflow 问题中已经提出的解决方案是否有意义的信息或意见的指针。对我来说，它们相互矛盾，我仍然感到困惑。

4

7 回答 7

85

我在尝试扩展 jquery UI 插件时遇到了同样的问题，这是我找到的解决方案（通过 jquery.ui.widget.js 找到）：

（函数（$）{
/**
 * 命名空间：插件所在的命名空间
 * pluginName：插件的名称
 */
    var extensionMethods = {
        /*
         * 获取元素的id
         * 这是现有插件中的一些上下文
         */
        显示ID：函数（）{
            返回 this.element[0].id;
        }
    };

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


})(jQuery);

希望这会有所帮助，如果您有任何问题，请询问。

于 2010-12-11T00:05:38.093 回答
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);
于 2012-11-07T23:18:46.833 回答
3 
$.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 元素的工作 ////////////// 自定义 utils

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

// 访问上面的 util 作为

$.Afunction();

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

于 2010-01-12T17:58:10.140 回答
3

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

我之前最终做的另一件事是简单地将插件用作我的插件的属性，而不是尝试扩展它。

真正归结为您要扩展的插件是如何编码的。

于 2010-01-12T18:16:40.707 回答
1

我重写 jQuery 插件的方法是将需要访问的方法和变量移动到选项块并调用“扩展”

// 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();
于 2013-06-06T14:16:16.410 回答
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);
于 2016-02-03T09:21:17.217 回答
0

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

(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
Extending Widgets with the Widget Factory

于 2016-03-16T14:48:10.153 回答