Modern Modular JavaScript Design Patterns

응용 분리의 중요성

확장 가능한 자바 스크립트의 세계에서 애플리케이션이 모듈 식이라고 말할 때, 모듈에 저장된 고도로 분리 된 별개의 기능 세트로 구성된다는 것을 의미합니다. 느슨한 결합은 가능한 경우 종속성을 제거하여 응용 프로그램의 유지 관리를 용이하게합니다. 이것이 효율적으로 구현되면, 시스템의 한 부분에 대한 변경이 다른 부분에 어떻게 영향을 미칠지 쉽게 알 수 있습니다.

그러나 기존의 일부 프로그래밍 언어와 달리 JavaScript (ECMA-262)의 현재 반복은 개발자에게 이러한 코드 모듈을 깨끗하고 체계적인 방식으로 가져 오는 수단을 제공하지 않습니다. 좀 더 체계적인 자바 스크립트 애플리케이션의 필요성이 드러나기 시작한 최근 몇 년 전까지는 큰 생각을 요구하지 않은 사양에 대한 우려 중 하나입니다.

대신, 현재 개발자는 module 또는 객체 리터럴 패턴의 변형에 대해 뒤로 물러나야합니다. 이 중 많은 것들이 모듈 스크립트가 DOM에 함께 묶여 있으며, 우리의 아키텍처에서 이름 충돌을 일으킬 수있는 단일 전역 객체에 의해 이름 공간이 기술됩니다. 또한 수동 작업이나 타사 도구가 없어도 종속성 관리를 처리 할 수있는 확실한 방법이 없습니다.

이러한 문제에 대한 네이티브 솔루션이 ES 하모니 (JavaScript의 다음 버전이 될 가능성이 있음)에 도착할 예정이지만 좋은 소식은 모듈화 된 JavaScript를 작성하는 것이 결코 쉬운 일이 아니며 지금부터 시작할 수 있다는 것입니다.

이 섹션에서는 모듈 식 JavaScript 작성을위한 세 가지 형식 인 AMD, CommonJS 및 Javascript의 다음 버전 인 Harmony에 대한 제안을 살펴 보겠습니다.

스크립트 로더에 대한 주의 사항

AMD와 CommonJS 모듈은 룸에있는 코끼리에 대해 이야기하지 않고도 논의하기가 어렵습니다. 스크립트 로더입니다. 이 책을 쓰는 시점에서 스크립트 로딩은 목표를 달성하는 수단이며, 오늘날 응용 프로그램에서 사용할 수있는 모듈 식 JavaScript입니다.이 때문에 호환 가능한 스크립트 로더를 사용하는 것이 불행합니다. 이 섹션을 최대한 활용하려면 인기있는 스크립트 로딩 도구가 작동하는 방식에 대한 기본적인 이해를 얻고 모듈 형식에 대한 설명이 상황에 적합한 지 확인하는 것이 좋습니다.

AMD 및 CommonJS 형식의 모듈로드를 처리하기위한 많은 훌륭한 로더가 있지만, 개인적으로 선호하는 것은 RequireJS 및 curl.js입니다. 이 도구들에 대한 완벽한 튜토리얼은이 책의 범위를 벗어나지 만, curl.js와 James Burke의 RequireJS API 문서에 대한 John Hann의 기사를 읽는 것이 좋습니다.

프로덕션 관점에서 이러한 모듈을 사용하여 작업 할 때는 배포를 위해 스크립트를 연결하는 최적화 도구 (예 : RequireJS 옵티 마이저)를 사용하는 것이 좋습니다. 흥미롭게도 Almond AMD shim을 사용하면 RequireJS를 배포 된 사이트에서 롤아웃 할 필요가 없으며 스크립트 로더를 고려할 때 개발 외부에서 쉽게 이동할 수 있습니다.

즉, James Burke는 페이지로드 후에 스크립트를 동적으로로드 할 수 있다는 점은 여전히 ​​유스 케이스가 있으며 RequireJS도이를 지원할 수 있다고 말합니다. 이러한 메모를 염두에두고 시작하겠습니다.