"Private"jQuery Plugin

Question

나는 인터넷에 대한 해답을 찾았으므로 아무 소용이 없습니다. 나는 대답이 아마도 매우 간단하다고 느낀다. 그러나 그것은 나를 빠지게하고 있었다.

jQuery 플러그인을 작성하고 모든 우수 사례를 따르고 있습니다. 내 플러그인을 foo라고하고, 다음과 같은 표준 플러그인 정의가 있다고 가정 해 보겠습니다.

(function($){ 
    $.fn.foo = function() { 
    this.append('<p>I'm doing stuff!</p>'); 
    } 
})(jQuery); 

꽤 기본적인 지금까지. 이제 내부 기능을 bar라는 함수에 캡슐화하려는 기능이 있다고 가정 해 보겠습니다. 여기 캐치, 그래도입니다 :

(function($){ 
    /* this is bad: it clutters up the namespace, and exposes implementation details: 
    $.fn.bar = function(text) { 
    this.append('<p>'+text'</p>'); 
    } 
    */ 
    $.fn.foo = function() { 
    this.append('<p>I'm doing stuff!</p>').bar('bar does something else!'); 
    } 
})(jQuery); 

은 어떻게 선언 할 수 있습니다 : 나는 즉 등 체인을 이용할 수 있도록 내가 jQuery 플러그인처럼 호출 할,이 같이 사용할 수 있도록하려면 bar를 사용하여 jQuery 플러그인처럼 호출 할 수 있지만 플러그인 범위 밖에서는 사용할 수 없습니까?

나는 Javascript의 적용 메소드를 사용하여 혼란 스러웠다. 그런 종류의 작업이 있었지만 clunky 였고 jQuery 객체를 매개 변수로 사용하여 호출하는 것보다 낫다.

나는 간단한 솔루션이 있다고 확신합니다. 누구입니까?

Answer 1

Ethan은 here을 옹호하는 플러그인 패턴을 사용하여 개인 기능과 한 가지 플러그인 내의 모든 공개 메소드의 범위를 포함하여 다양한 가능성을 제시합니다.

당신은 개인의 기능을 가질 수 있습니다 그들은 생각할 수 (종류의) 체인 방식이 될 수 있지만 : 당신은 일반적으로 내부 통화 .call()로 만든되는 경향이 내부적 때문에 체인 수 없습니다

• 합니다.
• public 메서드는 일반적으로 return this.each(function(){...});의 형식이므로 일반적으로 내부적으로 연쇄성을 필요로하지 않으므로이 코드에서는 코드가 작동하는 jQuery 선택 항목의 단일 요소를 처리합니다. 예를 들어

:

플러그인 '갑'은 공공 방법 '초기화'와 '바', 두 init에 의해 내부적으로 호출되는 개인 유틸리티 '기침'을 가지고있다 여기

(function($){ 
    // ********************************** 
    // ***** Start: Private Members ***** 
    var pluginName = 'foo'; 
    var cough = function(text, bgColor) { 
     text = text || ''; 
     bgColor = bgColor || '#FFF'; 
     $(this).append($('<p/>').append(text).css('backgroundColor', bgColor)); 
    }; 
    // ***** Fin: Private Members ***** 
    // ******************************** 

    // ********************************* 
    // ***** Start: Public Methods ***** 
    var methods = { 
     init: function(text) { 
      text = text || 'foo init!'; 
      return this.each(function() { 
       methods.bar.call($(this), 'cough from bar from init'); 
       cough.call($(this), 'cough from init'); 
      }); 
     }, 
     bar: function(text) { 
      text = text || 'cough from bar!'; 
      return this.each(function() { 
       cough.call(this, text, '#99CC99'); 
      }); 
     } 
    }; 
    // ***** Fin: Public Methods ***** 
    // ******************************* 

    // ***************************** 
    // ***** Start: Supervisor ***** 
    $.fn[pluginName] = function(method) { 
     if (methods[method]) { 
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || !method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist in jQuery.' + pluginName); 
     } 
    }; 
    // ***** Fin: Supervisor ***** 
    // *************************** 
})(jQuery); 

및 '바'.

당신은

$("div").foo(); //same as $("div").foo(init'); 
$("div").foo('bar', 'cough from bar'); 

그러나 cough 외부에서 호출 할 수 없습니다 호출 할 수 있습니다.

참고 : 위의 패턴에서 관리자는 항상 정확히 동일하므로 편집 할 필요가 없습니다.