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 }
并没有实际输出知识对外转发了接口
阮一峰上面还有这几种实例，大家看看理不理解。发表在评论区
1
2
3
跨模块常量
// 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区别
区别
网友评论