Лучший способ расширить плагин jQuery

Question

Я довольно новый пользователь jQuery, желающий расширить существующий плагин jQuery, который делает около 75% того, что мне нужно. Я пытался сделать свою домашнюю работу по этому вопросу. Я проверил следующие вопросы по stackoverflow:

• Расширение плагина jQuery
• Расширение jQuery-плагина
• jQuery: расширить вопрос о плагине

Я прочитал о методе расширения. Тем не менее, все это домашнее задание оставило меня в замешательстве. Я работаю с плагином fullcalendar и мне нужно изменить некоторые параметры поведения, а также добавить новые перехватчики событий. Я застрял с этим в самом закрытии плагина? Я что-то упускаю из виду?

В идеале мы могли бы отделить наш код от кода плагина для возможного обновления. Любая помощь будет принята с благодарностью, особенно указатели на то, где мне не хватает некоторой информации или мнений о том, имеют ли смысл решения, уже представленные в других вопросах переполнения стека. Мне они противоречат друг другу, и я все еще растерялся.

Answer 1

У меня возникла та же проблема при попытке расширения плагинов пользовательского интерфейса jquery, и вот решение, которое я нашел (нашел через 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);

надеюсь, что это поможет, пожалуйста, спросите, если у вас есть какие-либо вопросы.

Answer 2

У меня была такая же проблема, и я пришел сюда, тогда ответ Джареда Скотта вдохновил меня.

(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

Я обнаружил, что при большом количестве плагинов методы защищены / закрыты (то есть в области замыканий). Если вам нужно изменить функциональность методов / функций, то вам не повезло, если вы не хотите его раскошелиться. Теперь, если вам не нужно менять какие-либо из этих методов / функций, вы можете использовать $.extend($.fn.pluginName, {/*your methods/properties*/};

Еще одна вещь, которую я раньше делал, - это просто использовать плагин как свойство моего плагина, а не пытаться его расширять.

На самом деле все сводится к тому, как кодируется плагин, который вы хотите расширить.

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>

// используя пользовательский плагин

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

/// над написанным типом утилит обычно работают элементы dom /////////////// пользовательские утилиты

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

// доступ через утилиту как

$.Afunction();

// этот тип утилит обычно расширяет javascript

Answer 5

Пример похож на ответ Джареда Скотта, но создание копии прототипа исходного объекта дает возможность вызвать родительский метод:

(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 6

Мой подход в переписывании плагинов jQuery состоял в том, чтобы переместить методы и переменные, к которым необходимо получить доступ, в блок опций и вызвать '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 7

Виджет jQuery можно расширить с помощью фабрики виджетов jQuery.

(function ($) {
    "use strict";

    define([
        "jquery",
        "widget"
    ], function ($, widget) {
        $.widget("custom.yourWidget", $.fn.fullCalendar, {
            yourFunction: function () {
                // your code here
            }
        });

        return $.custom.yourWidget;
    });
}(jQuery));

Ознакомьтесь с документацией jQuery, чтобы узнать больше:
Widget Factory API
Расширение виджетов с помощью фабрики виджетов