What is es6 modularity

es6 modularization is a modular development specification common to browsers and servers. Its design idea is to be as static as possible, so that module dependencies and input and output variables can be determined during compilation. In ES6 modularization, each js file is an independent module. The import keyword is used to import the module and the expost keyword is used to export it.

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

Classification of front-end modular specifications

Before the birth of the ES6 modular specification, the JavaScript community had already tried and proposed modular specifications such as AMD, CMD, and CommonJS.

However, these modular standards proposed by the community still have certain differences and limitations, and are not universal modular standards for browsers and servers, for example:

• AMD and CMD are suitable for browser-side Javascript modularization

• CommonJS is suitable for server-side Javascript modularization

What is es6 modularity

ES6 modularity is a modular development specification common to both the browser and the server.

Its emergence has greatly reduced the modular learning cost of front-end developers. Developers do not need to learn additional modular specifications such as AMD, CMD or CommonJS

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

Definition 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

Usage:

① Default export and default import

② On-demand export and on-demand import

③ Directly import and execute the code in the module

Default export and default import

Default export syntax:

export default default exported members

Default import syntax:

import receives name from 'module identifier'

let n1 = 10 //定义模块私有成员n1
let n2 = 20 //定义模块私有成员n2 (外界访问不到n2 因为他没有共享出去)

function show() {} //定义模块私有方法 show

export default { //使用export default 默认导出语法 向外共享n1 和 show 两个成员
    n1,show
}

Note Points:

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

② The receiving name during default import can be any name, as long as it is legal The member name is

On-demand import and on-demand export

On-demand import syntax:

export type members

Export on demand syntax:

import {member} from 'module identifier'

import aixos from '@/utils/request.js'

// login 请求
export const userLogin = (data) => {
    return aixos({
        method: 'post',
        url: '/login',
        data
    })
}

// register 请求
export const userRegister = (data) => {
    return aixos({
        method: 'post',
        url: '/register',
        data
    })
}

Note:

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

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

③ When importing on demand, you can use the as keyword to rename

④ Importing on demand can be used together with the default import

The above is the detailed content of What is es6 modularity. For more information, please follow other related articles on the PHP Chinese website!