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

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

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

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

확장 방법을 읽어 보았습니다.하지만 이 모든 숙제들이 저를 혼란스럽게 만들었습니다.저는 전체 캘린더 플러그인으로 작업하고 있으며 일부 동작을 수정하고 새로운 이벤트 후크를 추가해야 합니다.플러그인 클로저 자체에서 이 작업을 수행하는 데 문제가 있습니까?제가 뭔가 명백한 걸 놓치고 있는 건가요?

이상적으로 우리는 플러그인 코드로부터 우리의 코드를 분리하여 업그레이드 가능성을 허락할 수 있을 것입니다.도움을 주시면 대단히 감사하겠습니다. 특히 제가 정보를 놓치고 있는 부분에 대한 조언이나 다른 스택 오버플로 질문에 이미 제시된 솔루션이 타당한지에 대한 의견을 주시면 감사하겠습니다.저에게 그들은 서로 모순되고 저는 여전히 혼란에 빠져있습니다.

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

(기능($) {/***  네임스페이스: 플러그인이 아래에 위치한 네임스페이스*  pluginName: 플러그인 이름*/var 확장 메서드 = {/** 요소의 ID를 검색합니다.* 이는 기존 플러그인 내의 일부 컨텍스트입니다.*/showId: 함수(){반환합니다. element[0].id;}};$.extend(true, $[ 네임스페이스]][pluginName].prototype,확장 방법);}(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();

/// 위에서 작성된 유틸리티 유형은 주로 돔 요소로 작동합니다. ////////////////////////////////

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

// 용법 이상의 액세스

$.Afunction();

// 이런 종류의 유틸리티들은 보통 자바스크립트를 확장합니다.

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

Jared Scott의 답변과 유사한 예이지만, 원래 객체 프로토타입의 복사본을 만드는 것은 상위 메서드를 호출할 수 있는 기능을 제공합니다.

(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 Factory를 사용하여 jQuery Widget을 확장할 수 있습니다.

(function ($) {
    "use strict";

    define([
        "jquery",
        "widget"
    ], function ($, widget) {
        $.widget("custom.yourWidget", $.fn.fullCalendar, {
            yourFunction: function () {
                // your code here
            }
        });

        return $.custom.yourWidget;
    });
}(jQuery));

자세한 내용은 jQuery Documentation을 확인해 보십시오.
위젯 팩토리 API
위젯 팩토리를 사용하여 위젯 확장

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