ES 6モジュール化の導入とエクスポート

10982 ワード

JavaScript

ES 6モジュール化の導入とエクスポート
エクスポートの方法

は、export { , , }を介して定義済みのオブジェクト

を導出する.

export let num = 100このような形で変数、関数、またはクラス

を導出する.

export default | | から導出され、各jsファイルはこのような形式でしかエクスポートできません.導入された場所は自由に

と命名できます.
インポートの方法

一つの導入import { , , } from "./aaa.js"

を全部導入するには、別名import * as from "./aaa.js"， .

が必要です.
注意

HTMLファイルにjsファイルを導入するには、type="module"

を設定する必要があります.
index.

<script src="aaa.js" type="module">script>
<script src="bbb.js" type="module">script>
<script src="mmm.js" type="module">script>

aa.js

let name = '  ';
let age = 25;
let flag = true;
function sum(num1, num2) {
    return num1 + num2
}
if (flag) {
    console.log(sum(20, 30));
}

//     1
export {
    flag,
    sum
}
//     2
export let num1 = 1000;
export let height = 1.88;

//     / 
export function mul(num1, num2) {
    return num1 * num2;
}

export class Person {
    age = '18 ';
    run() {
        console.log('   ');
    }
}
// export default ,                   ,           
const address = '  ';
export default address;

bb.js

let name = '  ';
let flag = false;

mmm.js

//   
import {flag, sum, num1, height, Person, mul} from "./aaa.js";

if (flag) {
    console.log('   ');
}

console.log(num1);
console.log(height);
console.log(sum(num1, height));
console.log(mul(100, 200));
let p = new Person;
console.log(p.age);
p.run();

import addr from "./aaa.js";

console.log(addr);

//     
import * as aaa from "./aaa.js"

aaa.mul()

関数の練習(確率イベント、乱数、偶数の合計)