ES6 中import 命令

  • ES6 中import 命令已关闭评论
  • A+
所属分类:ES 6 JavaScript Web

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