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

Question

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

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

расширение плагина jQuery

расширить плагин jQuery

jQuery: extend plugin question

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

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

634 7

jQuery plugins extend

7 ответов:

Comments

Ничего не найдено.

Jared Scott · Accepted Answer · 2010-12-11 02:05:38

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

nepjua · Accepted Answer · 2012-11-08 01:41:46

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

(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);

prodigitalson · Accepted Answer · 2010-01-12 20:16:40

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

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

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

Praveen Prasad · Accepted Answer · 2013-06-18 12:57:37

$.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 как
$.Afunction();
// этот тип utils обычно расширяет javascript

hvdd · Accepted Answer · 2013-06-06 17:16:16

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

marcini · Accepted Answer · 2016-02-03 11:21:17

пример похож на ответ Джареда Скотта, но создание копии исходного прототипа объекта дает возможность вызвать родительский метод:
(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);

Max · Accepted Answer · 2016-03-16 16:48:10

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