es6 のモジュール性とは何ですか

es6 モジュール化は、ブラウザとサーバーに共通のモジュール開発仕様であり、その設計思想は、モジュールの依存関係や入出力変数がコンパイル中に決定できるように、可能な限り静的であることです。 ES6 のモジュール化では、各 js ファイルは独立したモジュールであり、モジュールのインポートには import キーワードが使用され、エクスポートには expost キーワードが使用されます。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

フロントエンドのモジュラー仕様の分類

ES6 モジュラー仕様が誕生する前に、JavaScript コミュニティはすでに AMD、CMD、CMD などのモジュラー仕様を試し、提案していました。そしてCommonJS。

ただし、コミュニティによって提案されたこれらのモジュラー標準には、依然として特定の相違点と制限があり、ブラウザおよびサーバー用の普遍的なモジュラー標準ではありません。例:

• AMD およびCMD はブラウザ側の Javascript のモジュール化に適しています

• CommonJS はサーバー側の Javascript のモジュール化に適しています

##とはes6 のモジュール性

ES6 のモジュール性は、ブラウザとサーバーの両方に共通のモジュール開発仕様です。

その出現により、フロントエンド開発者のモジュール学習コストが大幅に削減されました。開発者は、AMD、CMD、CommonJS

ES6 モジュールなどの追加のモジュール仕様を学習する必要はありません。モジュールの依存関係や入力変数と出力変数をコンパイル時に決定できるように、できる限り静的なものにすることが考えられます。

ES6 モジュラー仕様の定義:

• 各 js ファイルは独立したモジュールです

• import キーワードを使用して他のモジュール メンバーをインポートします。

• expost キーワードを使用してモジュール メンバーを外部に共有します

使用法:

① デフォルトのエクスポートとデフォルトのインポート

② オンデマンドのエクスポートとオンデマンドのインポート

③ モジュール内のコードを直接インポートして実行します

デフォルトのエクスポートとデフォルトのインポート

デフォルトのエクスポート構文:

デフォルトのエクスポートされたデフォルトのメンバー

デフォルトのインポート構文:

import は「モジュール識別子」から名前を受け取ります

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

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

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

注意点:

#① 各モジュールでは、エクスポートのデフォルトは 1 つだけ許可されます。それ以外の場合は、エラーが報告されます。

##② デフォルトのインポート時の受信名は、正当である限り、任意の名前を使用できます。メンバー名は

オンデマンド インポートおよびオンデマンド エクスポート

オンデマンド インポート構文:

タイプ メンバーのエクスポート

オンデマンド構文のエクスポート:

import {member} from 'モジュール識別子'

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

注:

① 各モジュールで複数のオンデマンド エクスポートを使用できます

② オンデマンドでインポートされたメンバー名は、エクスポートされた名前と一致している必要がありますon-demand

③ オンデマンドでインポートする場合、as キーワードを使用して名前を変更できます。

④ オンデマンドでのインポートは、デフォルトのインポート

と併用できます。

以上がes6 のモジュール性とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。