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

Introduction à la modularisation dans es6 (exemple de code)

不言
不言avant
2018-11-17 16:09:371489parcourir

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} // 别名导出
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"; // 导入后取别名
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 {}
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'
Tout importer

Importer toutes les exportations d'un module dans des alias

import * as MyModule from './export'
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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer