ES6 模組語法——import 命令

使用 export 命令定義了模組的對外介面以後，其他JS檔案就可以透過 import 命令載入這個模組了。

//main.js
    import {firstName, lastName, year} from './profile';//載入 profile.js 檔案，並從中輸入變數

    function setName(element) {
        element.textContent = firstName + '' + lastName;
    }
    //使用 as 關鍵字,將輸入的變數重新命名
    import { lastName as surname } from './profile';
    //from 指定模組檔案的位置,可以是相對路徑也可以是絕對路徑 .js 字尾可以省略,如果只是模組名,必須又配置檔案告訴 JS 引擎該模組的位置
    import {myMethod} from 'util';
    //import 命令具有提升效果,會提升到整個模組的頭部並首先執行
    foo();
    import { foo } from 'my_module';
    //import 是靜態執行,所以不能使用表示式和變數,只有在執行時才能得到結果的語法結構.
    //報錯
    import { 'f' + 'oo' } from 'my_module';
    //報錯
    let module = 'my_module';
    import { foo } from module;
    //報錯
    if (x === 1) {
        import { foo } from 'module1';
    } else {
        import { foo } from 'module2';
    }
    //僅僅執行 lodash 模組，但不會輸入任何值
    import 'lodash';
    //多次重複執行同一 import 語句，只會執行一次 
    import 'lodash';
    import 'lodash';
    //import 語句是 Singleton 模式       
    import { foo } from 'my_module';
    import { bar } from 'my_module';
    //上面兩行相當於下面這一行
    import { foo, bar } from 'my_module';

除了指定載入某個輸出值,還可以使用整體載入(星號*)來指定一個物件,所有輸出值都載入在這個物件上.

import * as circle from './circle';

本作品採用《CC 協議》，轉載必須註明作者和本文連結

ES6 模組語法——import 命令

相關文章