Modo migliore per estendere un plugin jQuery

Question

Sono un abbastanza nuovo utente jQuery cercando di estendere un plugin jQuery esistente che fa circa il 75% di quello che mi serve. Ho cercato di fare il mio lavoro su questo. Ho controllato le seguenti domande su StackOverflow:

• Estensione di un plugin jQuery
• estendere un plugin jQuery
• jQuery: estendere domanda plug

Sono leggere sul metodo estendere . Tuttavia, tutti thise compiti a casa mi ha lasciato confuso. Sto lavorando con la fullcalendar plug-in e la necessità di modificare alcuni dei comportamenti, nonché aggiungere nuovi ganci di eventi. Sono bloccato con questo modo la chiusura plugin stesso? Mi sto perdendo qualcosa di ovvio?

Idealmente saremmo in grado di separare il nostro codice dal codice plugin per consentire un eventuale aggiornamento. Qualsiasi aiuto sarebbe molto apprezzato, in particolare indicazioni su dove mi manca un po 'di informazioni o opinioni su se le soluzioni già presentate in altre questioni Stack Overflow hanno senso. Per me si contraddicono a vicenda e sto ancora lasciato confuso.

Answer 1

Ho appena avuto lo stesso problema cercando di estendere jQuery plugin di interfaccia utente, e qui è la soluzione che ho trovato (trovato tramite 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);

Spero che questo aiuti, si prega di chiedere se avete domande.

Answer 2

Ho avuto lo stesso problema e sono venuto qui, quindi la risposta di Jared Scott mi ha ispirato.

(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

Ive ha trovato che con un sacco di plugin metodi sono protetti / privato (cioè nell'ambito chiusure). Se yo bisogno di modificare la funzionalità dei metodi / funzioni allora il vostro fuori di fortuna a meno che non sei disposto a sborsare esso. Ora, se non avete bisogno di cambiare uno di questi metodi / funzioni quindi è possibile utilizzare $.extend($.fn.pluginName, {/*your methods/properties*/};

Un'altra cosa ive finito per fare prima è semplicemente utilizzando il plugin come una proprietà del mio plug-in invece di cercare di estenderlo.

Quello che davvero tutto si riduce a è come il plugin si desidera estendere è codificata.

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>

// utilizzando plugin personalizzato

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

/// sopra tipo scritto di utils solito lavoro di elementi DOM /////////////// utils personalizzati

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

// accesso sopra util come

$.Afunction();

// questo tipo di utils di solito si estendono javascript

Answer 5

Il mio approccio a riscrittura plugin jQuery è stato quello di spostare i metodi e le variabili che devono essere accessibili al blocco di opzioni e chiamare il 'estendere'

// 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

Esempio simile a Jared Scott`s risposta, ma facendo una copia del prototipo dell'oggetto originale dà la possibilità di chiamare il metodo parent:

(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 può essere estesa utilizzando 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));

Scopri jQuery documentazione per saperne di più:
Widget Factory API
Estendere Widget con il Widget Factory