Najlepszy sposób na rozszerzenie wtyczki jQuery

Miałem ten sam problem i przyszedłem tutaj, a odpowiedź Jareda Scotta mnie zainspirowała.

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

Odkryłem, że z wieloma wtyczkami metody są chronione / prywatne(tj. w zakresie zamknięć). Jeśli potrzebujesz zmodyfikować funkcjonalność metod / funkcji, to masz pecha, chyba że chcesz go rozwidlić. Teraz, jeśli nie musisz zmieniać żadnej z tych metod / funkcji, możesz użyć $.extend($.fn.pluginName, {/*your methods/properties*/};

Inną rzeczą, którą zrobiłem wcześniej, jest po prostu użycie wtyczki jako właściwości mojej wtyczki zamiast próbować ją rozszerzyć.

Wszystko sprowadza się do tego, jak wtyczka, którą chcesz rozszerzyć, jest zakodowana.

$.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>

// using custom plugin

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

/// wyżej napisany Typ utili zwykle praca elementów dom /////////////// custom utils

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

/ / dostęp powyżej util jako

$.Afunction();

/ / ten typ utili Zwykle rozszerza javascript

Moje podejście do przepisywania wtyczek jQuery polegało na przeniesieniu metod i zmiennych, które muszą być dostępne do bloku opcji i wywołaniu "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();

Przykład podobny do odpowiedzi Jareda Scotta, ale wykonanie kopii oryginalnego prototypu obiektu daje możliwość wywołania metody rodzica:

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

Widget JQuery można rozszerzyć za pomocą 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));

Sprawdź dokumentację jQuery, aby dowiedzieć się więcej:
Widget Factory API
Rozszerzanie widgetów za pomocą Widget Factory