import,export深刻理解

export

最正常:

var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    export { firstName, lastName, year };

輸出函數或類:

export function multiply(x, y) {
      return x * y;
    };

重命名:

function v1() { ... }
    function v2() { ... }
    
    export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion
    };

動態改變輸出的值:

export var foo = 'bar';
    setTimeout(() => foo = 'baz', 500);
    //上面代碼輸出變量foo，值爲bar，500 毫秒以後變成baz。

多個輸出,import

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}
export function circumference(radius) {
  return 2 * Math.PI * radius;
}


import * as circle from './circle';

console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));

export和export default

理解:
    1.export的時候,單個變量輸出,能夠import變量({area}或者* as circle(circle爲對象))
    2.export default的時候,至關於導出的整個對象,因此不用括號,能夠對象.屬性(直接定義對象名circle(對象))
// 第一組
export default function crc32() { // 輸出
  // ...
}

import crc32 from 'crc32'; // 輸入

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

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


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

export default命令用於指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出，所以export default命令只能使用一次。因此，import命令後面纔不用加大括號，由於只可能惟一對應export default命令。

// 正確
export var a = 1;

// 正確
var a = 1;
export default a;
上面代碼中，export default a的含義是將變量a的值賦給變量default。

import

導入組件中的部分對象

import { stat, exists, readFile } from 'fs';

導入整個對象

import fs from 'fs';
使用的時候
fs.stat
fs.exists
fs.readFile

導入對象重命名

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

import命令輸入的變量都是隻讀的

import命令具備提高效果，會提高到整個模塊的頭部，首先執行

foo();

import { foo } from 'my_module';
//不會報錯

僅僅執行lodash模塊，可是不輸入任何值.代碼加載了兩次lodash，可是隻會執行一次。

import 'lodash';
import 'lodash';