[JQUERY] JQuery와 플러그인을 확장하는 가장 좋은 방법

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

해결법

1. ---

   1.난 그냥 JQuery와 UI 플러그인을 확장하기 위해 노력하고 동일한 문제가 있고, 여기에 내가 발견 (jquery.ui.widget.js 통해 있음) 솔루션입니다 :

   난 그냥 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. ---

   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. ---

   3.필자는 플러그인의 많은 방법이 보호됨을 / (클로저 범위의 예) 개인 발견했다. 요 필요가 다음 행운을 당신의 아웃 방법 / 기능의 기능을 수정하는 경우 개봉 기꺼이하지 않는 한 포크합니다. 이러한 방법 / 기능을 변경할 필요가 없다면 지금 당신은 $ .extend을 사용할 수 있습니다 ($ fn.pluginName, {/ * 당신의 방법 / 속성 * /}.;

   필자는 플러그인의 많은 방법이 보호됨을 / (클로저 범위의 예) 개인 발견했다. 요 필요가 다음 행운을 당신의 아웃 방법 / 기능의 기능을 수정하는 경우 개봉 기꺼이하지 않는 한 포크합니다. 이러한 방법 / 기능을 변경할 필요가 없다면 지금 당신은 $ .extend을 사용할 수 있습니다 ($ fn.pluginName, {/ * 당신의 방법 / 속성 * /}.;

   또 다른 것은 필자가 이전에 단순히 나의 플러그인 대신 그것을 확장하는 노력의 속성으로 플러그인을 사용하고 끝났다.

   무엇 모두 정말 내려 오는 것은 당신이 코딩 확장 할 방법 플러그인입니다.

4. ---

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

   /// DOM 요소의 유틸 서면 유형 위 일반적으로 작업 /////////////// 사용자 정의 유틸

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

   // 같은 UTIL 위의 액세스

   $.Afunction();
   

   // 유틸 이러한 유형은 일반적으로 자바 스크립트 확장

5. ---

   5.재 작성의 jQuery 플러그인 나의 접근 방식은 옵션을 차단해야 액세스 할 것을 메소드와 변수를 이동하고 호출 된 '확장'

   재 작성의 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. ---

   6.제라드 Scott`s 대답하지만, 원래의 객체 프로토 타입의 복사본을 만들기 위해 비슷한 예는 호출 부모 방법 할 수있는 기능을 제공합니다 :

   제라드 Scott`s 대답하지만, 원래의 객체 프로토 타입의 복사본을 만들기 위해 비슷한 예는 호출 부모 방법 할 수있는 기능을 제공합니다 :

   (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. ---

   7.jQuery를 위젯 jQuery를 위젯 팩토리를 사용하여 확장 할 수 있습니다.

   jQuery를 위젯 jQuery를 위젯 팩토리를 사용하여 확장 할 수 있습니다.

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

   더 배우고 jQuery를 문서를 체크 아웃 : 위젯 팩토리 API 위젯 공장과 위젯을 확장

from https://stackoverflow.com/questions/2050985/best-way-to-extend-a-jquery-plugin by cc-by-sa and MIT license