어떻게 자바 script 의 모듈 화 를 정확하게 이해 합 니까?

모듈 화 는 프로젝트 에서 매우 중요 합 니 다.복잡 한 프로젝트 는 비슷 한 기능 모듈 이 많 을 것 입 니 다.매번 모듈 을 다시 작성 해 야 한다 면 시간 도 걸 리 고 힘 도 소모 할 것 입 니 다.그러나 다른 사람 이 모듈 을 작성 하 는 전 제 를 인용 하 는 것 은 통 일 된'열 린 자세'가 있어 야 한 다 는 것 입 니 다.모든 사람 이 각자 의 쓰기 가 있다 면 혼 란 스 러 울 것 입 니 다.다음은 몇 가지 JS 의 모듈 화 된 규범 을 소개 합 니 다.
1:모듈 화 프로 세 스 1:script 태그
이것 은 가장 원시 적 인 자 바스 크 립 트 파일 로드 방식 입 니 다.만약 에 모든 파일 을 하나의 모듈 로 간주한다 면 그들의 인 터 페 이 스 는 보통 전역 적 인 역할 영역 에 노출 됩 니 다.즉,window 대상 에 정 의 됩 니 다.서로 다른 모듈 의 인터페이스 호출 은 하나의 역할 영역 이 고 복잡 한 프레임 워 크 는 네 임 스페이스 개념 으로 이 모듈 의 인 터 페 이 스 를 구성 합 니 다.
단점:
1.전체적인 역할 영역 오염
2.개발 자 는 모듈 과 코드 라 이브 러 리 의 의존 관 계 를 주관적 으로 해결 해 야 한다.
3.파일 은 script 태그 의 쓰기 순서 로 만 불 러 올 수 있 습 니 다.
4.대형 프로젝트 에서 각종 자원 을 관리 하기 어렵 고 장기 적 으로 쌓 인 문제 로 인해 코드 라 이브 러 리 가 혼 란 스 럽 습 니 다.
2:모듈 화 프로 세 스 2:CommonJS 규범
이 규범 의 핵심 사상 은 모듈 이 require 방법 을 통 해 의존 할 다른 모듈 을 동기 화하 고 exports 나 module.exports 를 통 해 노출 이 필요 한 인 터 페 이 스 를 내 보 낼 수 있 도록 하 는 것 이다.

require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;

장점:
1.간단 하고 사용 하기 쉽다.
2.서버 엔 드 모듈 재 활용
단점:
1.동기 화 된 모듈 로 딩 방식 은 브 라 우 저 환경 에 적합 하지 않 습 니 다.동기 화 는 로 딩 을 막 는 것 을 의미 합 니 다.브 라 우 저 자원 은 비동기 로 불 러 옵 니 다.
2.차단 되 지 않 은 병렬 로 여러 모듈 을 불 러 올 수 없습니다.
module.exports 와 exports 의 차이
1.exports 는 module.exports 를 가리 키 는 참조 입 니 다.
2.module.exports 초기 값 은 빈 대상{}이 므 로 exports 초기 값 도{}입 니 다.
3.require()는 exports 가 아 닌 module.exports 를 되 돌려 줍 니 다.
exports 예제:

// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
 return r * r * Math.PI;
}

module.exports 예제:

// app.js
var area = require('./area');
console.log(area(4));
// area.js
module.exports = function(r){
 return r * r * Math.PI;
}

잘못된 경우:

// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
 return r * r * Math.PI;
}

사실은 exports 를 덮어 썼 습 니 다.즉,exports 는 새로운 메모리(원 면적 을 계산 하 는 함수)를 가리 키 고 있 습 니 다.즉,exports 와 module.exports 는 더 이상 같은 메모리 를 가리 키 지 않 습 니 다.즉,이때 exports 는 module.exports 와 아무런 연락 이 없습니다.즉,module.exports 가 가리 키 는 메모리 가 변 하지 않 았 습 니 다.여전히 빈 대상{}입 니 다.즉,area.js 에서 빈 대상 을 내 보 냈 기 때문에 app.js 에서 area(4)를 호출 하면 TypeError:object is not a function 의 오 류 를 알 립 니 다.
요약:모듈 을 대상 으로 내 보 내 려 고 할 때 exports 와 module.exports 는 모두 사용 할 수 있 습 니 다(단,exports 도 새로운 대상 으로 다시 덮어 쓸 수 없습니다).대상 이 아 닌 인 터 페 이 스 를 내 보 내 려 면 module.exports 만 덮어 써 야 합 니 다.
3.모듈 화 프로 세 스 3:AMD 규범
브 라 우 저 엔 드 의 모듈 은 동기 화 방식 으로 불 러 올 수 없 기 때문에 후속 모듈 의 로드 실행 에 영향 을 줄 수 있 기 때문에 AMD(Asynchronous Module Definition 비동기 모듈 정의)규범 이 탄생 했다.
AMD 표준 에는 다음 과 같은 두 개의 API 가 정의 되 어 있 습 니 다.
1、require([module], callback);
2、define(id, [depends], callback);
require 인 터 페 이 스 는 일련의 모듈 을 불 러 오 는 데 사 용 됩 니 다.define 인 터 페 이 스 는 모듈 을 정의 하고 노출 하 는 데 사 용 됩 니 다.
예시:

define("module", ["dep1", "dep2"], function(d1, d2){
 return someExportedValue;
});
require(["module", "../file"], function(module, file){ /* ... */ });

장점:
1.브 라 우 저 환경 에서 비동기 로드 모듈 에 적합
2.여러 모듈 을 동시에 불 러 올 수 있 습 니 다.
단점:
1.개발 원 가 를 향상 시 켰 고 코드 의 읽 기와 쓰기 가 어렵 고 모듈 정의 방식 의 의미 가 원활 하지 않다.
2.통용 되 지 않 는 모듈 화 사고방식 은 타협 의 실현 이다.
4:모듈 화 프로 세 스 4:CMD 규범
CMD(Common Module Definition)규범 은 AMD 와 비슷 해 가 급 적 단순 함 을 유지 하고 CommonJS 와 Node.js 의 Modules 규범 과 큰 호환성 을 유지 했다.CMD 규범 에서 하나의 모듈 은 하나의 파일 이다.
예시:

define(function(require, exports, module){
 var $ = require('jquery');
 var Spinning = require('./spinning');
 exports.doSomething = ...
 module.exports = ...
})

장점:
1.가 까 운 곳 에 의존 하여 집행 지연
2.Node.js 에서 쉽게 실행 할 수 있 습 니 다.
단점:
1.SPM 패키지 에 의존 하고 모듈 의 로드 논리 가 편중 됨
AMD 와 CMD 의 차이
AMD 와 CMD 는 비슷 하지만 약간의 차이 가 있 습 니 다.그들의 차이 가 어디 에 있 는 지 살 펴 보 겠 습 니 다.
1.의존 하 는 모듈 에 대해 AMD 는 조기 집행 이 고 CMD 는 지연 집행 이다.
2.AMD 는 선행 에 의존 하 는 것 을 추앙 합 니 다.CMD 는 어떤 모듈 을 사용 할 때 만 require 를 사용 하 는 것 을 선 호한 다.코드 보기:

// AMD
define(['./a', './b'], function(a, b){ //           
  a.doSomething()  
  //      100  
  b.doSomething()  
  ...
});
// CMD
define(function(require, exports, module){
  var a = require('./a')  
  a.doSomething()  
  //      100  
  var b = require('./b')
  //         
  b.doSomething()
  // ...
});

3.AMD 의 API 는 기본적으로 여러 가지 용도 로 사용 되 고 CMD 의 API 는 엄격하게 구분 되 며 직책 이 단일 하 다 고 추앙 합 니 다.
5:모듈 화 프로 세 스 5:ES6 모듈 화
EcmaScript 6 표준 은 JavaScript 언어 차원 의 모듈 시스템 정 의 를 추가 합 니 다.ES6 모듈 의 디자인 사상 은 가능 한 한 정태 화 되 어 컴 파일 할 때 모듈 의 의존 관계 와 입 출력 변 수 를 확정 할 수 있 도록 하 는 것 이다.CommonJS 와 AMD 모듈 은 모두 실행 할 때 만 이 물건 들 을 확인 할 수 있 습 니 다.
ES6 에 서 는 export 키 워드 를 사용 하여 모듈 을 내 보 내 고 import 키 참조 모듈 을 사용 합 니 다.설명 이 필요 한 것 은 ES6 의 이 기준 은 현재 기준 과 직접적인 관계 가 없 으 며,현재 도 JS 엔진 이 직접 지원 할 수 있 는 경 우 는 드물다 는 점 이다.따라서 바벨 의 방법 은 지원 되 지 않 는 import 를 현재 지원 되 는 require 로 번역 하 는 것 이다.
비록 현재 import 와 require 를 사용 하 는 차이 가 크 지 않 지만,여전히 import 키 워드 를 사용 하 는 것 을 강력 히 추천 합 니 다.JS 엔진 이 ES6 의 import 키 워드 를 분석 할 수 있 으 면 전체 실현 방식 은 현재 와 비교적 큰 변화 가 발생 하기 때 문 입 니 다.지금부터 import 키 워드 를 사용 하면 앞으로 코드 변경 이 매우 작 을 것 입 니 다.
예시:

import "jquery";
export functiondoStuff(){}
module "localModule" {}

장점:
1.정태 적 인 분석 을 하기 쉽다.
2.미래 지향 적 인 EcmaScript 기준
단점:
1.네 이 티 브 브 라 우 저 에서 아직 이 기준 을 실현 하지 못 했 습 니 다.
2.새로운 명령 어,새로운 Node.js 지원
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!