Einführung in die Modularisierung in es6 (Codebeispiel)

Der Inhalt dieses Artikels ist eine Einführung in die Modularisierung in es6 (Codebeispiele). Ich hoffe, dass er für Freunde hilfreich ist.

Überblick

Modularisierung ist ein unvermeidlicher Trend für Großprojekte.

Benannter Export

Sie können das Schlüsselwort export verwenden, um zu exportieren, was Sie exportieren möchten. Sie können Konstanten, Variablen, Funktionen, Klassen exportieren

// 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} // 别名导出

Benannter Import

Der benannte Import muss das {}-Paket verwenden, mehrere benannte Exporte können gleichzeitig importiert werden

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"; // 导入后取别名

Standardexport

Die Standardeinstellung export kann das Schlüsselwort default verwenden, Sie können anonym exportieren

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

Standardexport

Da der Standardexport tatsächlich ein anonymer Export ist, können Sie beim Importieren einen beliebigen Namen verwenden, und es gibt keinen Sie müssen {}Wrapping

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

Alle importieren

Alle Exporte eines Moduls in den Alias ​​importieren

import * as MyModule from './export'

Redirect

Die Inhalte eines anderen Moduls exportieren Modul direkt als aktuelles Modul

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

Das obige ist der detaillierte Inhalt vonEinführung in die Modularisierung in es6 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!