美文网首页
ES6 export注意事项

ES6 export注意事项

作者: 闲杂人等 | 来源:发表于2019-03-26 15:27 被阅读0次

    在创建JavaScript模块时,export 语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过 import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ,导入的模块都运行在严格模式下。在浏览器中,import 语句只能在声明了 type="module" 的 script 的标签中使用。") 语句使用它们。参见MDN

    export

    先解决export错误的写法

    错误写法

    //编译不通过
    var m = 1;
    export m;
    //改为 以下形式可通过
    export {m}
    //对应的import要写成import {m} from './export.js'
    

    默认导出时要注意:不能使用 var、let 或 const 用于导出默认值 export default。

    怎么导出?

    1. 命名导出:使用import命令的时候,用户需要知道所要加载的变量名或函数名
    //导出函数
    function cube(x) {
      return x * x * x;
    }
    导出常量
    const foo = Math.PI + Math.SQRT2;
    //导出变量
    var graph = {
        options: {
            color:'white',
            thickness:'2px'
        },
        draw: function() {
            console.log('From graph draw function');
        }
    }
    export { cube, foo, graph };
    
    \\在另一个模块中导入:注意大括号
    import { cube, foo, graph } from 'my-module';
    graph.options = {
        color:'blue',
        thickness:'3px'
    }; 
    graph.draw();
    console.log(cube(3)); // 27
    console.log(foo);    // 4.555806215962888
    
    1. 默认导出:使用import命令的时候,用户不需要知道所要加载的变量名或函数名
      如果我们要导出一个值或模块中的返回值,就可以使用默认导出:
    // module "my-module.js"
    export default function cube(x) {
      return x * x * x;
    }
    

    然后,在另一个脚本中,可以直接导入默认导出:

    // module "my-module.js"
    import cube from 'my-module';
    console.log(cube(3)); // 27​​​​​
    

    不可以的写法

    //可改为 const a = 1; export default a;
    export default const a = 1;
    //export default [const|let|var] variable = xxx 的方式均不可
    
    

    注意,不能使用 var、let 或 const 用于导出默认值 export default。

    相关文章

      网友评论

          本文标题:ES6 export注意事项

          本文链接:https://www.haomeiwen.com/subject/xtbwvqtx.html