Beste Möglichkeit, ein jQuery-Plugin zu erweitern

Ich bin ein ziemlich neuer jQuery-Benutzer, der ein vorhandenes jQuery-Plugin erweitern möchte, das ungefähr 75% meiner Anforderungen erfüllt. Ich habe versucht, meine Hausaufgaben zu machen. Ich habe die folgenden Fragen zum Stackoverflow geprüft:

• Erweitern eines jQuery-Plugins
• Erweitern Sie ein jQuery-Plugin
• jQuery: Plugin-Frage erweitern

Ich habe gelesen oben auf dem verlängern Verfahren. All diese Hausaufgaben haben mich jedoch verwirrt. Ich arbeite mit dem Vollkalender- Plugin und muss einige Verhaltensweisen ändern sowie neue Ereignis-Hooks hinzufügen. Muss ich das im Plugin-Verschluss selbst tun? Vermisse ich etwas Offensichtliches?

Idealerweise können wir unseren Code vom Plugin-Code trennen, um ein mögliches Upgrade zu ermöglichen. Jede Hilfe wäre sehr dankbar, insbesondere Hinweise darauf, wo mir Informationen oder Meinungen fehlen, ob die Lösungen, die bereits in anderen Fragen zum Stapelüberlauf vorgestellt wurden, sinnvoll sind. Für mich widersprechen sie sich und ich bin immer noch verwirrt.

Ich hatte gerade das gleiche Problem beim Versuch, jquery UI-Plugins zu erweitern, und hier ist die Lösung, die ich gefunden habe (gefunden über jquery.ui.widget.js):

(Funktion ($) {
/ **
 * Namespace: Der Namespace, unter dem sich das Plugin befindet
 * pluginName: Der Name des Plugins
 * /
    var extensionMethods = {
        / *
         * Ruft die ID des Elements ab
         * Dies ist ein Kontext innerhalb des vorhandenen Plugins
         * /
        showId: function () {
            return this.element [0] .id;
        }}
    };

    $ .extend (true, $ [Namespace] [pluginName] .prototype, extensionMethods);


}) (jQuery);

Ich hoffe, dies hilft. Bitte fragen Sie, wenn Sie Fragen haben.

Ich hatte das gleiche Problem und kam hierher, dann inspirierte mich Jared Scotts Antwort.

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

Ich habe festgestellt, dass bei vielen Plugins die Methoden geschützt / privat sind (dh im Closures-Bereich). Wenn Sie die Funktionalität der Methoden / Funktionen ändern müssen, haben Sie kein Glück, es sei denn, Sie sind bereit, dies zu tun. Wenn Sie keine dieser Methoden / Funktionen ändern müssen, können Sie sie verwenden$.extend($.fn.pluginName, {/*your methods/properties*/};

Eine andere Sache, die ich vorher getan habe, ist einfach das Plugin als eine Eigenschaft meines Plugins zu verwenden, anstatt zu versuchen, es zu erweitern.

Worauf es wirklich ankommt, ist, wie das Plugin, das Sie erweitern möchten, codiert ist.

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

// mit benutzerdefiniertem Plugin

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

/// über dem geschriebenen Typ von Utils arbeiten normalerweise mit dom-Elementen //////////////// benutzerdefinierten Utils

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

// Zugriff über util als

$.Afunction();

// Diese Art von Utils erweitert normalerweise Javascript

Mein Ansatz beim Umschreiben von jQuery-Plugins bestand darin, Methoden und Variablen, auf die zugegriffen werden muss, in den Optionsblock zu verschieben und die Option "Erweitern" aufzurufen.

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

Ein Beispiel ähnlich der Antwort von Jared Scott, aber das Erstellen einer Kopie des ursprünglichen Objektprototyps bietet die Möglichkeit, die übergeordnete Methode aufzurufen:

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

Das jQuery Widget kann mit jQuery Widget Factory erweitert werden.

(function ($) {
    "use strict";

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

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

Weitere
Informationen finden Sie in der jQuery-Dokumentation: Widget Factory-API
Erweitern von Widgets mit der Widget Factory