【ES6】export和important使用区别
export命令
export { name1, name2, …, nameN }; export { variable1 as name1, variable2 as name2, …, nameN }; export let name1, name2, …, nameN; // also var, function export let name1 = …, name2 = …, …, nameN; // also var, const export default expression; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { name1 as default, … }; export * from …; export { name1, name2, …, nameN } from …; export { import1 as name1, import2 as name2, …, nameN } from …;
export命令 注意事项
1.使用export default命令,默认输出时,important命令可以为该匿名函数指定任意名字
// export-default.js export default function () { console.log('foo'); }
// import-default.js import customName from './export-default';
2.使用export default时,对应的import语句不需要使用大括号否则对应的import语句需要使用大括号
// 第一组 export default function crc32() { // 输出 // ... } import crc32 from 'crc32'; // 输入 // 第二组 export function crc32() { // 输出 // ... }; import {crc32} from 'crc32'; // 输入
3.export defaut后面不能跟变量声明语句,因为export default
命令的本质是将后面的值,赋给default
变量,所以可以直接将一个值写在export default
之后。
// 正确 export var a = 1; // 正确 var a = 1; export default a; // 错误 export default var a = 1;
// 正确 export default 42; // 报错 export 42;
4.export命令规定的是对外接口,必须与模块名字一 一对应,但是可以通过as关键字更名
//与模块变量的名字一 一对应 function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion }; //对外接口 //错误写法 // 报错 export 1; // 报错 var m = 1; export m; //正确写法 // 写法一 export var m = 1; // 写法二 var m = 1; export {m}; // 写法三 var n = 1; export {n as m};
import命令
import defaultExport from "module-name"; import * as name from "module-name"; import { export } from "module-name"; import { export as alias } from "module-name"; import { export1 , export2 } from "module-name"; import { export1 , export2 as alias2 , [...] } from "module-name"; import defaultExport, { export [ , [...] ] } from "module-name"; import defaultExport, * as name from "module-name"; import "module-name";
import命令注意事项
1.作用域提前
foo();
import { foo } from 'my_module';
2.import命令是静态执行,不能使用表达式和变量
// 报错 import { 'f' + 'oo' } from 'my_module'; // 报错 let module = 'my_module'; import { foo } from module; // 报错 if (x === 1) { import { foo } from 'module1'; } else { import { foo } from 'module2'; }
范例:
应用1:引入某个vue作为组件
![](https://images2018.cnblogs.com/blog/880812/201806/880812-20180612165926491-1253650685.png)
应用2:
import "@/styles/skill/index.scss"; import index from "@/utils/skill/index.js"; export default { ...index };
相关资料:https://www.cnblogs.com/diligenceday/p/5503777.html
http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
作者:smile.轉角
QQ:493177502
作者:smile.轉角
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.
欢迎关注我,一起进步!扫描下方二维码即可加我QQ
![](https://www.cnblogs.com/images/cnblogs_com/websmile/1492407/t_smile%E8%BD%AC%E8%A7%92.jpg)