>  기사  >  웹 프론트엔드  >  es6 모듈성이란 무엇입니까?

es6 모듈성이란 무엇입니까?

青灯夜游
青灯夜游원래의
2022-04-19 13:41:472722검색

es6 모듈화는 브라우저와 서버에 공통적인 모듈식 개발 사양입니다. 디자인 아이디어는 모듈과 입력 및 출력 변수의 종속성이 컴파일 중에 결정될 수 있도록 최대한 정적인 것입니다. ES6 모듈화에서는 각 js 파일이 독립적인 모듈입니다. import 키워드는 모듈을 가져오는 데 사용되고 expost 키워드는 모듈을 내보내는 데 사용됩니다.

es6 모듈성이란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

프런트 엔드 모듈 사양 분류

ES6 모듈 사양이 탄생하기 전에 JavaScript 커뮤니티에서는 이미 AMD, CMD, CommonJS와 같은 모듈 사양을 시도하고 제안했습니다.

그러나 커뮤니티에서 제안한 이러한 모듈 표준에는 여전히 특정 차이점과 제한이 있으며 브라우저 및 서버에 대한 보편적인 모듈 표준이 아닙니다. 예:

  • AMD 및 CMD는 브라우저 측 Javascript 모듈화

  • 에 적합합니다.

    서버측 Javascript 모듈화를 위한 CommonJS

es6 모듈화란 무엇입니까

ES6 모듈화는 브라우저와 서버측에 공통적인 모듈식 개발 사양입니다.

이 디자인으로 인해 프런트엔드 개발자의 모듈 학습 비용이 크게 절감되었습니다. 개발자는 AMD, CMD 또는 CommonJS와 같은 추가 모듈 사양을 배울 필요가 없습니다.

ES6 모듈의 디자인 아이디어는 가능하면 모듈 종속성과 입력 및 출력 변수를 컴파일 타임에 결정할 수 있습니다.

ES6 모듈 사양의 정의:

  • 각 js 파일은 독립적인 모듈입니다.

  • 다른 모듈 멤버를 가져오려면 import 키워드를 사용하세요.

  • 모듈 멤버를 외부에서 공유하려면 내보내기 키워드를 사용하세요.

사용법:

1 기본 내보내기 및 기본 가져오기

2 주문형 내보내기 및 주문형 가져오기

3 모듈의 코드를 직접 가져오고 실행

기본 내보내기 및 기본 가져오기

기본 내보내기 구문:

내보내기 기본 기본 내보내기 멤버export default 默认导出的成员

默认导入的语法:

import 接收名称 from '模块标识符'

let n1 = 10 //定义模块私有成员n1
let n2 = 20 //定义模块私有成员n2 (外界访问不到n2 因为他没有共享出去)

function show() {} //定义模块私有方法 show

export default { //使用export default 默认导出语法 向外共享n1 和 show 两个成员
    n1,show
}

注意点:

① 每个模块中,只允许使用唯一的一次export default,否则会报错

② 默认导入时的接收名称可以任意名称,只要是合法的成员名称即

按需导入与按需导出

按需导入语法:

export 类型 成员

按需导出语法:

import { 成员 } from '模块标识符'

기본 가져오기 구문:

가져오기는 '모듈 식별자'에서 이름을 받습니다.

import aixos from '@/utils/request.js'

// login 请求
export const userLogin = (data) => {
    return aixos({
        method: 'post',
        url: '/login',
        data
    })
}

// register 请求
export const userRegister = (data) => {
    return aixos({
        method: 'post',
        url: '/register',
        data
    })
}

참고:

① 각 모듈에서 하나의 내보내기 기본값만 허용됩니다. 그렇지 않으면 오류가 보고됩니다🎜🎜② 기본 가져오기 중 수신 이름은 합법적인 회원 이름이라면 어떤 이름이든 가능합니다🎜🎜🎜 🎜On -주문형 가져오기 및 주문형 내보내기🎜🎜🎜🎜🎜주문형 가져오기 구문: 🎜🎜🎜내보내기 유형 멤버🎜🎜🎜주문형 내보내기 구문: 🎜🎜🎜import { 멤버 } '모듈 식별자'🎜rrreee🎜참고:🎜🎜① 각 모듈에서 여러 개의 주문형 내보내기를 사용할 수 있습니다🎜🎜② 주문형 가져오기의 멤버 이름은 주문형 가져오기의 멤버 이름과 일치해야 합니다. 내보내기🎜🎜3 누르기 가져오기가 필요할 때 as 키워드를 사용하여 이름을 바꿀 수 있습니다🎜🎜IV 주문형 가져오기는 기본 가져오기와 함께 사용할 수 있습니다🎜

위 내용은 es6 모듈성이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.