JavaScript 모듈 개발에 대한 토론

과거에는 JavaScript 코드를 어떻게 개발했습니까?
과거에는 애플리케이션의 복잡성이 낮기 때문에 JavaScript는 항상 애플리케이션 개발 언어가 아닌 웹 페이지의 보조 프로그램이었습니다. 게다가 대부분의 웹사이트는 일회성 애플리케이션이고 규모가 작습니다. 개발 속도는 유지 관리 가능성보다 중요합니다. 대부분의 경우 전문적인 프론트엔드 개발자는 없고 백엔드 사람들이 매뉴얼을 찾아 작업을 시작합니다.

모든 JavaScript 코드가 동일한 파일에 배치되는 경우가 많으며 모든 코드는 함께 결합되어 재사용할 수 없습니다. 모든 변수는 전역 변수이며 서로 덮어쓸 수 있습니다. 잘 수행하면 재사용을 용이하게 하기 위해 일부 기능을 만들고 일부 공통 코드를 구성하게 되지만 이러한 기능은 기본적으로 전역적입니다. JQuery가 도입된 후 많은 사람들이 모든 이벤트 바인딩, 이벤트 처리 및 기타 코드를 함께 작성하여 문서 준비 기능에 넣는 데 익숙해졌습니다.

위의 상황을 제가 직접 경험했습니다. 정리하자면, 코드를 재사용할 수 없고, 유지 관리성이 좋지 않으며, 코드를 테스트할 수 없고, 여러 사람이 공동 개발을 하기가 어렵습니다.

모듈이란 무엇인가요?
위키피디아의 정의:
소프트웨어 모듈(Module)은 일관되고 밀접하게 관련된 소프트웨어 조직의 집합입니다. 여기에는 각각 프로그램과 데이터 구조라는 두 부분이 포함됩니다. 현대 소프트웨어 개발에서는 모듈을 합성 단위로 사용하는 경우가 많습니다. 현대 소프트웨어 개발에서는 모듈을 합성 단위로 사용하는 경우가 많습니다. 모듈은 별도로 작성할 수 있는 단위입니다. 이를 통해 재사용이 가능하며 다양한 사람들이 동시에 서로 다른 모듈에서 공동 작업하고 작성하고 작업할 수 있습니다.

모듈형 개발의 장점
주문형 로딩 구현 가능
다인 공동 개발
재사용 용이
강력한 확장성
테스트 용이
JavaScript 모듈형 개발
사실 JavaScript 모듈화는 현재 매우 인기 있는 일입니다. 주요 특징은 "모듈형 개발 및 주문형 로딩"입니다. 그 중 CommonJS 조직에서는 브라우저 측의 모듈 정의를 표준화하기 위해 AMD 사양을 정의합니다. RequireJS와 SeaJS는 AMD를 구현하는 두 가지 훌륭한 프레임워크입니다.

중형 및 대형 프로젝트의 경우 모듈식 개발과 온디맨드 로딩을 ​​사용하는 것이 매우 필요합니다. 중소형 프로젝트의 경우 이것을 사용하는 것이 개인적으로 느껴집니다. 모듈 개발 프레임워크는 약간 불필요하지만 주문형 로딩 기능을 사용하지 않고도 모듈식 개발을 활용할 수 있습니다. 여기서는 중소 규모 프로젝트가 기존 개발 방법의 다양한 문제를 피하기 위해 모듈식 개발 방법을 사용하는 방법에 중점을 둡니다.

JavaScript에서 모듈을 정의하는 방법
JavaScript의 모듈은 주로 클로저를 통해 구현됩니다. 전역 변수의 문제를 매우 잘 해결할 수 있으며 관련 변수를 모두 모듈에 비공개 변수로 넣을 수 있습니다. 모듈의 간단한 예:

var book = function() {
var name = 'Master JavaScript';
var Price = 100;
> Return {
GetName: 함수() {
반환 이름;
},
Getprice: 함수() {
반환 가격
}();

다음은 JavaScript 모듈식 개발 프로세스의 몇 가지 기본 요구 사항입니다.

각 모듈은 독립적인 기능만을 완성합니다
이것이 모듈 개발의 기본 요구 사항입니다. 모듈 개발은 실제로 전체 기능을 여러 개의 작은 기능으로 나누는 분할 정복 방식입니다. 각 모듈이 한 가지 작업만 수행할 때까지 나누기를 계속할 수도 있습니다. 물론, 너무 세밀하게 나누면 재사용에 도움이 되지 않으며, 너무 세밀하게 나누면 모듈 간의 통합이 매우 복잡해집니다.

각 모듈에는 명확한 API 인터페이스가 있습니다
사실 이 API 인터페이스는 모듈의 특정 기능 코드 이전에 정의될 수 있습니다. 이를 위해서는 코드를 작성하기 전에 이 모듈이 수행할 작업을 명확하게 알아야 합니다. 이는 단위 테스트 코드를 먼저 작성한 다음 구현 코드를 작성하는 것과 같습니다. 동시에 필요한 인터페이스만 노출되어야 하고, 다른 변수와 함수는 숨겨져 외부에서 접근할 수 없어야 합니다.

단위 테스트
JavaScript 개발 과정에서 단위 테스트를 작성하는 사람은 거의 없습니다. 한편으로는 JavaScript가 UI와 상호 작용하는 경우가 많아 테스트가 어렵기 때문입니다. 코드가 결합되어 있고 고정된 인터페이스가 없으므로 테스트할 방법이 없습니다. 모듈이 있으면 쉽게 테스트할 수 있습니다. JavaScript 단위 테스트 프레임워크 소개를 참조하세요

요약
이 글에서는 중소형 JavaScript 프로젝트의 모듈식 개발 방법을 논의합니다. 따라서 AMD의 사양 세트를 채택하지 않고 JavaScript의 표준 모듈 패턴을 사용하여 코드를 구성합니다. 온디맨드 로딩 기능도 사용하지 않는 이유는 중소규모 프로젝트의 경우 코드량이 너무 많지 않고 성능도 큰 문제가 되지 않기 때문이다. 대규모 프로젝트인 경우 필요한 코드를 로드할 수 있도록 AMD 사양과 주문형 로딩을 채택하는 것이 여전히 필요합니다.