Qu'est-ce que la modularité es6

La modularisation es6 est une spécification de développement modulaire commune aux navigateurs et aux serveurs. Son idée de conception est d'être aussi statique que possible, afin que les dépendances du module et les variables d'entrée et de sortie puissent être déterminées lors de la compilation. Dans la modularisation ES6, chaque fichier js est un module indépendant. Le mot-clé import est utilisé pour importer le module et le mot-clé expost est utilisé pour l'exporter.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Classification des spécifications modulaires frontales

Avant la naissance de la spécification modulaire ES6, la communauté JavaScript avait déjà essayé et proposé des spécifications modulaires telles que AMD, CMD et CommonJS.

Cependant, ces normes modulaires proposées par la communauté présentent encore certaines différences et limites, et ne sont pas des normes modulaires universelles pour les navigateurs et les serveurs. Par exemple :

• AMD et CMD conviennent à la modularisation Javascript côté navigateur

• .

  CommonJS pour la modularisation Javascript côté serveur

Qu'est-ce que la modularisation es6

La modularisation ES6 est une spécification de développement modulaire commune aux côtés navigateur et serveur.

Son apparition a considérablement réduit le coût d'apprentissage modulaire des développeurs front-end. Les développeurs n'ont pas besoin d'apprendre des spécifications modulaires supplémentaires telles que AMD, CMD ou CommonJS

L'idée de conception des modules ES6 est d'être aussi statique que possible. Ceci est possible, ce qui permet de déterminer les dépendances du module, ainsi que les variables d'entrée et de sortie, au moment de la compilation.

Définition dans la spécification modulaire ES6 :

• Chaque fichier js est un module indépendant

• Utilisez le mot-clé import pour importer d'autres membres du module

• Utilisez le mot-clé export pour partager les membres du module en externe

Utilisation :

① Exportation par défaut et importation par défaut

② Exportation et importation à la demande

③ Importez et exécutez directement le code dans le module

Exportation par défaut et importation par défaut

Syntaxe d'exportation par défaut :

exporter les membres exportés par défautexport 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 '模块标识符'

Syntaxe d'importation par défaut :

l'importation reçoit le nom de « l'identifiant du module »

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
    })
}

Remarque :

① Dans chaque module, un seul export par défaut est autorisé, sinon une erreur sera signalée🎜🎜② Le nom de réception lors de l'importation par défaut peut être n'importe quel nom, à condition qu'il s'agisse d'un nom de membre légal🎜🎜🎜 🎜Import et export à la demande🎜🎜🎜🎜🎜Syntaxe d'importation à la demande : 🎜🎜🎜membre de type d'exportation🎜🎜🎜Syntaxe d'exportation à la demande : 🎜🎜🎜import { member} de 'Module identifier'🎜rrreee🎜Remarque :🎜🎜① Vous pouvez utiliser plusieurs exportations à la demande dans chaque module🎜🎜② Les noms de membres des importations à la demande doivent être cohérents avec les noms de -Exportations à la demande🎜🎜③ Appuyez sur Lorsque vous devez importer, vous pouvez utiliser le mot-clé as pour renommer🎜🎜④ L'importation à la demande peut être utilisée avec l'importation par défaut🎜

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!