ES6 學習筆記四

zs4336發表於2019-11-09
筆記

MktpDJ

在建立JavaScript模組時，export 語句用於從模組中匯出函式、物件或原始值，以便其他程式可以通過 import 語句使用它們

Export

1、export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能
2、無論是否宣告，匯出的模組都處於嚴格模式。 export語句不能用在嵌入式指令碼中
3、export 命令可以出現在模組的任何位置

一個模組就是一個JS檔案,該檔案內的所有變數，外部無法直接讀取。要想希望讀取該模組內的某一變數的話，該怎麼辦？那就需要在模組內部使用export關鍵字，輸出某些變數。
那麼問題來了怎麼使用呢？我們知道export可以匯出函式物件或者原始值,下面就瞭解一下正確姿勢。

匯出單個特性

舉例：某些情況下我們定義一些常量提供給外部使用

    //constant.js
    export const APP_SCENE = 'dev';
    export const HOST_NAME = 'http://www.dev.com';

錯誤的寫法：介面名與模組內部變數之間，沒有建立一一對應的關係

    const APP_SCENE = 'dev';
    const HOST_NAME = 'http://www.dev.com';
    export APP_SCENE;
    export HOST_NAME;

匯出列表

舉例：我們在做專案的時候會提供一些公共函式

    //util.js
    let array_max = arr => Math.max(...arr);
    let array_min = arr => Math.min(...arr);
    let array_chunk = (arr,size) => Array.from(
            {length:Math.ceil(arr.length/size)},
            (v,i)=>arr.slice(i * size, i * size + size)
        );
    export {array_max,array_min,array_chunk};

推薦在檔案尾部使用這種方式，這樣模組匯出了哪些變數可以一目瞭然

重新命名匯出

舉例：上列情況下，看著下劃線彆扭，想以駝峰式的名字

    export {array_max as arrayMax,array_min as arrayMin,array_chunk as arrayChunk};

as的實質就是將匯出的介面和模組內部的變數建立一一對應關係

匯出預設值

1、在一個檔案或模組中，export、import 可以有多個，export default 僅有一個
2、export default 中的 default 是對應的匯出介面變數
3、通過 export 方式匯出，在匯入時要加{ }，export default 則不需要

舉例： vue 的元件化

    //component.vue
    export default {
        el:'#app',
        props:{
            names:{
                type:Array,
                default(){
                  return [];  
                },
            },
        },
        data(){
          return {
              message:'super hero',
          }  
        },
        methods:{
            sayLikeYou:() => 'like you',
        },
    }
Import
  • 只讀屬性：不允許在載入模組的指令碼里面，改寫介面的引用指向，即可以改寫 import 變數型別為物件的屬性值，不能改寫 import 變數型別為基本型別的值。
  • 單例模式：多次重複執行同一句 import 語句，那麼只會執行一次，而不會執行多次。import 同一模組，宣告不同介面引用，會宣告對應變數，但只執行一次 import
  • import 命令會提升到整個模組的頭部，首先執行

根據我們上面定義的三個檔案 ,我們使用 import 功能

    import {APP_SCENE,HOST_NAME} from 'constant.js'
    import {array_chunk} from 'util.js'
    import component from 'component.vue'

    //other code

趁還沒掉光，趕緊給每根頭髮起個名字吧~

相關文章