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 不同的方式（起始就是大括号的区别）

区别

export default 本质上就是默认导出 default的变量或方法但是系统值允许你默认导出一个

我们来看一下下图导出方式，然后如何利用import导入

如何import

import _, { each, each as forEach } from 'xxxx';

也可以这样默认导出

默认导出

import和export复合写法

export {foo,bar} form 'module'

// 上面那个写法其实就类似于

import { foo,bar } from 'module'

export { foo,bar }

并没有实际输出知识对外转发了接口

阮一峰上面还有这几种实例，大家看看理不理解。发表在评论区

跨模块常量

// constants.js 模块

export const A = 1;

export const B = 3;

export const C = 4;

我们可能会有以下使用场景

配置文件

index.js导出

可以了解下import（）

TypeScript 模块对比

导出

重新导出

全局导入

import "./my-module.js";

jq-ts

Ts与ES6区别

区别