在 在vue-cli中使用vue-router及vuex的例子 文章中，我们用到了export/import， 这里来总结下它们的用法。
一、export
（一）、语法
下面的nameN均表示的是导出的标识符---用来被其他脚本的import导入
1、不使用花括号{}的情况
// 变量相关
export let name1 , name2 , ... , nameN ; //对var同样适用
export let name1=... , name2=... , ... , nameN; //对var、 const同样适用
// default相关
export default expression;
export default function (...){...}
export default function name1(...){...}
// from相关
export * from ... ;
2、使用花括号｛｝的情况
//变量相关
export { name1 , name2 , ... , nameN };
export { alias1 as name1 , alias2 as name2 , ... , nameN};
// default相关
export { name1 as default , ... };
// from相关
export { name1 ,name2 , ... , nameN } from ... ;
export { import1 as name1 , import2 as name2 , ... , nameN} from ... ;
（二）、导出方式
导出方式分为命名导出和默认导出：
1、命名导出
- a、 命名导出应用场景
如果我们只导出一部分值，我们可以采用命名导出的方式。在导入的时候可以使用相同的名称进行引用； - b、命名导出举例
// my-exports-file.js
export function sayHi (name){
return "Hi" + name
}
const foo =Math.PI+Math.random();
export { foo }
// import-file.js
import { sayHi , foo } from ' my-exports-file.js ' ;
console.log( sayHi("简书作者该账户已被查封") );
console.log( foo ) ;
2、默认导出
- a、 默认导出应用场景
如果只想导出一个简单的值或者想在模块中保留一个候选值，就可以使用默认导出；值得注意的是，每个模块/脚本只能有一个默认导出。默认导出可以是一个函数、一个类或者一个对象； - b、默认导出举例
// my-exports-file.js
export default function sayHi (name){
return "Hi" + name
}
// import-file.js
import sayHi from ' my-exports-file ' ;
console.log( sayHi("简书作者该账户已被查封") );
（三）、注意事项
export 必须导出具有对应关系的变量，下面的写法都是错误的:
// 错误演示
export 1; // 这种导出的内容不是变量是绝对错误的，包括导出表达式，也是绝对错误的
var a = 1;
export a;
function b() {}
export b;
导出接口仅限两种：
a.声明时导出；
b.以对象的形式导出（和解构联系起来）
上面改正后的写法
var a = 1;
export {a};
function b() {}
export { b };
二、import
（一）、导入非默认项语法示例
1、导入整个模块的内容
import * as myExportsFile from "my-exports-file";
2、导入模块的单个成员
import { myMember } from 'my-exports-file'
3、导入模块的多个成员
import { sayHi ,sayHehe } from 'my-exports-file'
4、 导入整个模块的内容，其中一些被显式命名
import myExportsFile ,{ sayHi ,sayHehe } from 'my-exports-file'
//myExportsFile 是 'my-exports-file'模块中的export default 暴露的模块，而 sayHi ,
//sayHehe则只是 'my-exports-file'模块中export暴露的对象中的 sayHi和sayHehe属性
5、导入成员并指定一个方便的别名。
import { reallyReallyLongName as shortName } from 'my-exports-file' ;
6、使用别名导入模块的多个成员；
import {
reallyReallyLongName1 as shortName1,
reallyReallyLongName2 as shortName2
} from 'my-exports-file' ;
7、导入整个模块 使模块副作用，不导入任何绑定;
import 'my-exports-file' ;
（二）、导入默认项语法示例
1、直接导入默认项 （成员）
import myDefault from "my-export-file"
2、导入命名空间
import myDefault , * as myExport from "my-export-file"
// myExport 作为命名空间了
//这种情况下 默认导入项必须最先声明
3、导入已有命名的默认项
import myDefault , { foo ,bar } from "my-export-file" ;
// 这种情况下 默认导入项也必须最先声明
// 一、导入全部
// import * as index from './src/index.js'
// console.log('index',index)
// console.log('index.Module',index.arrayEqual)
// // 二、 导入单个或多个
// import {getNowDate } from './src/index.js'
// console.log(getNowDate())
// // 三、动态引入
// import('./src/index.js').then((module)=>{
// console.log('module',module)
// console.log('module.arrayEqual',module.arrayEqual)
//
//
// })
三、参考资料
1、export MDN
2、import MDN
3、就算遇到ES6和Node中module的坑，也要承认世界将是JavaScript的
*本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢!
