es6 export import

一、

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。

如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

1、

在export命令后面，使用大括号指定所要输出的一组变量

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

export { firstName, lastName, year };

 

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

 

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

 

2、

export default 命令

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。

但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，

就要用到export default命令，为模块指定默认输出。

 

 

默认输出 一个函数。其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

这时就不需要知道原模块输出的函数名。

！！！！！！需要注意的是，这时import命令后面，不使用大括号！！！！！！

// export-default.js
export default function () {
  console.log('foo');
}

// import-default.js
import customName from './export-default';
customName(); // 'foo'

 

export default命令用在非匿名函数前，也是可以的。

函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。

 

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from 'crc32'; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

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

 

一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。

 

有了export default命令，输入模块时就非常直观了，以输入 lodash 模块为例。

如果想在一条import语句中，同时输入默认方法和其他接口，可以写成下面这样。

import _ from 'lodash';

import _, { each, forEach } from 'lodash';

 

 

二、

1、

import命令接受一对大括号，里面指定要从其他模块导入的变量名。

大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

 

import命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本里面，改写接口。

 

/ main.js
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

 

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径。

如果不带有路径，只是一个模块名，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

 

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

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

 

2、整体加载模块 import *

用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

 

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

 

 

 

 

// main.js  整体加载的写法

import * as circle from './circle';

console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

// 不允许运行时改变，下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};