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

Question

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

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

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

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

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

Мой подход к переписыванию плагинов 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 6

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

(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 можно расширить с помощью 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));

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