모듈 패턴을 사용하여 긴 JavaScript 파일을 어떻게해야합니까?

Question

JavaScript로 디자인 패턴을 배우고 있으며 모듈 패턴을 사용하려고합니다. 나는 두 가지가 당황 스럽다.

1 - 플러그인을 만들면 모듈 패턴을 사용할 수 있고 비공개 및 공개 메소드/변수가 있습니다. 그러나 전체 자바 스크립트 파일이있는 경우 프로그램의 한 부분이 다른 부분과 아무 관련이 없으므로 개인 및 공개 메서드가 필요하지 않습니다. 그렇다면 민간 및 공공 방법의 요지는 무엇입니까?

2 - JavaScript 파일이 실제로 길기 때문에 중첩 모듈을 사용해야합니까? JavaScript 파일 전체에 대해 어떻게해야합니까?

Answer 1

(1) 모든 자바 스크립트 파일을로드

는 모든 파일의 모든 스크립트들이 하나 개의 파일에 그냥 같다. 한 파일의 스크립트는 다른 파일의 전역 변수 에 액세스 (읽기, 업데이트, 삭제) 할 수 있습니다. 이것에 대한 많은 질문이 있습니다. 쉽게 찾을 수 있습니다.

물론 "프로그램의 한 부분은 다른 부분과 아무런 관련이 없습니다."하지만 많은 구성원이있는 팀에 속하는 경우 각 부분은 시스템의 일부 (또는 경우에 따라 파일)에서 작동합니다. . 그런 다음, 한 사람이 실수로 다른 사람이 만든 변수를 변경할 가능성이 있습니다. 이러한 종류의 오류는 매우 쉽게 감지 할 수 있습니다. 그러나 스크립트를 모듈화 할 수 있다면 이러한 종류의 오류를 모두 피할 수 있습니다.

(2)

천천히 갈 수 있습니다. 요구 사항을 완성하기 위해 코드를 작성하는 동안 모듈 (또는 중첩 모듈)로 분리 할 수있는 코드 부분을 인식하십시오. 그들을 다른 파일에 넣습니다.

이렇게하는 동안 창의력과주의를 기울여야합니다. 코드가 매우 빠르게 커질 수 있으며 상황이 매우 빠르게 벗어날 수 있습니다.

Answer 2

자바 스크립트가 계속되었습니다. ES6 - 아직 이동하지 않은 진정한 이유가없는 경우 자체 모듈이 있습니다. 따라서 오래된 패턴의 모듈을 "시뮬레이트"할 필요가 없습니다. 실시 예 : 위에서

// Old style. 
var myModule = function() { 
    var privateVar; 
    function getPrivateVar() { return privateVar; } 
    return {getPrivateVar: getPrivateVar}; 
}(); 

console.log(myModule.getPrivateVar()); 

// New style. 
let privateVar; 
function getPrivateVar() { return privateVar; } 
export {privateVar}; 

// Using it 
import {getPrivateVar} from './myModule'; 
console.log(getPrivateVar()); 

, privateVar 모듈 (파일)에 전용으로 정의된다. IIFE에 포장하여 비공개로 유지할 필요가 없습니다. 반환 된 객체 하나의 속성으로 자체를 처리하는 대신 ES6 내보내기 메커니즘을 사용하여이를 명시 적으로 내 보냅니다.