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

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

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

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

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

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

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