Melhor maneira de estender um plugin jQuery

Question

Sou um usuário jQuery relativamente novo que deseja estender um plugin jQuery existente que faz cerca de 75% do que preciso.Eu tentei fazer minha lição de casa sobre isso.Verifiquei as seguintes perguntas no stackoverflow:

• Estendendo um plugin jQuery
• Estender um plugin jQuery
• jQuery:estender questão do plugin

Eu tenho Leia no método de extensão.No entanto, todo esse dever de casa me deixou confuso.Estou trabalhando com o calendário completo plugin e precisa modificar alguns dos comportamentos, bem como adicionar novos ganchos de eventos.Estou preso em fazer isso no próprio fechamento do plugin?Estou perdendo algo óbvio?

Idealmente, seríamos capazes de separar nosso código do código do plugin para permitir uma possível atualização.Qualquer ajuda seria muito apreciada, especialmente dicas sobre onde estou faltando algumas informações ou opiniões sobre se as soluções já apresentadas em outras questões do Stack Overflow fazem sentido.Para mim, eles se contradizem e ainda estou confuso.

Answer 1

Acabei de ter o mesmo problema tentando estender os plug -ins de interface do usuário do jQuery, e aqui está a solução que encontrei (encontrei -a através do 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);

Espero que isso ajude, pergunte se você tem alguma dúvida.

Answer 2

Eu tive o mesmo problema e vim aqui, então a resposta de Jared Scott me inspirou.

(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

Eu descobri que, com muitos plugins, os métodos são protegidos/privados (ou seja, no escopo de fechamentos). Se você precisar modificar a funcionalidade dos métodos/funções, sua sorte, a menos que esteja disposto a bifurcar. Agora, se você não precisa alterar nenhum desses métodos/funções, pode usar $.extend($.fn.pluginName, {/*your methods/properties*/};

Outra coisa que acabei fazendo antes é simplesmente usar o plug -in como uma propriedade do meu plugin, em vez de tentar estendê -lo.

O que tudo realmente se resume é como o plug -in que você deseja estender é codificado.

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>

// usando plugin personalizado

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

/// Tipo de utils escrito acima geralmente trabalha com elementos dom ////////////// Utils personalizados

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

// Acesso acima Util como

$.Afunction();

// Este tipo de utils geralmente estende JavaScript

Answer 5

Minha abordagem ao reescrever plugins jQuery tem sido mover métodos e variáveis ​​que precisam ser acessados ​​para o bloco de opções e chamar o '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();

Answer 6

Exemplo semelhante à resposta de Jared Scott, mas fazer uma cópia do protótipo de objeto original dá a capacidade de chamar o método pai:

(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

O widget jQuery pode ser estendido usando o 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));

Confira a documentação do jQuery para saber mais:
API da fábrica de widgets
Estendendo widgets com a fábrica de widgets