import export 理解

ES6 关于export和import理解

1. ES6之前JavaScript没有模块体系，相关社区提供了一些加载方案，最主要是两种CommonJs和AMD两种。ES6在语言标准层面实现了，实现了模块功能而且实现的相当简单，成为服务器和浏览器相通用的解决方案

2. ES6模块设计思想是静态化，使编译时确立模块之间关系，以及输入和输出对象

commonJs

上面加载方式就是整体加载fs模块然后生成fs模块对象，通过对象.方法形式进行动态加载

3. ES6不同于上面所说的规范，ES6通过静态加载也就是通过编译时分析文件，静态加载效率更高而且能实现代码检查和宏的概念

export命令

1. export命令用于规定模块对外的接口,有以下两种方式

export导出

大家尽量使用第二种更清晰的导出方法，但是不要误以为第二种是动态导出的对象

2. export 利用as关键字重命名

导出重命名

3. 大家考虑一下为什么出错然后再评论区发表，检验export导出的理解

error1

error2

4. 还有需要注意的是export暴露的是接口，可以通过接口随时获取接口内部实时的值

实时

import理解

1. 通过export暴露的接口就可以通过import命令加载这个模块

获取上个例子暴露出的变量

import后面需要跟着一个大括号，指定从其他模块导入变量名

怎样导入的变量重新分配一个名字

import {myname as othername} from './xx.js' // 需要额外注意 import导入的变量被动态改变的 // 但是如果导入对象可以对属性重新赋值，但是不建议这么做

import 是静态执行的所以

foo(); import { foo } from 'xxx'

上面这个是可以运行的 import 是在编译阶段执行

2. 看看下面这种写法

import 'loadash'

上面代码少了大括号之后会默认执行这个模块。

3. import语法是单例模式

4. 模块整体加载

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

上面的文件可以被整体进行加载采用下面这种方式

import * as circle from './circle';

类似与运行时加载但是不是的是静态分析引入的

5. export default 命令

import 后面不跟大括号的导入的话类似于

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

这一种会是export default 默认导入出来的例如

// 导出匿名函数 export default function () { console.log('foo'); }
// export default 用在非匿名函数前 // export-default.js export default function foo() { console.log('foo'); } // 或者写成 function foo() { console.log('foo'); } export default foo;

我们看一下正常导出和默认导出的 import 不同的方式（起始就是大括号的区别）