jQuery 플러그인을 확장하는 가장 좋은 방법

jQuery 플러그인을 확장하는 가장 좋은 방법

---

저는 필요한 작업의 약 75 %를 수행하는 기존 jQuery 플러그인을 확장하려는 상당히 새로운 jQuery 사용자입니다. 나는 이것에 대해 숙제를하려고 노력했다. stackoverflow에 대한 다음 질문을 확인했습니다.

• jQuery 플러그인 확장
• jQuery 플러그인 확장
• jQuery : 플러그인 질문 확장

나는 extend 메소드를 읽었습니다 . 하지만이 모든 숙제가 혼란스러워졌습니다. fullcalendar 플러그인으로 작업 중이며 일부 동작을 수정하고 새 이벤트 후크를 추가해야합니다. 플러그인 클로저 자체에서이 작업을 수행하고 있습니까? 나는 명백한 것을 놓치고 있습니까?

이상적으로는 가능한 업그레이드를 위해 플러그인 코드에서 코드를 분리 할 수 ​​있습니다. 어떤 도움이라도 대단히 감사하겠습니다. 특히 다른 Stack Overflow 질문에 이미 제시된 솔루션이 의미가 있는지 여부에 대한 정보 나 의견이 누락 된 부분에 대한 포인터입니다. 나에게 그들은 서로 모순되고 나는 여전히 혼란스러워합니다.

---

jquery UI 플러그인을 확장하려는 동일한 문제가 발생했으며 여기에 내가 찾은 해결책이 있습니다 (jquery.ui.widget.js를 통해 찾았습니다).

(함수 ($) {
/ **
 * 네임 스페이스 : 플러그인이있는 네임 스페이스
 * pluginName : 플러그인의 이름
 * /
    var extensionMethods = {
        / *
         * 요소의 ID 검색
         * 이것은 기존 플러그인 내의 일부 컨텍스트입니다.
         * /
        showId : function () {
            return this.element [0] .id;
        }
    };

    $ .extend (true, $ [네임 스페이스] [pluginName] .prototype, extensionMethods);


}) (jQuery);

이 정보가 도움이되기를 바랍니다. 질문이 있으면 문의 해주세요.

---

나는 같은 문제가 있었고 여기에 왔고 Jared Scott의 대답이 영감을 얻었습니다.

(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 요소에서 작동합니다. /////////////// custom utils

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

// util 위에서 액세스

$.Afunction();

// this type of utils usually extend javascript

---

My approach in rewriting jQuery plugins has been to move methods and variables that need to be accessed to the options block and call the '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();

---

Example similar to Jared Scott`s answer, but making a copy of original object prototype gives the ability to call parent method:

(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 Widget can be extended using 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));

Check out jQuery Documentation to learn more:
Widget Factory API
Extending Widgets with the Widget Factory

참고URL : https://stackoverflow.com/questions/2050985/best-way-to-extend-a-jquery-plugin