2009-06-17 4 views
7

작은 CMS를 jQuery AJAX 플러그인으로 작성하고 있지만 너무 길지는 않습니다 (현재 약 500 줄). 분할 할 수있어서 좋을 것 같습니다. 별도의 파일로, 각각의 하나는 "서브 클래스"여러 파일로 jQuery 플러그인을 분할하는 방법

(function($) { 
    $.fn.myCMS = function() { 
     this.classOne = function() { 
     ... 
     } 
     this.classTwo = function() { 
     ... 
     } 
    } 
})(jQuery); 

을 위의 예에서, 내가 서로의 파일 classTwo 제 3의 myCMS "의 base class"에 classOne에 대한 코드를 넣어 싶습니다. 이런 ("서브 클래스"파일 각각에서) 이런 식으로 이것을 달성 할 수 있습니까?

$.extend(myCMS,classOne = function() { 
... 
}) 

많은 감사,

JS

답변

6

당신은 우려의 개인 범위/분리와 "플러그인"에 추가 할. 이는 모든 것이 하나의 파일 또는 여러 파일로 빌드 될 것인지 여부에 관계없이 플러그인 기반 웹 응용 프로그램의 유지 관리 및 장기간 확장성에 중요 할 수 있습니다.

비공개 범위를 만들 수 있으며, 직접 방법을 첨부하거나 jQuery.fn.foo 방법의 프로토 타입에 추가하여 기존 jQuery.fn 방법을 확장

(function ($) { 

    // instance method attached to the constructor function 
    $.fn.myCMS.classOne = function() { 

    }; 

    // or "shared" method attached to prototype 
    $.fn.myCMS.prototype.classOne = function() { 

    }; 

})(jQuery); 

넌 jQuery.extend()을 사용하여, 이 경우 위의 첫 번째 메소드로 생성자 인스턴스에 메소드를 추가하기위한 "속기"입니다. 당신은 객체에 추가하는 어떤 캡슐화해야합니다 (일반적으로이 익명의 객체가 될 것이다) : 동일한 closured 변수에서 자주를 얻을 필요 "클래스"가있는 경우

$.extend($.fn.myCMS,{ classOne: function() { } }); 

디자인 관점에서 볼을 그들이 아마도 같은 함수 범위/클로저의 일부이거나, 클로저 된 변수에 대해 getter와 setter를 노출해야합니다 (코드에 의해 사용되도록 의도 된 _foo 규칙을 사용했을 수도 있음). 당신이 해커가되고 싶어하고 다른 범위에서 closured 변수에 도착해야하는 경우

(function ($) { 

    var foo = "foo!"; 

    // combined getter/setter 
    // could also check arguments.length 
    $.fn.myCMS._foo = function (value) { 
      if (typeof(value) != "undefined") { 
       foo = value; 
      } else { 
       return foo; 
      } 
    }; 

)(jQuery); 

, 난 당신이 (.call 사용) 또는 .apply 자신의 범위가 이러한 새로운 방법을 실행하여 그렇게 할 수 있다고 생각() 다른 범위에서. 어떻게 작동하는지 몇 가지 샘플을 채찍질하려고 할 수 있지만 이러한 종류의 시나리오에서 범위 분석이 작동하는 방법에 대한 독자적인 조사를 수행하는 것이 좋습니다.

with ($ .fn.myCMS) {} 구조를 사용하여 원래 "플러그인"메소드에서 범위를 "빌려"도울 수 있다고 생각하지만 아직 완료하지 않았기 때문에 100 % 긍정적이지는 않습니다. 나 자신에 대해서만 읽어보십시오.

1

jQuery UI 코드를 살펴 보는 것도 도움이 될 것입니다. 예를 들어, progressbar 플러그인에는 ui.core, ui.widget 및 ui.progressbar라는 세 개의 파일이 필요합니다. jQuery UI 소스 번들을 다운로드하고 데모 디렉토리의 progressbar 예제를 살펴 본다. (어디서나 간편하게 버전을 호스팅 할 수는 없지만 소스 번들에는 예제가 단순화되어 있음)

관련 문제