La meilleure façon d'étendre un Plugin jQuery

je suis un utilisateur de jQuery assez récent qui cherche à étendre un plugin jQuery existant qui fait environ 75% de ce dont j'ai besoin. J'ai essayé de faire mes devoirs. J'ai vérifié les questions suivantes sur stackoverflow:

j'ai lire sur l'extension de la méthode. Cependant, tous ces devoirs m'a laissé confus. Je travaille avec le plugin fullcalendar et j'ai besoin de modifier certains comportements ainsi que d'ajouter de nouveaux crochets d'événement. Est-ce que je suis coincé à faire ça dans la fermeture du plugin lui-même? Ai-je raté quelque chose d'évident?

idéalement, nous serions en mesure de séparer notre code du code plugin pour permettre une possibilité mise. Toute aide serait grandement appréciée, en particulier les pointeurs sur les endroits où je manque de l'information ou des opinions sur le fait de savoir si les solutions déjà présentées dans d'autres questions sur le débordement de la pile ont du sens. Pour moi, ils se contredisent et je suis encore confus.

73
demandé sur Community 2010-01-12 20:34:50

7 réponses

j'ai juste eu le même problème en essayant d'étendre les plugins jQuery UI, et voici la solution que j'ai trouvé (trouvé par jquery.interface.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);

j'espère que cela vous aidera, s'il vous plaît demandez si vous avez des questions.

83
répondu Jared Scott 2010-12-11 00:05:38

j'ai eu le même problème et je suis venu ici, puis la réponse de Jared Scott m'a inspiré.

(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);
17
répondu nepjua 2012-11-07 23:41:46

Ive constaté qu'avec un grand nombre de plugins, les méthodes sont protégées/privées (c'est-à-dire dans le domaine des fermetures). Si vous avez besoin de modifier la fonctionnalité des méthodes/fonctions alors votre chance à moins que vous êtes prêt à le bifurquer. Maintenant, si vous n'avez pas besoin de changer l'une de ces méthodes/fonctions, vous pouvez utiliser $.extend($.fn.pluginName, {/*your methods/properties*/};

une autre chose que j'ai fini par faire avant est simplement d'utiliser le plugin comme une propriété de mon plugin au lieu d'essayer de l'étendre.

ce qu'il en ressort vraiment, c'est comment le plugin que vous voulez étendre est codé.

3
répondu prodigitalson 2010-01-12 18:16:40
$.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>

// en utilisant le plugin personnalisé

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

/// au-dessus écrit le type d'utils habituellement le travail des éléments de dom /////////////// droits de douane 151960920"

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

// accès au-dessus util

$.Afunction();

/ / ce type d'utils étend habituellement javascript

2
répondu Praveen Prasad 2013-06-18 09:57:37

mon approche dans la réécriture des plugins jQuery a été de déplacer les méthodes et les variables qui doivent être accessibles au bloc options et appeler le' 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();
1
répondu hvdd 2013-06-06 14:16:16

exemple similaire à la réponse de Jared Scott, mais faire une copie du prototype original de l'objet donne la possibilité d'appeler la méthode 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);
1
répondu marcini 2016-02-03 09:21:17

Widget jQuery peut être étendu en utilisant L'usine de Widget jQuery.

(function ($) {
    "use strict";

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

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

consultez la Documentation de jQuery pour en savoir plus:

API de Widget Factory

extension des Widgets avec L'usine de Widget

0
répondu Max 2016-03-16 14:48:10