ES6 中import 命令

ES6 中引入了模塊功能，模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其他模塊提供的功能。

一.import 命令

1.import命令作用

• ① ES6中引入了模塊的概念，一個模塊就是一個獨立的JS文件。該文件內部的所有變量，外部無法獲取。
• ② 使用export命令定義了模塊的對外接口以後，其他 JS 文件就可以通過import命令加載這個模塊。

2.import的定義方式

1. import的定義方式，大括號中指定要從其他模塊導入的變量名，與被導入模塊對外接口的名稱相同。

2. import後的from指定模塊的具體位置。

   //一. 使用{}
   // main.js
   import { firstName, lastName, year } from './profile.js';
   
   function setName(element) {
     element.textContent = firstName + ' ' + lastName;
   }
   
   //二. 導入單個
   import m from './model.js'
   

3. 在import後使用as爲導入變量重新命名。

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

4. 若在導入是from後不添加絕對位置，且不添加模塊後綴，例如.js，必須有配置文件，告訴 JavaScript 引擎該模塊的位置。

   import {myMethod} from 'util';
   

二.import 命令整體加載

1. 除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對象上面。

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

   // main.js 普通加載
   import { area, circumference } from './circle';
   
   console.log('圓面積：' + area(4));
   console.log('圓周長：' + circumference(14));	
   

   //使用*統一加載
   import * as circle from './circle';
   
   console.log('圓面積：' + circle.area(4));
   console.log('圓周長：' + circle.circumference(14));