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));