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

Today, the editor will share with you the relevant knowledge of what es6 modularization refers to. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Es6 modularization is a common modular development specification for browsers and servers. Its design idea is to be static as far as possible, so that the dependency of modules and the variables of input and output can be determined at compilation time. In ES6 modularization, each js file is an independent module. The import module uses the import keyword and the export uses the expost keyword.

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

Classification of front-end modularization specifications

Before the birth of ES6 modularization specification, the JavaScript community has tried and put forward AMD, CMD, CommonJS and other modular specifications.

However, these modularization standards proposed by the community still have some differences and limitations, and are not common to browsers and servers, such as:

AMD and CMD are suitable for Javascript modularization on the browser side

CommonJS is suitable for Javascript modularization on the server side

What is es6 Modularization

ES6 modularization is a common modular development specification for browsers and servers.

The emergence of it greatly reduces the cost of modular learning for front-end developers, and developers do not need to learn additional modular specifications such as AMD, CMD or CommonJS.

The design idea of the ES6 module is to be static as much as possible, so that the dependency of the module and the variables of input and output can be determined at compile time.

The ES6 Modularization Specification defines:

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

Usage:

① default Export and default Import

② export on demand and import on demand

③ directly imports and executes the code in the module

Default export and default import

Default export syntax:

Members exported by default by export default

Default import syntax:

Import receive name from 'module identifier'

Let N1 = 10 / define module private member n1let N2 = 20 / define module private member N2 (outside cannot access N2 because he did not share it) function show () {} / / define module private method showexport default {/ / use export default default export syntax to share N1 and show members N1 show}

Note:

In each module of ①, only one export default is allowed, otherwise an error will be reported.

By default, the receive name of ② on import can be any name, as long as it is a valid member name, namely

Import on demand and export on demand

Import on demand syntax:

Export type member

Export syntax on demand:

Import {member} from 'module identifier'

Import aixos from'@ / utils/request.js'// login request export const userLogin = (data) = > {return aixos ({method: 'post', url:' / login', data})} / / register request export const userRegister = (data) = > {return aixos ({method: 'post', url:' / register', data})} Note:

Multiple on-demand exports can be used in each module of ①

② on-demand imported member names must be consistent with on-demand exported names

When ③ is imported on demand, it can be renamed using the as keyword

④ on-demand imports can be used with default imports

These are all the contents of the article "what does es6 Modularization mean?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.