詳細はES 6モジュール化

詳細はES 6モジュール化
この論文ではES 6モジュール化を学び、モジュールから変数、関数、クラスを導出し、他のモジュールで再利用する.ES 6モジュールは、厳格なモードで実行されるJavaScriptファイルです.モジュールに宣言された変数と関数は、グローバルスコープに自動的に増加しないことを意味します.
1.ブラウザでモジュールを実行する
まず、新しいファイルのmessage.jsを作成し、下記のコードを追加します.

export let message = 'ES6 Modules';

e 6におけるmessage.jsは、message変数を含むモジュールである.export文が他のモジュールにメッセージ変数を暴露します.
次に、新しいファイルアプリ.jsを作成し、message.jsモジュールを使用する.app.jsモジュールはh 1要素を作成して、htmlページに追加します.import文はmessage.jsモジュールからメッセージ変数を導入します.

import { message } from './message.js'
 
const h1 = document.createElement('h1');
h1.textContent = message
 
document.body.appendChild(h1)

ステップ3、新規作成のhtmlページファイルは、ap.jsモジュールを使用します.

scriptタグにtype=「module」をロードし、ブラウザでこのページを くと、 の が されます.
ES 6 Modules
ここでは、 とエクスポートの について しく します.
2.Es 6モジュール
2.1エクスポート
、 、クラスをエクスポートするには、その にexportキーを する があります.

// log.js
export let message = 'Hi';
 
export function getMessage() {
  return message;
}
 
export function setMessage(msg) {
  message = msg;
}
 
export class Logger {
}

log.jsモジュールには と 、クラスがあります.exportキーを ってモジュール のすべての を します. exportキーワードは またはクラス が で、 またはクラスをエクスポートできません.
JavaScriptも 、 またはクラスを に してからエクスポートすることをサポートしています.

// foo.js
function foo() {
   console.log('foo');
}
 
function bar() {
  console.log('bar');
}
export foo;

の はまずfor を してからエクスポートします.bar がエクスポートされていないため、 のモジュールはこれにアクセスできません. のモジュールにはプライベートでアクセスできません.
2.2
モジュール でexportを して からアクセスできる 、 、またはクラスを すると、 のモジュールはimportキーを して され、 は の りである.

import { what, ever } from './other_module.js';

かっこで を し、バインディング

と ぶ.

どのモジュールからバインディングを するかを します.
モジュールからバインディングを すると、バインディング はconstキーワード と しています. の と または を できないことを する. を てください

// greeting.js
export let message = 'Hi';
 
export function setMessage(msg) {
  message = msg;
}

メッセージ とsetMessage を すると、setMessa を してメッセージの を することができます.

// app.js
import {message, setMessage } from './greeting.js';
console.log(message); // 'Hi'
 
setMessage('Hello');
console.log(message); // 'Hello' 

しかし、 メッセージの を することはできません. のステートメントのコンパイルエラー:

1
message = 'Hallo'; // error

にsetMessage を び すと、JavaScriptはgreeting.jsモジュールに り、コード メッセージ を し、 の は されたバインディング messageに に します.
app.jsにおけるバインディング messageは であるため、2つのモジュールにおけるmessageは じではない.

バインディング

を する.
モジュールにfoo があると、 のようになります.

// foo.js
export foo = 10;

のモジュールはfoo を できます.

// app.js
import { foo } from './foo.js';
console.log(foo); // 10;

しかし、fooの を することはできません. するとコンパイルエラーが します.

foo = 20; // throws an error

は、 のバインディング

を する.
cal.jsモジュールを :

// cal.js
export let a = 10,
           b = 20,
           result = 0;
 
export function sum() {
  result = a + b;
  return result;
}
 
export function multiply() {
  result = a * b;
  return result;
}

これらのバインディングをcal.jsモジュールから したいです. を できます.

import {a, b, result, sum, multiply } from './cal.js';
sum();
console.log(result); // 30
 
multiply();
console.log(result); // 200

モジュールをオブジェクトとして する

モデルを すると、モジュールのすべての を のオブジェクトとしてインポートできます.

import * as cal from './cal.js';

では、cal.jsモジュールからすべてのバインディングを のオブジェクトとして すると、すべてのバインディングはcalオブジェクトの として され、アクセス :

cal.a;
cal.b;
cal.sum();

この は とも ばれる. に、import は っても だけ されます. :

import { a } from './cal.js';
import { b } from './cal.js';
import {result} from './cal.js';

のimport の 、cal.js が され、メモリにロードされます. のimport は に み まれた を します.
2.3.importとexport
importとexport は の と の にある があります. のステートメントのコンパイルエラー:

if( requiredSum ) {
   export sum;
}  

のステートメントもエラー:

function importSum() {
   import {sum} from './cal.js';
}

とも の の にあるからです.
2.4.
JavaScriptは、インポートまたはエクスポート のエイリアスの を します. のmath.jsモジュール:

// math.js  
function add( a, b ) {
   return a + b;
}
 
export { add as sum };

エクスポート にaddがasキーワードを して sumを します.
したがって、add を するには、sumを しなければなりません.

import { sum } from './math.js';

インポート にasキーワードを ってエイリアスを することもできます.

import {sum as total} from './math.js';

2.5バインディングを エクスポート
インポートバインディングを エクスポートすることもできます.

import { sum } from './math.js';
export { sum };

ではmath.jsモジュールからsumを して します. は の りです

export {sum} from './math.js';

エクスポートする にバインディングの を する があります.asキーを してもいいです. の を てください.

export { sum as add } from './math.js';

のモジュールのすべてのバインディングもエクスポートできます.

export * from './cal.js';

2.6.バインディングなしで する
には、 のコンテンツをエクスポートしないモジュールを したいです. えば、Arayオブジェクトを して しい を します.

// array.js
if (!Array.prototype.contain) {
  Array.prototype.contain = function(e) {
    // contain implementation
    // ...
  }
}

このモジュールを することができます.バインディングなしでcontain() を します.

import './array.js';
[1,2,3].contain(2); // true

2.7.デフォルトでエクスポート
モジュールはデフォルトのみでエクスポートされます.デフォルトでエクスポートすると しやすくなります.モジュールデフォルトのエクスポートは 、 またはクラスを できます. はsort.jsモジュールのデフォルトのエクスポートです.

// sort.js
export default function(arr) {
  // sorting here
} 

に を する はなく、デフォルトではモジュール を として します.

import sort from sort.js;
sort([2,1,3]);

sort を てください.sort.jsモジュールのデフォルト は、 たちはsort に して できません.
でsort.jsモジュールを し、 デフォルト を します.

// sort.js
export default function(arr) {
  // sorting here
}
export function heapSort(arr) {
  // heapsort
}

つのバインディングを すると、バインディングリストが できます.ルールは の りです.

バインディングはトップ

でなければならないと しました.

デフォルトバインディングは、 ずかっこ

を する があります.

import sort, {heapSort} from './sort.js';
sort([2,1,3]);
heapSort([3,1,2]);

のデフォルトからエクスポートするとasキーワードが できます.

import { default as quicksort, heapSort} from './sort.js';

3.まとめ
この ではES 6モジュールを し、モジュールからバインディングをどのように し、 のモジュールに するかを ぶ.