Meilleure façon de faire un plugin jQuery

Question

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

• Extension d'un plugin jQuery
• Étendre un plugin jQuery
• jQuery: étendre question plug-in

J'ai lire sur la méthode extend . Cependant, tous Thise devoirs me laisse perplexe. Je travaille avec le plugin fullcalendar et la nécessité de modifier certains comportements ainsi que d'ajouter de nouveaux crochets d'événements. Suis-je coincé avec le faire dans la fermeture du plug-in lui-même? Est-ce que je manque quelque chose évidente?

Idéalement, nous serions en mesure de séparer notre code du 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 me manque des informations ou des opinions sur les solutions déjà si présentées dans d'autres Stack Overflow des questions de sens. Pour moi, ils se contredisent et je suis toujours laissé perplexe.

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

J'ai eu le même problème et je 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 3

Ive a trouvé que, avec un grand nombre de plug-ins les méthodes sont protégées / privé (dans le cadre de la fermeture). Si yo besoin de modifier la fonctionnalité des méthodes / fonctions alors votre chance de moins que vous êtes prêt à lui fourchette. Maintenant, si vous ne avez pas besoin de changer alors l'une de ces méthodes / fonctions que vous pouvez utiliser $.extend($.fn.pluginName, {/*your methods/properties*/};

Une autre chose que je aie fini par faire avant est tout simplement en utilisant le plugin comme une propriété de mon plug-in au lieu d'essayer de l'étendre.

Qu'est-ce que tout cela vient vraiment à comment le plugin que vous souhaitez étendre est codée.

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 le plugin personnalisé

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

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

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

// accès ci-dessus util comme

$.Afunction();

// ce type de utils extension généralement javascript

Answer 5

Mon approche de réécriture des plugins jQuery a été de déplacer les méthodes et les variables qui doivent accéder au bloc d'options et d'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 de réponse similaire 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));

Consultez jQuery Documentation pour en savoir plus:
Widget API usine
Extension Widgets avec l'usine Widget