Was ist ES6-Modularität?

es6-Modularisierung ist eine modulare Entwicklungsspezifikation, die Browsern und Servern gemeinsam ist. Ihr Designgedanke besteht darin, so statisch wie möglich zu sein, damit die Abhängigkeiten des Moduls sowie der Eingabe- und Ausgabevariablen während der Kompilierung bestimmt werden können. Bei der ES6-Modularisierung ist jede js-Datei ein unabhängiges Modul. Das Schlüsselwort import wird zum Importieren des Moduls und das Schlüsselwort expost zum Exportieren verwendet.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Klassifizierung modularer Front-End-Spezifikationen

Vor der Geburt der modularen ES6-Spezifikationen hatte die JavaScript-Community bereits modulare Spezifikationen wie AMD, CMD und CommonJS ausprobiert und vorgeschlagen.

Diese von der Community vorgeschlagenen modularen Standards weisen jedoch immer noch gewisse Unterschiede und Einschränkungen auf und sind keine universellen modularen Standards für Browser und Server. Zum Beispiel:

• AMD und CMD eignen sich für die browserseitige Javascript-Modularität

• CommonJS für serverseitige Javascript-Modularität

Was ist ES6-Modularität

ES6-Modularität ist eine modulare Entwicklungsspezifikation, die Browser- und Serverseiten gemeinsam ist.

Sein Erscheinungsbild hat die modularen Lernkosten von Front-End-Entwicklern erheblich reduziert. Entwickler müssen keine zusätzlichen modularen Spezifikationen wie AMD, CMD oder CommonJS erlernen.

Die Designidee von ES6-Modulen besteht darin, so statisch zu sein wie Dadurch können Modulabhängigkeiten sowie Eingabe- und Ausgabevariablen zur Kompilierzeit bestimmt werden.

Definition in der ES6-Modulspezifikation:

• Jede js-Datei ist ein unabhängiges Modul

• Verwenden Sie das Schlüsselwort import, um andere Modulmitglieder zu importieren.

• Verwenden Sie das Schlüsselwort export, um Modulmitglieder extern freizugeben.

Verwendung:

① Standardexport und Standardimport

② On-Demand-Export und On-Demand-Import

③ Importieren Sie den Code direkt im Modul und führen Sie ihn aus

Standardexport und Standardimport

Standard-Exportsyntax:

export default default exported memberexport default 默认导出的成员

默认导入的语法：

import 接收名称 from '模块标识符'

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

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

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

注意点：

① 每个模块中，只允许使用唯一的一次export default，否则会报错

② 默认导入时的接收名称可以任意名称，只要是合法的成员名称即

按需导入与按需导出

按需导入语法：

export 类型 成员

按需导出语法：

import { 成员 } from '模块标识符'

Standard-Importsyntax:

import erhält Namen von „Modul-ID“

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
    })
}

Hinweis:

① In jedem Modul ist nur ein Exportstandard zulässig, andernfalls wird ein Fehler gemeldet🎜🎜② Der empfangende Name beim Importieren kann standardmäßig ein beliebiger Name sein, solange es sich um einen legalen Mitgliedsnamen handelt🎜🎜🎜 🎜On-Demand-Import und On-Demand-Export🎜🎜🎜🎜🎜On-Demand-Importsyntax: 🎜🎜🎜export type member🎜🎜🎜On-Demand-Exportsyntax: 🎜🎜🎜import { member} from 'Module Identifier'🎜rrreee🎜Hinweis:🎜🎜① Sie können in jedem Modul mehrere On-Demand-Exporte verwenden🎜🎜② Die Mitgliedsnamen von On-Demand-Importen müssen mit den Namen von on übereinstimmen -Demand-Exporte🎜🎜③ Drücken Sie. Wenn Sie importieren müssen, können Sie zum Umbenennen das Schlüsselwort as verwenden.🎜🎜④ Der On-Demand-Import kann zusammen mit dem Standardimport verwendet werden🎜

Das obige ist der detaillierte Inhalt vonWas ist ES6-Modularität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!