What to use to import resources in es6

In es6, you can use the import statement or import() to import resources. The import command is used to import a specified module (resource file), with the syntax "import {member} from 'module identifier'"; import() is used to import files or modules, with the syntax "import (resource location)".

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

Modular development can be carried out in es6, which is defined in the ES6 modular specification:

• Each js file is an independent module

• Use the import keyword to import other module members

• Use the expost keyword to share module members externally

export command

##export

exportandimport. Theexportcommand is used to specify the external interface of the module, and theimportcommand is used to import the functions provided by other modules.

exportkeyword to export the variable.For example:

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

test1.jsfile, which saves user information. ES6 treats it as a module, which uses theexportcommand to export three variables to the outside. In addition to the above, there is another way to write
export:

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

exportIn addition to outputting variables, the command can also output functions or classes

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

exportThe command can appear anywhere in the module, as long as it is at the top level of the module. If it is in block-level scope, an error will be reported, as will theimportcommand

as

exportThe output variable is its original name, but it can be renamed using theaskeyword

function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion };

import command

exportcommand to define the external interface of the module, other js files can load this module through theimportcommand

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

importcommand should useasto rename the input variable.

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

importThe variables entered by the command are all read-only because its essence is an input interface. In other words, the interface is not allowed to be rewritten in the script that loads the module.

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

importThefromafter it specifies the location of the module file. It can be a relative path or an absolute path. The.jssuffix can be omit. If it is just the module name without a path, then there must be a configuration file to tell the JavaScript engine the location of the module

circle.jsfile, which outputs two methodsareaandcircumference.

// 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) should be statically analyzable, so runtime changes are not allowed. The following writing methods are not allowed.

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

export defaultis used to specify the default output for the module

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

importThe command can specify any name for the anonymous function

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

export defaultThe command can be used before a non-anonymous function, but the function name is invalid outside the module. Loading When, it is loaded as an anonymous function. In essence,export defaultis to output a variable or method calleddefault, and then the system allows you to give it any name

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

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

Summary:exportThe correspondingimportstatement needs to use curly brackets,export defaultThe correspondingimportstatement does not require the use of braces. Theexport defaultcommand is used to specify the default output of the module. Obviously, a module can only have one default output, soexport defaultis only allowed to be used once in the same module. Therefore, there is no need to add braces after the corresponding import command.

import# The ## statement can be written together with theexportstatement

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

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

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