Найкращий спосіб розширення плагіна jQuery

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

• Розширення плагіна jQuery
• Розширення плагіна jQuery
• jQuery: розширити питання про плагін

Я прочитав метод розширення. Однак все це домашнє завдання змусило мене розгубитися. Я працюю з плагіном fullcalendar і мені потрібно змінити деякі особливості поведінки, а також додати нові хуки подій. Я застряг у цьому в самому закритті плагіна? Мені не вистачає чогось очевидного?

В ідеалі ми могли б відокремити наш код від коду плагіна, щоб забезпечити можливе оновлення. Будемо вдячні за будь-яку допомогу, особливо вказівки щодо того, де мені бракує певної інформації чи думок щодо того, чи мають сенс рішення, представлені в інших питаннях Stack Overflow. Мені вони суперечать один одному, і я все ще залишаюся розгубленим.

Я просто мав ту саму проблему, намагаючись розширити плагіни інтерфейсу користувача jquery, і ось рішення, яке я знайшов (знайшов через jquery.ui.widget.js):

(функція ($) {
/ **
 * Простір імен: простір імен, в якому знаходиться плагін
 * pluginName: назва плагіна
 * /
    var extensionMethods = {
        / *
         * отримати ідентифікатор елемента
         * це деякий контекст у рамках існуючого плагіна
         * /
        showId: function () {
            повернути this.element [0] .id;
        }
    };

    $ .extend (істина, $ [Простір імен] [Ім'я плагіна] .prototype, extensionMethods);


}) (jQuery);

сподіваюся, це допоможе, будь ласка, запитайте, якщо у вас є питання.

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

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

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

Інша справа, яку я закінчив робити раніше, - це просто використовувати плагін як властивість мого плагіна, замість того, щоб намагатися його розширити.

Насправді все зводиться до того, як кодується плагін, який ви хочете розширити.

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

// доступ до util як

$.Afunction();

// цей тип утилів зазвичай розширює javascript

Мій підхід до переписування плагінів 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();

Приклад схожий на відповідь Джареда Скотта, але копіювання оригінального прототипу об’єкта дає можливість викликати батьківський метод:

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

Віджет 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 Widget Factory
Розширення віджетів за допомогою Widget Factory