종속성이있는 라이브러리의 자바 스크립트 패턴

debugcn 에 게시 Dev

devconcept

때로는 일부 자바 스크립트 라이브러리에있는 특정 패턴을 발견했습니다. 우연 일 수도 있지만 종속성이있는 라이브러리에서 봤습니다. 구문은 다음과 같습니다 (샘플은 밑줄에 크게 의존하는 Backbone에서 가져옴)

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
            root.Backbone = factory(root, exports, _, $);
        });
  } else if (typeof exports !== 'undefined') {
      var _ = require('underscore');
      factory(root, exports, _);
  } else {
      root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
  }

}(this, function(root, Backbone, _, $)

누군가이 패턴이 사용되는 이유를 설명 할 수 있습니까? 내가 잘 이해하지 못하는 부분은 factory변수 의 사용 , 속성을 테스트하는 define.amd이유 및 내보내기가 .NET에서 종속성으로로드되는 이유입니다 define(['underscore', 'jquery', 'exports'].

나는 AMD 모듈에 익숙하지만 이것이 의존성이있는 라이브러리를 작성하는 경우 동일한 패턴을 사용해야하는지 아니면 종속성이 전혀 없어도이 패턴을 매번 사용해야 하는지를 알 수 있습니다.

mfeineis

요점

이를 범용 모듈 정의 패턴 이라고합니다 . 수많은 변형이 있습니다. 그것의 핵심은 자바 스크립트에 내장 모듈 시스템이 없다는 것입니다 ( ES6 모듈 이 널리 채택 될 때까지 ). 그리고 그 차이를 메우기 위해 많은 것들이 있습니다 (예 : requirejs , yepnope , labjs ). 따라서 UMD는 모듈이 여러 환경에서 모듈 시스템을 지원하기 위해 고안된 패턴입니다. JavaScript는 이제 거의 모든 곳에서 사용되고 있기 때문입니다.

당신의 예

귀하의 예제에서는 비동기 모듈 정의 를 이해하는 스크립트 로더 , NodeJS가 도입 한 것과 같은 CommonJS 모듈 로더 , 일반 브라우저 또는 정의가 인식하는 모듈 시스템을 노출하지 않는 기타 환경을 지원합니다.

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        // This branch is to support AMD loaders
        define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
            root.Backbone = factory(root, exports, _, $);
        });
  } else if (typeof exports !== 'undefined') {
      // This supports the CommonJS module system that NodeJS uses
      var _ = require('underscore');
      factory(root, exports, _);
  } else {
      // Attaching your library root in an environment that has no
      // module system or a system you don't support like a plain
      // browser before ES6 modules become the standard
      root.Backbone = /* ... */
  }

}(this, function(root, Backbone, _, $)

이 보일러 플레이트 코드를 사용하면 모듈을 한 번 작성할 수 있으며 동시에 브라우저, 서버 및 JavaScript 환경을 찾을 수있는 모든 곳에서 다른 로더 / 빌드 도구와 함께 사용할 수 있습니다.

더 깊은 통찰력을 얻으려면 JavaScript 모듈 / 모듈 시스템을 읽어 보는 것이 좋습니다. Addy osmani의 블로그 도 시작하기에 좋은 곳입니다. 주제에 대한 수십 개의 리소스가 있습니다.

도움이 되었기를 바랍니다! 즐거운 코딩입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-3

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사