Shulou(Shulou.com)06/02 Report--

This article mainly analyzes how to analyze the relevant knowledge points of the es6 module, the content is detailed and easy to understand, the operation details are reasonable, and has a certain reference value. If you are interested, you might as well follow the editor to have a look, and follow the editor to learn more about "how to parse the es6 module".

ES6 is the sixth version of ECMAScript, and ECMAScript 6.0 (hereinafter referred to as ES6) is the next generation standard of the JavaScript language, which was officially released in June 2015. Its goal is to enable the JavaScript language to be used to write complex large-scale applications and become an enterprise development language. Let's explain the es6 module in detail.

Overview

Before ES6, modularization was implemented using RequireJS or seaJS (modularization libraries based on AMD specifications and modularization libraries based on CMD specifications, respectively).

ES6 introduces modularization, which is designed to determine the dependencies of modules and the variables of input and output at compile time.

The modularization of ES6 is divided into two modules: export @ and import.

Characteristics

ES6's module automatically turns on strict mode, whether or not you add use strict; to the module header.

Modules can import and export various types of variables, such as functions, objects, strings, numbers, Boolean values, classes, and so on.

Each module has its own context, and the variables declared in each module are local variables and will not pollute the global scope.

Each module is loaded only once (it is a singleton). If you load the same file in the same directory, read it directly from memory.

Export and import

Basic usage

Module imports and exports various types of variables, such as strings, numeric values, functions, and classes.

Exported function and class declarations must have names (otherwise considered by the export default command). You can export not only declarations but also references (such as functions). The export command can appear anywhere in the module, but it must be at the top level of the module. The import command is promoted to the head of the entire module and executed first. / *-export [test.js]-* / let myName = "Tom"; let myAge = 20 My name is myfn = function () {return "My name is" + myName + "! Ihumm'"+ myAge +" years old. "} let myClass = class myClass {static a =" yeah! ";} export {myName, myAge, myfn, myClass} / *-import [xxx.js]-* / import {myName, myAge, myfn, myClass} from". / test.js "; console.log (myfn ()); / / My name is Tom! Ichimm 20 years old.console.log (myAge); / / 20console.log (myName); / / Tomconsole.log (myClass.a); / / yeah!

It is recommended that you use curly braces to specify a set of variables to be output at the end of the document to specify the interface to be exported.

Both functions and classes need to have corresponding names, and there is no corresponding name at the end of the export document.

The usage of as

The interface name exported by the export command must have an one-to-one correspondence with the variables within the module.

The imported variable name must be the same as the exported interface name, that is, the order can be inconsistent.

/ *-export [test.js]-* / let myName = "Tom"; export {myName as exportName} / *-import [xxx.js]-* / import {exportName} from ". / test.js"; console.log (exportName); / / Tom uses as to redefine the exported interface name, hiding the variable / *-export [test1.js]-* / let myName = "Tom" inside the module Export {myName} / *-export [test2.js]-* / let myName = "Jerry"; export {myName} / *-import [xxx.js]-* / import {myName as name1} from ". / test1.js"; import {myName as name2} from ". / test2.js"; console.log (name1); / / Tomconsole.log (name2); / / Jerry

The name of the export interface for different modules is duplicated, and the variable name is redefined using as.

Characteristics of import command

Read-only attribute: it is not allowed to rewrite the reference to the interface in the script that loads the module, that is, you can rewrite the import variable type to the property value of the object, but not the import variable type to the basic type.

Import {a} from ". / xxx.js" a = {}; / errorimport {a} from ". / xxx.js" a.foo = "hello"; / / a = {foo: 'hello'}

Singleton mode: if you execute the same import statement repeatedly, it will only be executed once, not multiple times. Import the same module, declare different interface references, declare the corresponding variables, but only execute import once.

Import {a} ". / xxx.js"; import {a} ". / xxx.js"; / equivalent to import {a} ". / xxx.js"; import {a} from ". / xxx.js"; import {b} from ". / xxx.js"; / equivalent to import {a, b} from ". / xxx.js"

Static execution feature: import is executed statically, so expressions and variables cannot be used.

Import {"f" + "oo"} from "methods"; / / errorlet module = "methods"; import {foo} from module;// errorif (true) {import {foo} from "method1";} else {import {foo} from "method2";} / / error

Export default command

In a file or module, there can be multiple export and import, and only one export default. Default in export default is the corresponding export interface variable. Export through export, add {} when importing, but not export default. Members exposed by export default can be received using any variable. Var a = "My name is Tom!"; export default a; / / there is only one export default var c = "error"; / / error,default is already the corresponding exported variable and cannot follow the variable declaration statement import b from ". / xxx.js"; / / do not need to add {}, use any variable to receive compound use

Note: import () is a proposal, which will not be extended here for the time being.

Export and import can be used in the same module with the following characteristics:

You can rename the export interface, including default. Composite use of export and import, you can also export all, the interface exported by the current module will override the inherited export. Export {foo, bar} from "methods"; / / is approximately equal to the following two sentences, but the above import and export method does not import foo and barimport {foo, bar} from "methods"; export {foo, bar}; / *-feature 1-* / / General rename export {foo as bar} from "methods"; / / transfer foo to defaultexport {foo as default} from "methods" / / transfer default to fooexport {default as foo} from "methods"; / *-Features 2-* / export * from "methods"; that's all for "how to parse the es6 module". More related content can be searched for previous articles, hoping to help you answer questions and questions, please support the website!

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.