Maison > interface Web > js tutoriel > Introduction à la modularisation dans es6 (exemple de code)

Introduction à la modularisation dans es6 (exemple de code)

不言
Libérer: 2018-11-17 16:09:37
avant
1492 Les gens l'ont consulté

Le contenu de cet article est une introduction à la modularisation dans es6 (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aperçu

La modularisation est une tendance inévitable pour les projets à grande échelle.

Exportation nommée

Vous pouvez utiliser le mot-clé export pour exporter ce que vous souhaitez exporter. Vous pouvez exporter des constantes, des variables, des fonctions et des classes,

// 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} // 别名导出
Copier après la connexion
Importation nommée

L'importation nommée doit utiliser le package

, plusieurs exportations nommées peuvent être importées en même temps{}

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"; // 导入后取别名
Copier après la connexion
Exportation par défaut

L'exportation par défaut peut être utilisée

Les mots clés peuvent être exportés de manière anonymedefault

export default 1 // 默认导出常量
export default function () {} // 默认导出
export default () => {}
export default function* () {}
export default class {}
Copier après la connexion
Exportation par défaut

Étant donné que l'exportation par défaut est en fait une exportation anonyme, vous pouvez utiliser n'importe quel nom lors de l'importation, et il n'est pas nécessaire d'utiliser

Pack {}

import num from './export'
import func from './export'
import arrowFunc from './export'
import generatorFunc from './export'
import class0 from './export'
Copier après la connexion
Tout importer

Importer toutes les exportations d'un module dans des alias

import * as MyModule from './export'
Copier après la connexion
Redirection

Mettre un autre élément de module est exporté directement en tant que module actuel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal