zoukankan      html  css  js  c++  java
  • 【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作为组件

     
    应用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

  • 相关阅读:
    【BZOJ 4581】【Usaco2016 Open】Field Reduction
    【BZOJ 4582】【Usaco2016 Open】Diamond Collector
    【BZOJ 4580】【Usaco2016 Open】248
    【BZOJ 3754】Tree之最小方差树
    【51Nod 1501】【算法马拉松 19D】石头剪刀布威力加强版
    【51Nod 1622】【算法马拉松 19C】集合对
    【51Nod 1616】【算法马拉松 19B】最小集合
    【51Nod 1674】【算法马拉松 19A】区间的价值 V2
    【BZOJ 2541】【Vijos 1366】【CTSC 2000】冰原探险
    【BZOJ 1065】【Vijos 1826】【NOI 2008】奥运物流
  • 原文地址:https://www.cnblogs.com/websmile/p/8204148.html
Copyright © 2011-2022 走看看