큰 JavaScript 응용 프로그램은 어떻게 구성되어야합니까?

최근에 OBIEE Mobile App Developer 용으로 작성된 일부 JavaScript 플러그인과 다양한 프로젝트를위한 일부 사용자 정의 라이브러리가 표시되었습니다.

OOP 배경에서 나온이 프로젝트의 구조에 대해 약간 혼란스러워합니다. 수천 줄 길이의 파일을보고 있습니다 . 나는 물건을 파일과 클래스로 나누는 데 익숙하지만 이것이 다른 프레임 워크라는 것을 이해합니다. 하나는 파일 크기가 문제입니다. 그러나 모든 것을하는 더 좋은 방법이 있어야합니까?

스크립트의 길이는 가독성 및 유지 관리뿐만 아니라 프로그램 작동 방식에 대한 개인의 일반적인 이해에도 영향을줍니다.

대규모 응용 프로그램은 어떻게 구성됩니까? 이것에 대한 일반적인 OOP 디자인 패턴은 무엇입니까?

JavaScript 패턴에 익숙하지 않은 경우 많은 대형 응용 프로그램 및 라이브러리가 Revealing Module Pattern을 사용하고 있다고 말할 수 있지만 필요에 따라 사용할 수있는 다른 패턴이 많이 있습니다.

공개 모듈 패턴은 큰 파일을 분할하고 논리적으로 정리할 수있는 좋은 방법입니다. 자바 스크립트에서 어떤 디자인 패턴을 사용하여 작업하는 경우에는, 알고 있어야 이 매우 혼동 될 수 있습니다. 사용하려고 이 , 새 , 프로토 타입 , .call()그리고 .apply()현명합니다.

대규모 프로젝트에서 작업하는 동안 다음 사항도 유용 할 수 있습니다.

• 가능하면 TypeScript 또는 ES6으로 전환하십시오.
• 모듈 식 코드 작성 다양한 방법과 타사 라이브러리가 있지만 그중 하나가 아무것도 아닌 것보다 낫습니다.
• 작업 러너 / 빌드 시스템 을 사용하여 작업 을 자동화하십시오.
• 디자인 패턴 에 대해 읽으십시오 . 이것은 좋은 시작 이 될 수 있습니다. 위에서 말했듯이 공개 모듈 패턴 은 특히 ​​모든 인기있는 패턴을 마스터하는 데 시간이 필요하다고 생각하면 매우 유용합니다.
• 단위 테스트 작성 . 역동적 인 언어로 작업하는 것이 더 어려울 수 있습니다. 응용 프로그램의 중요한 부분을 테스트하면 많은 시간을 절약 할 수 있습니다.
• 실제로 코드 작성과 버그 잡기에 도움이 되는 IDE 또는 텍스트 편집기 를 사용하십시오 . WebStorm은 좋은 선택입니다. 숭고한 텍스트도.
• IDE에서 디버거를 제공하지 않는 경우 선호하는 웹 브라우저의 디버거를 마스터하십시오.
• 라이브러리를 사용하십시오. 프로젝트의 특성에 따라 찾을 수있는 최상의 타사 코드를 사용하십시오. 웹 애플리케이션을 작성하는 경우 Angular , React 및 오래된 backbone.js를 살펴보십시오 . Node.js 애플리케이션을 작성중인 경우 NPM 저장소 에서 검색하십시오 . 당신이 지금 막하고있는 일을 이미 얼마나 많은 일이 벌어지고 있는지 놀랄 것입니다.
• 프로젝트를 진행하는 유일한 사람 이더라도 Git 과 같은 버전 관리 시스템을 사용하고 너무 엄격하고 의견이 많지 않지만 팀 동료들도 기꺼이 좋은 가이드 라인을 제공하는 코딩 표준 을 따르십시오. 따르다.
• JavaScript의 클래스없는 OOP를 이해하면서 TypeScript 또는 ES6을 선택하더라도 프로토 타입 OOP 는 특히 디버깅하는 동안 유용 할 수 있습니다.

저는 C ++ 개발자이며 최근 웹 개발을 시작했습니다. 큰 데스크톱 앱을 웹 환경으로 이식하고 있습니다. 동일한 패턴을 사용하여 C ++ 코드를 구성한 것과 똑같이 JavaScript 코드를 구성합니다. 나는 약 25-30 개의 파일을 가지고 있지만 적절한 클럽 활동을 통해 파일을 3-5로 줄이고 모든 것을 최소화 할 것입니다.

나에게있어 그것은 단지 더 나아지거나 나빠졌지만 패러다임이 바뀌지 않은 언어 일 뿐이다. 모든 결함과 좌절에 대한 JavaScript는 기능과 OOP 스타일이 잘 조화되어 있습니다. 지금까지 상황이 잘 작동했습니다.

마지막으로, 내가 일찍 깨달은 한 가지는 JavaScript가 C ++보다 훨씬 더 간결한 코드를 작성할 수 있다는 것입니다. 따라서 때로는 JS가 아닌 언어에서 오는 LOC가 많으면 오래된 일을 고수하기 때문일 수 있습니다. 이 문제를 해결 한 후에는 실제로 달라야 할 것이 없습니다. 디자인과 알고리즘은 모든 언어에 구애받지 않습니다.

물론 프로젝트마다 매우 다양하지만, 일반적으로 받아 들여지는 관행은 라이브러리 나 모듈로서 기능하는 것을 위해 하나의 큰 파일에 넣고 캡슐화를 사용하여 내부 ( "비공개")를 방지하는 것입니다. ) 인터페이스가 외부로 누출되지 않습니다. 또한 라이브러리 / 모듈을 사용하려는 개발자에게도 유용합니다. 하나의 파일은 복사하여 붙여 넣을 폴더와 파일의 전체 계층 대신 응용 프로그램 구성 또는 헤더 스 니펫에 추가합니다. 또한 프로덕션 사이트에서 최소화 및 번들링을 사용하면 HTTP 요청 수를 줄이기 위해 모두 하나의 파일로 결합 할 가능성이 높습니다.

자신의 응용 프로그램 코드는이 방법을 따를 필요가 없으며, 그렇지 않을 수도 있습니다. 앱이 유일하게 앱을 사용하기 때문에 파일을 한 번만 추가하면되고 플랫폼을 계산하여 최소화 및 번들링을 처리 할 수 ​​있습니다.

코드에서 작업 할 때 서로 다른 구성 요소는 일반적으로 모듈로 분할되며 각 구성 요소는 일반적으로 단일 클래스를 구현하고 각 구성 요소는 별도의 파일에 있습니다. 제작 중에 이러한 파일은 Browserify ( http://browserify.org/ ) 또는 RequireJS 와 같은 것을 사용하여 HTTP 요청 수를 줄인 단일 파일 (따라서보고있는 수천 줄의 코드)로 함께 묶습니다. 또한 종속성이 올바른 순서로로드되도록

이러한 모듈의 클래스가 구현되는 방법은 기본 메커니즘의 OOP와 약간 다르지만 표면에서는 다릅니다. ES6도 class키워드를 도입 했으므로 매우 친숙하게 보일 것입니다. MDN에 대한이 기사는 시작하는 데 유용합니다 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

(Petri 's) Net Elements and Annotations를 사용하여 Acrobat / JavaScript API를 사용하는 JavaScript 프로그램 인 PDF 양식 응용 프로그램을위한 소프트웨어를 구성하거나 "구조화"합니다. 아마도 그것은 당신의 상황에 유용 할 것입니다.

다이어그램은 네트 요소의 입력-출력 관계와 주석의 두 가지 양식보기를 설정하는 데 사용됩니다. 다이어그램 및 양식보기를 기반으로 PDF 양식 애플리케이션을위한 JavaScript 프로그램을 체계적으로 작성할 수 있습니다. 따라서 소스 코드를“판독”하는 것이 사양과 일치하는지 확인하기 위해 축소됩니다 (다이어그램과 두 개의 폼보기).

내 소프트웨어 구현에는 생성자와 프로토 타입이 사용됩니다. 성능이 문제가되면 프로토 타입을 인스턴스 멤버로 교체하면 더 많은 메모리를 사용하면서 성능이 향상 될 수 있습니다. 배열도 사용됩니다. 성능이 문제가되면 직접 참조가 사용됩니다.

일부 특성은 eval을 사용하여 작성됩니다. 속성이 매우 많은 객체의 경우 소스 파일의 코드 양이 줄어들고 프로그래머가 입력하는 양이 줄어 듭니다.

여전히 OOP 방식으로 JavaScript를 작성하는 것이 가능하며 권장됩니다. 다음은 JavaScript에서 가장 중요한 디자인 패턴을 다루는 좋은 책입니다.

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

주요 목표는 코드를 다른 파일과 모듈로 분리 할 수있는 JavaScript 프레임 워크가 많이 있습니다. 작업중 인 특정 프레임 워크가 하나의 파일에 모든 코드를 가지고 있어야하는 경우 반드시 전환해야합니다.