es6의 모듈화 소개(코드 예)

이 기사는 es6의 모듈화(코드 예제)에 대한 소개를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

개요

모듈화는 대규모 프로젝트에 있어서 피할 수 없는 추세입니다.

Named import

export 키워드를 사용하여 내보내려는 항목을 내보낼 수 있습니다. 상수, 변수, 함수, 클래스, export关键字，导出你要导出的东西，可以导出常量、变量、函数、类,

// export.js

export var var0 = 'var0' // 直接导出 var 声明
export let let0 = 'let0' // 直接导出 let 声明
export const const0 = 'const' // 直接导出 const 导出
export function func1() {} // 直接导出函数
export function* funcx() {} // 直接导出生成器函数
export class class0{} // 直接导出类

let variable = 'variable' 
export {variable} // 先声明后导出， 需要使用{} 包裹

function func2(){}
export {func2} // 先声明后导出，需要使用 {} 包裹

function* funcx(){}
export {funcx} // 先声明后导出，需要使用 {} 包裹

class class1{}
export {class1} // 先声明后导出，需要使用 {} 包裹
export {class1 as Person} // 别名导出

命名导入

命名导入需要使用{}包裹，可以同时导入多个命名导出

import {var0} from './export' // 导入 var0
import {let0} from './export' // 导入 let0
import {const0} from './export' // 导入 const0
import {func1} from './export' // 导入 func1
import {funcx} from './export' // 导入 funcx
import {class0} from './export' // 导入 class0

import {var0, let0} from "./export"; // 同时导入多个命令导出
import {Person as class1} from "./export"; // 导入后取别名

默认导出

默认导出可以使用default关键字，可以匿名导出

export default 1 // 默认导出常量
export default function () {} // 默认导出
export default () => {}
export default function* () {}
export default class {}

默认导出

因为默认导出导出的其实是匿名导出，所以导入的时候可以使用任意名字导入，并且无需使用{}

import num from './export'
import func from './export'
import arrowFunc from './export'
import generatorFunc from './export'
import class0 from './export'

Named import

Named import가 필요합니다. {} 패키지를 사용하려면 동시에 여러 개의 명명된 내보내기를 가져올 수 있습니다

import * as MyModule from './export'

Default 내보내기

기본 내보내기는 default 키워드를 사용할 수 있으며 익명으로 내보낼 수 있습니다.

export {var0} from './export'
export * from './export'

기본 내보내기🎜🎜기본 내보내기는 실제로 익명 내보내기이므로 가져올 때 어떤 이름이든 사용하여 가져올 수 있으며 {} 패키지를 사용할 필요가 없습니다🎜rrreee🎜모두 가져오기 🎜🎜모듈의 모든 내보내기를 별칭으로 가져오기 🎜rrreee🎜Redirect🎜🎜다른 모듈의 콘텐츠를 현재 모듈로 직접 내보내기🎜rrreee

위 내용은 es6의 모듈화 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!