ES 6におけるimport、export defaultとexportの使い方と違い

2481 ワード

先端開発を選択します。 ES 5 を選択します。 ES 6 ES 7

ES 6はモジュール機能exportとimportを実現しました.
ES 6が現れる前に、jsモジュールのローディングを解決する方案が現れました.最も主要なのはCommon JSとAMD仕様です.Common JSは主にサーバーに適用され、nodejsなどの同期ローディングを実現します.AMD仕様は、ブラウザなどに適用され、非同期のためにロードされます.同時にCMD仕様もあります.seaJSのような同期ロード方式です.
ES 6は言語規格のレベルでモジュール機能を実現し、既存のCommunJSとAMD規格に取って代わることができ、ブラウザとサーバー共通のモジュールソリューションとなります.
ES 6モジュールは主に二つの機能があります. 和 import

exportは、本モジュール(1つのファイルは1つのモジュールとして理解できる)変数を外部に出力するインターフェース

のために使用される.

importは、もう一つのモジュールにexportインターフェースを含むモジュール

をロードするために使用される.
export defaultとexportの違い

exportとexport defaultは、定数、関数、ファイル、モジュールなどを導出するために使用できます.

は、他のファイルまたはモジュールにおいて、import+(定数関数124)名を介して、

を使用することができるように導入することができる.

は、1つのファイルまたはモジュールにおいて、export、importは複数あり得る.export defaultは1つの

しかない.

はexport方式で導出し、導入時に｛｝を追加し、export defaultは

を必要としない.

実は多くの場合、exportとexport defaultは同じ目的を実現することができます.注意第四条export方式でエクスポートし、導入時に「-」、export defaultを追加する必要はありません.export defaultコマンドを使用して、モジュールのデフォルト出力を指定します.そうすると、モジュールをロードする変数名を知る必要がありません.
export導出事例:

// export      demo1.js
export const str = 'hello'
export function init1 () {
  console.log('hello')
}
export const init2 = () => {
  console.log('hello)
}
export class INIT {
  constructor() {
    console.log('hello')
    this.init()
  }
  init () {
    console.log('hello')
  }
}
//        demo2.js ,     
import { str, init1, init2, INIT } from 'demo1.js'

export default導出事例

// export default      demo1.js
const str = 'hello'
//       str   "hello"            default，  default      ，            export default
export default str

// export default      demo2.js
const str1 = 'hello'
export default {
  str1: str1,
  str2: 'hi'
}

//        demo3.js
import a from 'demo1.js'
import b from 'demo2.js'
console.log(a)
console.log(b)
//    ，demo1.js   demo2.js   export default      default   ，              ，       a b。
//      import         ，

下記のコードの違いに注意してください.

export default const a = 1 //

const a = 1
export default a //

export const a = 1 //

const/letはES 6のキーワードです.defaultのあとにconstなどのキーワードが該当しない場合、ES 6の仕様でdefaultの後ろにあるパラメータの本質を追記しました.export defaultコマンドは、実際には、このコマンドの後の値をdefault変数に割り当ててからデフォルトにします.defaultという変数を出力しただけです.したがって、export defaultの後に変数宣言文export default aとは変数aの値を変数defaultに割り当てるという意味です.
あなたと共に努力します:更に牛の迫る夢想、同じく馬鹿に迫るような堅持に耐えられません!

JavaScript-携帯電話におけるアクセスページの判断