ES 6モジュールのimportとexportの使い方のまとめ

ES 6は前にすでにjsモジュールのロードの方案が現れて、最も主要なのはCommon JSとAMD仕様です.commmonjsは主にサーバーに適用され、nodejsなどの同期ローディングを実現します.AMD仕様は、ブラウザなどに適用され、非同期のためにロードされます.同時にCMD仕様もあります.seaJSのような同期ロード方式です.
ES 6は言語規格のレベルでモジュール機能を実現し、既存のCommunJSとAMD規格に取って代わることができ、ブラウザとサーバー共通のモジュールソリューションとなります.
ES 6モジュールは主に二つの機能があります.exportとimportです.
exportは、本モジュール(一つのファイルは一つのモジュールとして理解できる)変数を外部に出力するためのインターフェースです.
importは、もう一つのモジュールにexportインターフェースを含むモジュールをロードするために使用されます.
つまりexportコマンドを使用してモジュールの対外インターフェースを定義した後、他のJSファイルはimportコマンドでこのモジュール(ファイル)をロードすることができます.次の図(aとbファイルは同じディレクトリの下にあると仮定する)

// a.js

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}  
//         sex，echo    export  ，          sex、echo                   
//    export sex     ，        export "boy",                 sex  ，            ,        。

// b.js
  import  a.js       ，{}         a.js  export       。
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy

a.jsファイルも下記のようにexport文法で書いてもいいですが、上の方が直感的ではなく、あまりオススメできません.

// a.js
export var sex="boy";
export var echo=function(value){
　　console.log(value)
}

//  function echo(){}    var echo=function(){}       
export function echo(value){
　　　console.log(value)
}

以上はexportとmoduleの基本的な使い方で、更に学習を広く開拓します.
前の例では、b.jsがimportコマンドを使用する場合、ユーザーはa.jsが露出した変数識別子を知る必要があり、そうでないとロードできないことが分かります.export defaultコマンドを使用して、モジュールのデフォルト出力を指定することができます.したがって、モジュールをロードする変数名を知る必要はありません.

//a.js
var sex="boy";
export default sex（sex      ）
//    export sex        ，  default    .              export default。
        sex   "boy"            default，  default      ，            export default。

// b.js
   ，a.js   export default      default   ，              。     import         ，          
import any from "./a.js"
import any12 from "./a.js" 
console.log(any,any12)   // boy,boy

 参考:http://es6.ruanyifeng.com/#docs/module
個人ブログ転送ゲート」」」」を参照してください.
転載先:https://www.cnblogs.com/dupd/p/5951311.html