es6和node.js基础快速入门-4补充 import和export

es6和node.js基础实战系列，需要一定的js基础，动手实际操作一下会加强理解。现在衍生的很多前端技术都是围绕node.js生态发展，掌握es6,node.js基础知识，才可以继续入门vue.js,element-ui,antd-vue等前端框架。

注释里是笔记总结,再坚持一下，前端知识的大门就会打开了。有疑问留言交流哦。

export正确用法

• 输出变量

export var name = 'admin';

• 输出多个变量

var name = 'admin'; 
var age = 18;
export{name, age};

• 输出函数

export function setName(name){
 name = 'admin';
}

• 输出别名

//export输出的变量就是在原文件中定义的名字，但可以使用as关键字设置别名
export {
 name as v1, //允许使用不同名字输出两次
 name as v2,
 setName as setNameV1
}

import用法

需要注意的是 import是在代码编辑阶段执行的

• 导入变量

//导入from相对路径与绝对路径都可以 .js文件后缀可以省略
//导入的变量名必须与到处的名称保持一致
import {name, age} from './config'; 

• 通过别名导入

import {name as otherName } from './config';

• 其他用法补充

import {name} from './config';
import {age} from './config';
//相同于
import { name, age} from './config';
export {setName, setAge};
import * as setFn from '...';
setFn.setName();
setFn.setAge();
//import会加载且仅加载一次导入的模块
import './config';

export default用法

• export default与export的主要区别是不需要知道导出的具体变量名与导入时不需要{}

//export default
export default function crc32(){};
import crc32 from 'crc32';
//export
export function crc32() {};
import {crc32} from 'crc32';

• export原理如下

var name = 'Mark';
export default name; => export {name as default};
import surname from '...'; => import {default as surname} from '..';

• 一个模块中只能有一个export default默认输出
• export 与 export default深入理解

//拆分
import _ , {each, each as forEach} from '...';
export default function(){};
export function each(){};