JS 모듈 및 네임스페이스_javascript 기술 소개

원인
코드를 클래스로 구성하는 중요한 이유는 코드를 보다 "모듈화"하고 다양한 시나리오에서 코드 재사용을 가능하게 하기 위한 것입니다. 그러나 클래스가 코드를 모듈화하는 유일한 방법은 아닙니다.

일반적으로 모듈은 독립적인 JS 파일입니다. 모듈 파일에는 클래스 정의, 관련 클래스 세트, 유틸리티 함수 라이브러리 또는 실행할 일부 코드가 포함될 수 있습니다.

모듈화의 목표는 대규모 프로그램 개발을 지원하고, 분산된 소스의 코드 어셈블리를 처리하며, 불필요한 모듈 코드가 포함되어 있어도 코드가 올바르게 실행될 수 있도록 하는 것입니다.

이상적으로는 어떤 모듈도 둘 이상의 전역 플래그를 정의해서는 안 됩니다.

모듈 함수
는 함수 내부에 모듈을 정의하여 구현됩니다. 정의된 변수와 함수는 함수의 지역 변수이므로 함수 외부에는 표시되지 않습니다. 실제로 이 함수 범위를 모듈의 네임스페이스(모듈 함수)로 사용할 수 있습니다

모듈 코드가 함수로 캡슐화되면 모듈 함수 외부에서 호출할 수 있도록 공개 API를 내보내는 방법이 필요합니다. 공개 API를 내보내는 방법에는 여러 가지가 있습니다.

먼저 네임스페이스를 생성하세요

코드 복사 코드는 다음과 같습니다.

// 학교를 저장할 전역 변수를 만듭니다. 관련 정보 모듈
var school; // 학교 네임스페이스 생성
if(!school) school = {};

1. 생성자를 사용하세요

코드 복사 코드는 다음과 같습니다.

// 학생 생성자를 반환하여 public API
school.Student = (function() {
function Student() {

}
//... 프로토타입 객체와 Student의 전용 속성 및 메서드를 정의합니다.. .. ....
return Student; // 공개 API를 내보내려면 Student 생성자를 반환합니다
})();

2. 네임스페이스 객체 반환

모듈 API에 여러 유닛이 포함된 경우 네임스페이스 개체를 반환할 수 있습니다

코드 복사 코드는 다음과 같습니다.

// 학교에 학생 모듈 추가
school.students = (function() {
// 여기에는 지역 변수와 함수를 사용하여 강좌 수업/학년 수업 등 많은 수업이 정의됩니다.
function Subject() { /* ... */ }
function Grade () { /* ... */ }

// 네임스페이스 객체를 반환하여 API 내보내기
return {
Subject: Subject,
Grade: Grade
};
})();

3. new 키워드를 통해

을 호출합니다.

또 다른 유사한 기술: 모듈 함수를 생성자로 처리하고 new를 통해 호출합니다. 내보내려면 이 속성에 해당 항목(공개 API)을 할당하세요.

코드 복사 코드는 다음과 같습니다.

school.students = (new function() {
// ..... 여기서는 코드를 생략했습니다...

// API를 이 객체로 지정
this.Subject = Subject;
this.Grade = Grade ;

// 여기에는 반환값이 없다는 점에 유의하세요
}()) // 괄호는 안에 작성됩니다. 다음은 새 인스턴스를 생성하는 것입니다. New 다음에는

표현식 대신 생성자를 호출해야 합니다.

4. 정의된 네임스페이스 객체

대안으로 전역 네임스페이스 객체가 정의된 경우 모듈 함수가 해당 객체의 속성을 직접 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

// 네임스페이스 객체가 정의된 경우
var school;                            // 학교 네임스페이스 생성
if(!school) school = {};
school.students = {}; / 학생 네임스페이스가 정의되었습니다
(function(students) {
// ..... 코드는 생략되었습니다...

// 공개 API를 여기에 지정합니다. 정의된 네임스페이스
Students.Subject = Subject;
Students.Grade = Grade;
// 여기서는 값을 반환할 필요가 없습니다.
})(school.students);

이 때문에 공개 API를 내보내는 방법을 설명했습니다.