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

Ответ 1

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

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

Ответ 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);

Ответ 3

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

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

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

Ответ 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();

/// над написанным типом utils обычно работают элементы dom /////////////// custom utils

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

//доступ сверху используется как

$.Afunction();

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

Ответ 5

Мой подход при переписывании плагинов jQuery состоял в том, чтобы перемещать методы и переменные, к которым нужно получить доступ к блоку опций, и вызвать "продлить"

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

Ответ 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);

Ответ 7

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