Connaissances frontales Modules JavaScript Module d'apprentissage

les modules sont des modules JS D'après ce que je comprends, il y a un grand nombre de données et de fonctions du même type ou liées, et la méthode doit être affichée dans son ensemble , Il peut être défini séparément comme un module, c'est-à-dire un module . La signification de Module est de modulariser le code, en divisant votre code en sous-ensembles logiquement indépendants. Chaque sous-ensemble gère des fonctions spécifiques et est ensuite appelé séparément. Les

modules, c'est-à-dire les modules,

adoptent automatiquement le mode strict , que "user strict" soit ajouté ou non à l'en-tête du module, les agruments ne le seront pas Refléter automatiquement les changements dans les paramètres de fonction , et interdire à cela de pointer vers l'objet global

modules a deux mots-clés, Imports et Exports

• Imports : Utilisés pour saisir les fonctions fournies par d'autres modules

• Exportations : Utilisés pour spécifier des interfaces externes

Un module est un module indépendant Fichier , toutes les variables à l'intérieur du fichier ne peuvent pas être obtenues en externe , si vous souhaitez lire en externe une variable à l'intérieur du module, vous devez utiliser le mot-clé export pour sortir la variable, exporter, en plus des variables de sortie, vous pouvez également générer des fonctions, class

let a='a';
let b='b';
let c='c';
export {a,b,c}

Si vous renommez la variable de sortie, utilisez le mot-clé

as dans la commande d'importation et changez le nom en . Par exemple :

import {name as a} from '.../xxx.js'

De plus,

, l'import a un effet de promotion , peu importe où il est référencé, il sera promu en haut de tout le module. , exécutez d'abord

En plus de spécifier une certaine valeur à charger, vous pouvez également la charger dans son ensemble, c'est-à-dire utiliser un astérisque (*) pour spécifier un objet et toutes les valeurs de sortie ​sera chargé sur cet objet. Par exemple,

import * as a from '.../xxx.js'
console.log(a.area(4));
console.log(a.cire(4));

export default, définissez la sortie par défaut du fichier de module , chaque module n'est autorisé à avoir qu'une seule sortie par défaut , sortie par défaut Il n'est pas nécessaire de connaître le nom de la variable du module De plus, export default n'a pas besoin d'ajouter des accolades , car, en substance, export default génère simplement une variable ou. méthode appelée par défaut, puis le système vous permet de Il prend n'importe quel nom

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

S'il est chargé plusieurs fois, cela équivaut au chargement après la fusion, par exemple,

import {b} from '.../xxx.js'
import {c} from '.../xxx.js'
//等同于
import {b,c} from '.../xxx.js'

Lorsque le navigateur charge les modules ES6, utilisez également la balise

, mais ajoutez l'attribut <script>. type="module"

<script type="module">
</script>

Les navigateurs se chargent de manière asynchrone pour

avec type="module", ce qui ne bloquera pas le navigateur, c'est-à-dire qu'il faudra attendre que la page entière soit rendue, puis exécuter le script du module, ce qui équivaut à une ouverture. L'attribut <script> de la balise <script>. Dans le module defer

, le mot-clé

du niveau supérieur renvoie thisundefined au lieu de pointer vers . En d'autres termes, cela n'a aucun sens d'utiliser le mot-clé window au niveau supérieur du module en même temps, en utilisant le point de syntaxe this auquel le au niveau supérieur de this est égal. undefined peut détecter si le code actuel se trouve dans un module ES6. .

Articles connexes :

Introduction détaillée aux points de connaissances communs pour l'apprentissage du front-end Web

Connaissances de base de JavaScript Amis qui. voulez apprendre js, vous pouvez vous y référer Suivant

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!