동시에 JQuery 플러그인과 JQuery를 확장하십시오.

Question

Jquery Plugin을 구축 중입니다. 내 골격 코드는 다음과 같습니다 : 나는 JQuery와에 부가 기능을 추가 할 수 있도록이 플러그인을 확장하기 위해 찾고 있어요

(function (window, document, $, undefined) { 

    var methods = { 
     init : function(options){ 
     }, 
     func_1: function(){ 
     }, 
     func_2: function(){ 
     } 
    }; 

    $.fn.myplugin = function(args){ 

     if (methods[args]) 
     { 
      return methods[ args ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } 
     else if (typeof args === 'object' || ! args) 
     { 
      var opts = $.extend({}, $.fn.myplugin.defaults, args); 
      var new_args = new Array(opts); 
      return methods.init.apply(this, new_args); 
     } 
     else 
     { 
      $.error('Method ' + args + ' does not exist'); 
     } 
    }; 

    $.fn.myplugin.defaults = { 
     func_1: function(){}, 
     func_2: function(){} 
    }; 

}(window, document, jQuery)); 

. 그래서 다음과 같은 함수를 호출하고 싶습니다 :

$.myplugin.new_func(); 

어떻게하면됩니까? 나는 아마 $.extend을 사용해야 만한다는 것을 알고 있지만 그것에 대해 어떻게해야할지 모르겠습니다. 사전에

감사합니다.

Answer 1

일부 오래된 JQuery 플러그인 (특히 FancyBox 2)을 살펴본 후,이를 수행하는 방법을 알아 냈습니다.

(function (window, document, $, undefined) { 

    var methods = { 
     init : function(options){ 
     }, 
     func_1: function(){ 
     }, 
     func_2: function(){ 
     } 
    }; 

    $.fn.myplugin = function(args){ 

     if (methods[args]) 
     { 
      return methods[ args ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } 
     else if (typeof args === 'object' || ! args) 
     { 
      var opts = $.extend({}, $.fn.myplugin.defaults, args); 
      var new_args = new Array(opts); 
      return methods.init.apply(this, new_args); 
     } 
     else 
     { 
      $.error('Method ' + args + ' does not exist'); 
     } 
    }; 

    $.fn.myplugin.defaults = { 
     func_1:  function(){}, 
     func_2:  function(){} 
    }; 

    //below is the code I added to get the desired functionality 
    var D = $.myplugin = function(){}; 
    $.extend(D, { 
     new_func: function(){ 
      //add functionality here 
     } 
    }); 

}(window, document, jQuery)); 

methods 객체의 내부 (new_func 또는 무엇 이건이라고 함) 함수를 정의하고 methods.new_func()를 사용하여 새로운 함수에서 아래에 그것을 아래로 호출 할 수도 있습니다 : 다음은 전체 골격 코드입니다.

건배.

Answer 2

$ .fn.myplugin과 $ .myplugin의 차이점은 후자에 컨텍스트가 없다는 것입니다. 따라서 다음 코드를 사용하여 후자를 정의 할 수 있습니다. $ .myplugin 결과에 체인을 사용하려면 .new_func() 메소드 (예 : 특정 jQuery 객체)를 사용하려는 객체를 반환하면됩니다.

$.myplugin = function() { 
    ... 
    return $('body'); 
};