Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to import resources in es6". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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

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

Modular development can be done in es6, which is defined in the ES6 modularization specification:

Each js file is a separate module

Import other module members using the import keyword

Sharing module members to the outside using the expost keyword

Export command

Export

The module function is mainly composed of two commands: export and import. The export command is used to specify the external interface of the module, and the import command is used to import the functions provided by other modules.

A module is a separate file. All variables inside the file cannot be obtained externally. If you want the outside to be able to read a variable inside the module, you must use the export keyword to output the variable.

For example:

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

The above code is the test1.js file, which saves the user information. ES6 treats it as a module that outputs three variables to the outside with the export command.

Besides which of the above, there is another way to write export:

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

The export command can output functions or classes as well as variables

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

The export command can appear anywhere in the module, as long as it is at the top level of the module. If you are in block-level scope, you will get an error, as does the import command

As

Normally, the variable output from export is the original name, but it can be renamed using the as keyword

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

Once the external interface of the module is defined using the export command, other js files can load the module through the import command

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

If you want to rename the entered variable, the import command uses as and renames the entered variable.

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

The variables entered by the import command are read-only because it is essentially an input interface. In other words, it is not allowed to overwrite the interface in the script that loads the module.

Import {a} from'. / xxx'a = {} / / reported an error

The from after import specifies the location of the module file, either relative or absolute, and the .js suffix can be omitted. If it is only a module name without a path, then there must be a configuration file that tells the JavaScript engine the location of the module

Overall loading of the module

In addition to specifying that an output value is loaded, you can also use overall loading, that is, you can specify an object with an asterisk (*), and all output values are loaded on this object.

Here is a circle.js file that outputs two methods, area and circumference.

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

Now, load this module.

/ / main.jsimport {area, circumference} from'. / circle';console.log ('circle area:' + area (4)); console.log ('circle circumference:' + circumference (14))

The above method is to specify the method to be loaded one by one, and the overall loading is written as follows.

Import * as circle from'. / circle';console.log ('circle area:' + circle.area (4)); console.log ('circle circumference:' + circle.circumference (14))

Note that the object on which the module is loaded as a whole (circle in the example above) should be statically parsed, so runtime changes are not allowed. The following writing is not allowed.

The next two lines of import * as circle from'. / circle';// are the disallowed circle.foo = 'hello';circle.area = function () {}; export default command

Export default is used to specify the default output for the module

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

When other modules load the module, the import command can specify any name for the anonymous function.

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

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

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

Compare normal output with default output

/ / the first group export function arc () {/ /...} / / output import {arc} from 'arc' / / input / / the second group export default arc2 () {/ /...} / / output import arc2 from' arc2' / / input

Summary: curly braces are required for import statements corresponding to export and not for import statements corresponding to export default. The export default command is used to specify the default output of a module. Obviously, a module can only have one default output, so export default is only allowed to be used once in the same module. So there is no need to enlarge parentheses after the corresponding import command.

Compound Writing method of export and import

If you input and then output the same module in a module, the import statement can be written together with the export statement

Export {foo, bar} from 'my_module'// can be simply understood as import {foo, bar} from' my_module'export {foo, bar}

In the above code, the export and import statements can be combined into one line. However, it should be noted that after writing one line, foo and bar are not actually imported into the current module, but are equivalent to forwarding these two interfaces to the outside, resulting in the current module cannot directly use foo and bar.

Import () function

Import (specifier)

In the above code, the parameter specifier of the import function specifies the location of the module to be loaded. The import () function can accept whatever parameters the import command can accept. The main difference between the two is that the latter is dynamically loaded.

Import () returns a Promise object. Here is an example.

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

The import () function can be used anywhere, not only for modules, but also for non-modular scripts. It is executed at run time, that is, when it runs to this sentence, the specified module is loaded. In addition, the import () function does not have a static connection to the loaded module, which is also different from the import statement. Import () is similar to Node's require method, except that the former loads asynchronously and the latter loads synchronously.

This is the end of "how to import resources in es6". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.