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

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

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

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

73
extend fullcalendar jquery plugins

7 ответов

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

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

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

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

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

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

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

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

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

/ / доступ выше util as

$.Afunction();

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

2

мой подход к перезаписи плагинов 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();
1

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

(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

виджет 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, чтобы узнать больше:
виджет Фабрика API
расширение виджетов с помощью Widget Factory

0