Bester Weg, eine jQuery-Plugin zu erweitern

Question

Ich bin ein ziemlich neuer jQuery Benutzer sucht eine vorhandene jQuery-Plugin zu erweitern, die etwa 75% nicht von dem, was ich brauche. Ich habe versucht, meine Hausaufgaben auf, dies zu tun. Ich habe folgende Fragen auf Stackoverflow ausgecheckt:

• Erweitern eines jQuery Plugin
• Extend ein jQuery-Plugin
• jQuery: erweitern Plugin Frage

Ich habe nachlesen auf der Methode erweitern . Jedoch sind alle thise Hausaufgaben verlassen hat mich verwirrt. Ich arbeite mit der fullcalendar Plugin und Notwendigkeit, da einige das Verhalten zu ändern und neue Ereignis-Hooks hinzufügen. Bin ich stecken sich dies in der Plug-Verschluss mit zu tun? Bin ich etwas fehlt offensichtlich?

Im Idealfall würden wir in der Lage sein, unseren Code aus dem Plugin-Code zu trennen für ein mögliche Upgrade zu ermöglichen. Jede Hilfe wäre sehr dankbar, vor allem Hinweisen auf, wo ich vermisse einige Informationen oder Meinungen darüber, ob die Lösungen bereits in anderen Stack-Überlauf präsentierten Fragen Sinn machen. Mir widersprechen sie einander, und ich bin links immer noch verwirrt.

Answer 1

Ich hatte gerade das gleiche Problem versucht, JQuery UI-Plugins zu erweitern, und hier ist die Lösung, die ich gefunden (fand es durch jquery.ui.widget.js):

(function($) {
/**
 *  Namespace: the namespace the plugin is located under
 *  pluginName: the name of the plugin
 */
    var extensionMethods = {
        /*
         * retrieve the id of the element
         * this is some context within the existing plugin
         */
        showId: function(){
            return this.element[0].id;
        }
    };

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


})(jQuery);

hoffe, das hilft, bitte fragen Sie, wenn Sie Fragen haben.

Answer 2

Ich hatte das gleiche Problem und kam hier, dann Antwort Jared Scott inspiriert mich.

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

Answer 3

gefunden Ive, dass mit einer Menge von Plugins sind die Methoden geschützt / privat (dh in den Verschlüssen scope). Wenn yo Notwendigkeit, die Funktionalität der Methoden / Funktionen dann kein Glück, es sei denn Sie bereit sind zu ändern, um es zu gabeln. Nun, wenn Sie nicht brauchen, jede dieser Methoden / Funktionen ändern, dann können Sie verwenden $.extend($.fn.pluginName, {/*your methods/properties*/};

ive Eine andere Sache endet, bevor Sie einfach wird über das Plugin als eine Eigenschaft meiner Plugin, anstatt zu versuchen, sie zu verlängern.

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

Answer 4

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

// Verwendung von benutzerdefinierten Plugin

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

/// oben geschrieben Art von utils in der Regel Arbeit von dom Elementen /////////////// benutzerdefinierte utils

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

// Zugriff über util als

$.Afunction();

// diese Art von utils in der Regel verlängern Javascript

Answer 5

Mein Ansatz in Umschreiben jQuery Plugins hat Methoden und Variablen zu bewegen, dass Bedarf zugegriffen werden, um die Optionen blockieren und ruft die ‚erweitern‘

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

Answer 6

Beispiel zu Jared Scott`s Antwort ähnlich, aber eine Kopie der ursprünglichen Objekt Prototypenbau gibt die Möglichkeit, Call Mutter Methode:

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

Answer 7

jQuery Widget erweitert werden kann jQuery Widget Factory verwenden.

(function ($) {
    "use strict";

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

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

Überprüfen Sie heraus jQuery Dokumentation mehr erfahren:
Widget Factory API
Erweitern von Widgets mit dem Widget Factory