web-dev-qa-db-fra.com

Meilleure façon d'étendre un plugin jQuery

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

J'ai l sur la méthode d'extension. 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? Suis-je en train de manquer quelque chose d'évident?

Idéalement, nous serions en mesure de séparer notre code du code du plugin pour permettre une éventuelle mise à niveau. Toute aide serait grandement appréciée, en particulier les pointeurs sur lesquels je manque des informations ou des opinions sur le sens des solutions déjà présentées dans d'autres questions sur le débordement de pile. Pour moi, ils se contredisent et je suis toujours confus.

jquerypluginsfullcalendarextend
76
justkt

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

 
 (fonction ($) {
/** 
 * Espace de noms: l'espace de noms dans lequel se trouve le plugin sous 
 * pluginName: le nom de le plugin 
 */
 var extensionMethods = {
 /*
 * récupérer l'id de l'élément 
 * c'est un certain contexte dans l'existant plugin 
 */
 showId: function () {
 renvoie cet.élément [0] .id; 
} 
}; 
 
 $ .extend (true, $ [Namespace] [pluginName] .prototype, extensionMethods); 
 
 
}) (jQuery);

j'espère que cela vous aidera, veuillez demander si vous avez des questions.

85
Jared Scott

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
nepjua

J'ai constaté qu'avec de nombreux 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 vous n'avez pas de chance à moins que vous ne vouliez le débourser. Maintenant, si vous n'avez pas besoin de modifier 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 auparavant est simplement d'utiliser le plugin comme propriété de mon plugin au lieu d'essayer de l'étendre.

Tout se résume vraiment à la façon dont le plugin que vous souhaitez étendre est codé.

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

/// les types d'écrit ci-dessus fonctionnent généralement avec des éléments dom ///////////////// des utilitaires personnalisés

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

// accès ci-dessus util as

$.Afunction();

// ce type d'utilitaires étend généralement javascript

2
Praveen Prasad

Exemple similaire à la réponse de Jared Scott, mais faire une copie du prototype d'objet d'origine 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
marcini

Mon approche dans la réécriture des plugins jQuery a été de déplacer les méthodes et les variables qui doivent être accédées 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();
1
hvdd

jQuery Widget peut être étendu à l'aide de 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));

Consultez la documentation jQuery pour en savoir plus:
Widget Factory API
Extension des widgets avec la Widget Factory

0
Max