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:
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.
quelle
Antworten:
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):
Ich hoffe, dies hilft. Bitte fragen Sie, wenn Sie Fragen haben.
quelle
Namespace
möchte, wäre dies "ui" undpluginName
"autocomplete".jQuery.widget("ui.autocomplete", ...)
, und in der Widget-Quelle, wo es am "." Teilt, wobei der Namespace Index 0 und pluginName Index 1 ist. Mit anderen Worten, es sieht so aus, als hätte ich recht. :)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);
quelle
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.
quelle
$.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
// Diese Art von Utils erweitert normalerweise Javascript
quelle
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();
quelle
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);
quelle
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
quelle