Javascript 모듈 화 메커니즘 실현 원리 상세 설명
js 발전 초기 에 그 결함 을 드 러 냈 다.모듈 이 부족 한 후에 comonJS 규범 을 제시 하여 모듈 의 규범 을 규범화 시 켰 다.자 바스 크 립 트 의 초보 자로 서 자 바스 크 립 트 의 모듈 메커니즘 에 대해 잘 이해 하지 못 하 는 것 을 발견 하 였 다.나 는 자 바스 크 립 트 CommonJS 의 원리 와 메커니즘 을 정리 한 자 료 를 찾 아 보 았 다.
2. JavaScript
2.1 백 엔 드 없 는 프로젝트
이러한 항목 은 CommonJS 의 모듈 규범 을 사용 할 수 없습니다.이것 은 제 가 처음에 저 지 른 잘못 입 니 다.대부분의 브 라 우 저 에 의 해 지원 되 지 않 을 때 js 파일 은 var 와 function 으로 가득 차 서 이름 충돌 과 오염 을 초래 하여 자바 스 크 립 트 코드 를 복잡 하 게 만 들 었 습 니 다.es6 의 class 개념 은 자 바스 크 립 트 의 모듈 화 규범 을 효과적으로 규범화 시 켰 다.이러한 항목 은 script 태그 로 만 들 어 갈 수 있 기 때문에 script 태그 에 관 한 지식 을 말씀 드 리 겠 습 니 다.
브 라 우 저가
point.js 파일 을 가정 합 니 다:
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}이렇게 하면 index.js 에서 point 류 를 사용 할 수 있 습 니 다.
요약:
js 라 이브 러 리 는 header 에 도입 해 야 합 니 다.이후 script 이 도입 한 js 파일 에 대한 지원 을 확보 해 야 합 니 다.script 태그 의 실행 순 서 는 순서대로 실행 되 기 때문에 script 태그 의 도입 순 서 는 실제 도입 순서 와 같 습 니 다.
사용자 정의 script 태그 가 도입 한 js 파일 은 body 의 끝 에 두 고 DOM 요소 렌 더 링 이 끝 날 수 있 도록 해 야 합 니 다.
모든 js 파일 은 가능 한 한 es6 class 대상 으로 역할 영역 과 이름 필드 의 충돌 을 피 합 니 다.
2.2 백 엔 드 서버 NodeJS
모듈 참조 인 스 턴 스 는 다음 과 같 습 니 다:require 방법
const math = require("math");모듈 의 정의:컨 텍스트 는 exports 대상 이 현재 모듈 방법 과 변 수 를 내 보 내 는 데 사용 되 며 유일한 내 보 내기 출구 입 니 다.모듈 에 모듈 대상 이 하나 더 존재 합 니 다.그 는 모듈 자 체 를 대표 하고 exports 는 모듈 대상 의 속성 입 니 다.내 보 내기 방식:
// math.js
exports.add = function () { };
module.exports.add = function () { }; ES6 모듈 은 대상 이 아니 라 export 명령 을 통 해 출력 코드 를 명시 적 으로 지정 하고 입력 할 때 도 정적 명령 형식 을 사용 합 니 다.
ES6 모듈 은 컴 파일 할 때 불 러 오기 때문에 정적 분석 이 가능 합 니 다.이 를 통 해 자 바스 크 립 트 의 문법 을 더욱 넓 힐 수 있 습 니 다.예 를 들 어 매크로(macro)와 유형 검사(type system)를 도입 하 는 것 은 정적 분석 으로 만 이 루어 질 수 있 는 기능 입 니 다.
정적 로드 가 가 져 온 여러 가지 장점 을 제외 하고 ES6 모듈 은 다음 과 같은 장점 이 있 습 니 다.
UMD 모듈 형식 이 필요 하지 않 습 니 다.앞으로 서버 와 브 라 우 저 는 ES6 모듈 형식 을 지원 할 것 입 니 다.현재 각종 공구 고 를 통 해 사실 이미 이 점 을 해 냈 다.
앞으로 브 라 우 저의 새 API 는 모듈 형식 으로 제공 되 며 전역 변수 나 navigator 대상 의 속성 을 만 들 필요 가 없습니다.
대상 이 네 임 스페이스(예 를 들 어 Math 대상)로 필요 하지 않 습 니 다.앞으로 이러한 기능 은 모듈 을 통 해 제공 할 수 있 습 니 다.
브 라 우 저가 ES6 모듈 을 사용 하 는 문법 은 다음 과 같 습 니 다.
대상 과 변수 내 보 내기:
var firstName = 'XXX';
var lastName = 'YYY';
export {firstName, lastName};
Point.js
//
export default class Point extends circle {
}import Point from "Point";이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
