Meilleur moyen d'étendre un plugin jQuery

Question

Je suis assez nouveau jQuery utilisateur à la recherche de prolonger d'un existant plugin jQuery qui est d'environ 75% de ce dont j'ai besoin. J'ai essayé de faire mes devoirs. J'ai vérifié les questions suivantes sur stackoverflow:

• L'extension d'un Plugin jQuery
• Étendre un Plugin jQuery
• jQuery: étendre plugin en question

J'ai lu sur l'extension de la méthode. Cependant, tous ces devoirs m'a laissé confus. Je travaille avec le fullcalendar plugin et de la nécessité de modifier certains comportements, ainsi qu'à ajouter un nouvel événement crochets. Suis-je coincé avec le faire dans le plugin fermeture elle-même? Ai-je raté quelque chose d'évident?

Idéalement, nous aimerions être en mesure de séparer notre code de le code du plugin pour permettre une mise à niveau possible. Toute aide serait grandement appréciée, en particulier des pointeurs sur l'endroit où je suis en manque des informations ou des opinions sur si les solutions déjà présenté dans d'autres Débordement de Pile questions de sens. Pour moi, ils se contredisent l'une l'autre et je suis toujours confus.

Answer 1

J'ai juste eu le même problème en essayant d'étendre l'INTERFACE utilisateur de jquery plugins, et voici la solution que j'ai trouvé (trouvé par jquery.ui.widget.js):

(function($) {
/**
 * Espace de noms: les noms, le plugin est situé sous
 * pluginName: le nom du plugin
*/
 var extensionMethods = {
/*
 * récupérer l'id de l'élément
 * c'est le contexte dans le plugin existant
*/
 showId: function(){
 de retour cette.élément[0].id;
}
};

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


})(jQuery);

espérons que cela aide, veuillez vous demander si vous avez des questions.

Answer 2

J'avais 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);
 

Answer 3

J'ai constaté que beaucoup de plugins les méthodes sont protégées/privé (c'est à dire dans les fermetures de portée). Si yo besoin de modifier la fonctionnalité des méthodes/fonctions de votre hors de la chance, sauf si vous êtes prêt à débourser. Maintenant, si vous n'avez pas besoin de changer l'une de ces méthodes/fonctions alors vous pouvez utiliser $.extend($.fn.pluginName, {/*your methods/properties*/};

Une autre chose ive a fini par faire avant est tout simplement en utilisant le plugin en tant que propriété de mon plugin au lieu d'essayer de l'étendre.

De quoi il s'agit vraiment de la est de savoir comment le plugin que vous souhaitez prolonger est codé.

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>
 

// en utilisant un plugin personnalisé

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

/// au-dessus du type écrit d’utils habituellement constitué d’éléments dom /////////////// utils personnalisés

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

// accès ci-dessus util as

 $.Afunction();
 

// ce type d'utils étend habituellement le javascript

Answer 5

Mon approche en réécrivant les plugins jQuery a été de déplacer les méthodes et les variables qui doivent être accessibles au bloc d’options et d’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();