여러 파일을 통해 jQuery 플러그인을 분할하는 방법

StackOverflow https://stackoverflow.com/questions/1010089

  •  06-07-2019
  •  | 
  •  

문제

나는 작은 CMS를 jQuery ajax 플러그인으로 작성하고 있지만 과도하게 길다 (현재 약 500 줄)은 결코 "서브 클래스"마다 하나씩 별도의 파일로 분할 할 수 있다는 것을 알 수 있습니다.

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

위의 예에서는 클래스 론 코드를 한 파일에, Classtwo는 다른 파일에, Mycms "Baseclass"를 세 번째 파일에 넣고 싶습니다. 이와 같은 것으로 (각 "하위 클래스"파일에서) 이것을 달성 할 수 있습니까? 

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

많은 감사,

JS

도움이 되었습니까?

해결책

개인 범위 / 분리 된 우려 사항이있는 "플러그인"에 추가하려고합니다. 이는 모든 것이 하나의 파일 또는 여러 파일에 내장 될지 여부에 관계없이 플러그인 기반 웹 애플리케이션의 유지 보수 및 장기 확장에 중요 할 수 있습니다.

개인 범위를 생성하고 기존 jQuery.fn 메소드를 직접 첨부하거나 jQuery.fn.foo 메소드의 프로토 타입에 추가하여 확장 할 수 있습니다.

(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 ()를 사용할 수 있습니다.이 경우 위의 첫 번째 방법으로 생성자 인스턴스에 메소드를 추가하기위한 "속기"입니다. 당신은 당신이 객체에 추가하는 모든 것을 캡슐화해야합니다 (일반적으로 이것은 익명 객체 일 것입니다).

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

디자인 관점에서 동일한 클래스를 자주 가져와야하는 "클래스"가있는 경우 자주 동일한 함수 범위/클로저의 일부가되어야하거나 폐쇄 된 변수 (아마도 _FOO 컨벤션과 함께 getters and setter를 노출시켜야합니다. 이는 코드에 의해서만 사용되도록 의도된다는 것을 보여줍니다).

(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) {} construction을 사용하여 원래 "플러그인"메소드에서 범위를 "빌릴"할 수 있다고 생각하지만 직접 수행하지 않았기 때문에 100% 긍정적 인 것은 아닙니다. 그것에 대해.

다른 팁

jQuery UI 코드도 보는 데 도움이됩니다. 예를 들어 ProgressBar 플러그인에는 세 가지 파일 UI.core, ui.widget 및 ui.progressbar가 필요합니다. jQuery UI 소스 번들을 다운로드하고 Demos 디렉토리의 진행 상황 예를 살펴보십시오. (어디에서나 호스팅 된 단순화 된 버전을 찾을 수 없었지만 소스 번들에는 단순화 된 예제가 있습니다)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top