Meilleure façon d'étendre un plugin jQuery

Question

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

• Extending a jQuery Plugin
• Extend a jQuery Plugin
• jQuery: extend plugin question

J'ai read up sur la méthode extend. Cependant, tous ces devoirs m'ont laissé confus. Je travaille avec le plugin fullcalendar et j'ai besoin de modifier certains comportements ainsi que d'ajouter de nouveaux hooks d'événements. Suis-je coincé avec cela dans la fermeture du plugin lui-même? Est-ce que je manque quelque chose d'évident?

Idéalement, nous serions en mesure de séparer notre code du code plugin pour permettre une mise à niveau possible. Toute aide serait grandement appréciée, en particulier des indications sur les points où il me manque des informations ou des opinions sur la pertinence des solutions déjà présentées dans d'autres questions de Stack Overflow. Pour moi, ils se contredisent et je suis toujours confus.

Answer 1

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

espérons que cette aide, s'il vous plaît demander si vous avez des questions.

Answer 2

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

/// ci-dessus dactylographié de utils travaillent habituellement des éléments dom ////// ///////// Utilitaires personnalisés

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

// accès ci-dessus util comme

$.Afunction(); 

// ce type de utils étendre habituellement javascript

Answer 3

Ive a trouvé que, avec un grand nombre de plug-ins les méthodes sont protégées/privé (dans le cadre des fermetures). Si vous avez besoin de modifier la fonctionnalité des méthodes/fonctions, alors vous n'avez pas de chance, sauf si vous êtes prêt à le faire. Maintenant, si vous n'avez pas besoin de changer une de ces méthodes/fonctions alors 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.

Tout ce qui se résume à la façon dont le plugin que vous voulez étendre est codé.

Answer 4

J'ai eu le même problème et suis venu ici, alors 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 5

Mon approche dans la réécriture des plugins jQuery a été de déplacer les méthodes et les variables qui doivent accéder aux options bloc et appeler le « étendre »

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

Exemple similaire à réponse Jared Scott`s , mais en faisant une copie du prototype d'objet original 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); 

Answer 7

jQuery Widget peut être étendu en utilisant 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)); 

Découvrez jQuery Documentation pour en savoir plus:
Widget Factory API
Extending Widgets with the Widget Factory