Maison > Article > interface Web > 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
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 };
使用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.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命令后面才不用加大括号
如果在一个模块中,先输入后输出同一个模块,import
语句可以与export
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🎜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 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(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!