Que utiliser pour importer des ressources dans Es6

Dans es6, vous pouvez utiliser l'instruction import ou import() pour importer des ressources. La commande import est utilisée pour importer un module spécifié (fichier ressource), avec la syntaxe "import {member} from 'module identifier'" ; import() est utilisée pour importer des fichiers ou des modules, avec la syntaxe "import (emplacement de la ressource)" ; ".

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

Le développement modulaire peut être effectué dans es6, qui est défini 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

• vers l'extérieur Partagé les membres du module utilisent le mot-clé export

commande export

export

La fonction du module se compose principalement de deux commandes : export et import. La commande export est utilisée pour spécifier l'interface externe du module, et la commande import est utilisée pour importer des fonctions fournies par d'autres modules. export和import。export命令用于规定模块的对外接口，import命令用于导入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部所有的变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
例如：

//test1.js
export var firstName = 'mike'
export var lastName = 'Jack'

上面代码是test1.js文件，保存了用户信息。ES6将其视为一个模块，里面用export命令对外部输出了三个变量。
export的写法，除了像上面哪样，还有另一种写法：

//test1.js
var firstName = 'mike'
var lastName = 'Jack'
export {firstName, lastName}

export命令除了输出变量，还可以输出函数或类

export function add(x, y){
    return x + y
}

export命令可以出现在模块得任意位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，import命令也是如此

as

通常情况下,export输出的变量就是本来的名字，但是可以使用as关键字重命名

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

import命令

使用export命令定义了模块的对外接口以后，其他js文件就可以通过import命令加载这个模块

import {firstName, lastName} from './test1.js'
console.log(firstName,lastName)

如果想为输入的变量重新取一个名字，import命令要使用as，将输入的变量重命名。

import {lastName as suName} from './test1.js'

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面改写接口。

import {a} from './xxx'
a = {}   //报错

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省去。如果只是模块名，不带有路径，那么必须有配置文件，告诉JavaScript引擎该模块的位置

模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

下面是一个circle.js文件，它输出两个方法area和circumference。

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

现在，加载这个模块。

// main.js

import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

上面写法是逐一指定要加载的方法，整体加载的写法如下。

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

注意，模块整体加载所在的那个对象（上例是circle），应该是可以静态分析的，所以不允许运行时改变。下面的写法都是不允许的。

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

export default 命令

export default用来为模块指定默认输出

//export-default.js
export default function(){
    console.log('foo')
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字

import cus from './export-default.js'

export default命令用在非匿名函数前，也是可以的，但是在模块外部该函数名是无效的，加载的时候，视为匿名函数加载，本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为他取任意名字

export default function test(){
    console.log('test')
}

对比正常输出和默认输出

//第一组
export function arc(){
    //...
} //输出

import {arc} from 'arc'  //输入

//第二组
export default arc2(){
    //...
}  //输出
import arc2 from 'arc2'   //输入

总结：export对应的import语句需要使用大括号，export default对应的import语句不需要使用大括号。export default命令用于指定模块的默认输出，显然，一个模块只能有一个默认输出，因此export default在同一个模块中只允许使用一次。所以与他对应的import命令后面才不用加大括号

export 与 import的复合写法

如果在一个模块中，先输入后输出同一个模块，import语句可以与export

Un module est un fichier indépendant. Toutes les variables contenues dans ce fichier ne peuvent pas être obtenues de l'extérieur. Si vous souhaitez que le monde extérieur puisse lire une variable à l'intérieur du module, vous devez utiliser le mot-clé export pour exporter la variable. 🎜 Par exemple : 🎜

export {foo, bar} from 'my_module'
//可以简单理解为
import {foo, bar} from 'my_module'
export {foo, bar}

🎜Le code ci-dessus est le fichier test1.js, qui enregistre les informations utilisateur. ES6 le traite comme un module, qui utilise la commande export pour exporter trois variables vers l'extérieur. En plus d'écrire 🎜export comme ci-dessus, il existe une autre façon de l'écrire : 🎜

const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

🎜En plus de générer des variables, la commande export peut également générer des fonctions ou des classes🎜 rrreee🎜< La commande code>export peut apparaître n'importe où dans le module, à condition qu'elle se trouve au niveau supérieur du module. S'il s'agit d'une portée au niveau du bloc, une erreur sera signalée, et il en va de même pour la commande import🎜🎜🎜🎜as🎜🎜🎜🎜Normalement, la variable générée par export est son nom d'origine, mais vous pouvez utiliser le mot-clé as pour renommer la 🎜rrreee🎜🎜commande import🎜🎜🎜Après avoir utilisé la commande export pour définir l'interface externe du module, d'autres fichiers js peuvent passer < La commande code>import charge ce module🎜rrreee🎜Si vous souhaitez renommer la variable d'entrée, utilisez la commande import pour renommer le nom de la variable d'entrée. 🎜rrreee🎜Les variables saisies par la commande import sont toutes en lecture seule, car son essence est une interface de saisie. En d'autres termes, l'interface ne peut pas être réécrite dans le script qui charge le module. 🎜rrreee🎜from après import spécifie l'emplacement du fichier du module, qui peut être un chemin relatif ou un chemin absolu. Le suffixe .js. peut être omis. S'il s'agit simplement du nom du module sans chemin, alors il doit y avoir un fichier de configuration pour indiquer au moteur JavaScript l'emplacement du module🎜🎜Chargement global du module🎜🎜En plus de spécifier une certaine valeur de sortie à charger, vous pouvez utilisez également le chargement global, c'est-à-dire utilisez un astérisque ( *) Spécifiez un objet sur lequel toutes les valeurs de sortie sont chargées. 🎜🎜Ce qui suit est un fichier circle.js, qui génère deux méthodes area et circumference. 🎜rrreee🎜Maintenant, chargez ce module. 🎜rrreee🎜La méthode ci-dessus consiste à spécifier les méthodes à charger une par une. La méthode de chargement globale est la suivante. 🎜rrreee🎜Notez que l'objet dans lequel le module est chargé dans son ensemble (l'exemple ci-dessus est circle) doit être analysable de manière statique, donc les modifications d'exécution ne sont pas autorisées. Les méthodes d'écriture suivantes ne sont pas autorisées. 🎜rrreee🎜commande d'exportation par défaut🎜🎜export default est utilisée pour spécifier la sortie par défaut du module🎜rrreee🎜Lorsque d'autres modules chargent le module, la commande import peut spécifier n'importe quoi pour la fonction anonyme La commande name 🎜rrreee🎜export default peut également être utilisée avant une fonction non anonyme, mais le nom de la fonction est invalide en dehors du module Lors du chargement, elle est considérée comme une fonction anonyme. Load Essentiellement, export default consiste à exporter une variable ou une méthode appelée default, puis le système vous permet de lui donner n'importe quel nom🎜rrreee🎜Comparez la sortie normale et la valeur par défaut. output🎜rrreee🎜🎜Résumé :🎜 L'instruction import correspondant à export doit utiliser des accolades, et l'instruction import correspondant à export default n'a pas besoin d'utiliser des accolades. La commande export default est utilisée pour spécifier la sortie par défaut du module. Évidemment, un module ne peut avoir qu'une seule sortie par défaut, donc export default ne peut être utilisé qu'une seule fois. dans le même module. Par conséquent, il n'est pas nécessaire d'ajouter des accolades après la commande d'importation correspondante🎜🎜Méthode d'écriture combinée d'exportation et d'importation🎜🎜Si vous êtes dans un module, saisissez d'abord puis sortez le même module, le import l'instruction peut être utilisée avec les instructions Export qui sont écrites ensemble🎜

export {foo, bar} from 'my_module'
//可以简单理解为
import {foo, bar} from 'my_module'
export {foo, bar}

上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar.

import()函数

import(specifier)

上面的代码中，import函数的参数specifier,指定所要加载的模块的位置。。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。

import()返回一个 Promise 对象。下面是一个例子。

const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

【相关推荐：javascript视频教程、web前端】

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!