The usage and differences between exportimport and exportdefault in JavaScriptES6

This article mainly introduces the usage and differences between export, import and exportdefault in JavaScriptES6. This article is very detailed and I believe it will be helpful for you to learn ES6, for more information, see the following. This article mainly introduces the usage and differences between export, import and export default in JavaScript ES6. This article is very detailed and I believe it will be helpful for you to learn ES6, for more information, see the following.

Preface

I believe many people have used export, export default, and import. What are the differences between them? Before looking at the differences between them, let's take a look at their usage.

ES6 import and export usage

Before ES6, The js module loading scheme has emerged. The most important is the CommonJS and AMD specifications. Commonjs is mainly used on servers for Synchronous loading, such as nodejs. AMD specifications are used in browsers, such as requirejs, for asynchronous loading. There are also CMD specifications for Synchronous loading solutions such as seaJS.

ES6 implements module functions in terms of language specifications and is quite simple to implement. It can completely replace the existing CommonJS and AMD specifications and become a common module solution for browsers and servers.

The ES6 module has two main functions: export and import.

• Export is an interface used to output the variables of this module (a file can be understood as a module ).

• Import is used to load another module containing the export interface in one module.

That is to say, after using the export command to define the external interface of the module, other JS files can load this module (File) through the import command ). As shown below (assume that file a and file B are in the same directory)

//. Jsvar sex = "boy"; var echo = function (value) {console. log (value)} export {sex, echo} // Add the sex, echo variable and export output to the braces, attackers can expose the strain value to other files in the form of sex and echo variable identifiers, and then read the value // cannot be written as export sex. If this is equivalent to export "boy ", an external file cannot obtain the sex value of the internal variable of the file, because there is no external output variable interface, only the output string.

// B. js obtains the internal variables of the. js file through import. the variables in the {} brackets are the variable identifier generated by the. js file export. Import {sex, echo} from "./a. js" console. log (sex) // boyecho (sex) // boy

A. js file can also be written in the following export syntax, but it is not as intuitive as above and is not recommended.

//. Jsexport var sex = "boy"; export var echo = function (value) {console. log (value)} // because function echo () {} is equivalent to var echo = function () {}, you can also write it as export function echo (value) {console. log (value )}

The above are the basic usage of the export and module, and then perform extended learning.

As shown in the preceding example, when B. js uses the import command, you need to know the variable identifier exposed by a. js. Otherwise, it cannot be loaded. You can use the export default command to specify the default output for the module, so that you do not need to know the variable name of the module to be loaded.

//. Jsvar sex = "boy"; export default sex (sex cannot be enclosed in brackets) // the original export sex cannot be identified externally. You can add default. however, a file can contain only one export default. In fact, this is equivalent to a system default variable name default for the sex variable value "boy". Naturally, only one value can be set for the default variable. Therefore, there cannot be multiple export defaults in a file.

// In essence, the export default of the. js file outputs a variable named default, and the system allows you to name it. Therefore, any variable name can be set for the import module without the need to include import any from "in braces ". /. js "import any12 from ". /. js "console. log (any, any12) // boy, boy

Export, import, and export default in ES6

In Javascript ES6, both export and export default can be used to export constants, functions, files, modules, etc, you can import it to other files or modules by using the import + (constant | function | file | module) name so that it can be used, but in a file or module, export and import can have multiple, and export default has only one.

Specific use:

1,

//demo1.jsexport const str = 'hello world'export function f(a){ return a+1}

Corresponding import method:

// Demo2.jsimport {str, f} from 'demo1' // You can also write it twice separately and enclose the curly braces during import.

2,

//demo1.jsexport default const str = 'hello world'

Corresponding import method:

// Demo2.jsimport str from 'demo1' // There are no curly brackets during import

Summary

The above is a detailed description of the usage and differences between export import and export default in JavaScript ES6. For more information, see other related articles in the first PHP community!