es6模塊化導入導出

模塊化指的就是將一個大程序拆分成若干個互相依賴的小文件,然后在用簡單的方法拼裝起來。

在 ES6 之前，JS沒有模塊化系統，社區制定了一些模塊加載方案

最主要的有 CommonJS（Asynchronous module definition） 和 AMD（common module definition） 兩種。前者用於服務器，后者用於瀏覽器

/*
CommonJS（node遵循該規范）
    ->require.js    引入
    ->module.exports 導出 
   
AMD
    比如 -> require.js
CMD
    比如 -> sea.js
*/

 

ES6 模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量

（CommonJS 模塊就是對象，輸入時必須查找對象屬性）

ES6 模塊不是對象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入

//import {fn} from './xx.js'; 引入模塊
//export function fn(){}  導出模塊

 

模塊可以理解為函數代碼塊的功能,是封裝對象的屬性和方法的javascript代碼,它可以是某單個文件,變量或者函數

在Es6模塊中,無論有沒有加"use strict",都會自動采用嚴格模式

Es6中模塊導入的基本語法

如果想從一個文件(模塊)訪問另一個文件(模塊)的功能,則需要通過import關鍵字在另一個模塊中引入數據

import {標識符1，標識符2} from "本地模塊路徑"

導入單個綁定：

// 只導入一個
 import {sum} from "./example.js"

導入多個綁定：

// 導入多個
import {sum,multiply,time} from "./exportExample.js"

導入整個模塊：

用星號（*）指定一個對象，所有輸出值都加載在這個對象上面

// 導入一整個模塊
import * as example from "./exportExample.js"

如果想為輸入的變量重新取一個名字，import命令要使用as關鍵字，將輸入的變量重命名

import { lastName as surname } from './profile.js';

 

Es6中模塊導出的基本語法

模塊的導出,export關鍵字用於暴露數據,暴露給其他模塊

可以將export放在任何變量,函數或類聲明的前面,從而將他們從模塊導出

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

在export命令后面，使用大括號指定所要輸出的一組變量

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

兩種方式是等價的，第二種方式。應該優先考慮使用第二種這種寫法（在尾部，一眼看清楚輸出了哪些變量）

//導出函數
export function sum(num1,num2){
     return num1+num2;
}
//導出類
export class People{
     constructor(name,age){
        this.name = name;
        this.age = age;
     }
     info(){
        return `${this.name}${this.age}`
     }
}

通常情況下，export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
};

export default命令

export default命令用於指定模塊的默認輸出，一個模塊只能有一個默認輸出

/*第一組*/
export default function crc32() { // 輸出
  // ...
}

import crc32 from 'crc32'; // 輸入

/*第二組*/
export function crc32() { // 輸出
  // ...
};

import {crc32} from 'crc32'; // 輸入

第一組使用export default時，對應的import語句不需要使用大括號

第二組是不使用export default時，對應的import語句需要使用大括號

因此export default命令只能使用一次。所以，import命令后面不用加大括號，因為只可能唯一對應export default命令

export default也可以用來輸出類

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

 

export 與 import 的復合寫法

如果在一個模塊之中，先輸入后輸出同一個模塊，import語句可以與export語句寫在一起

export { foo, bar } from 'my_module';

// 可以簡單理解為
import { foo, bar } from 'my_module';
export { foo, bar };