zoukankan      html  css  js  c++  java
  • There are two different types of export, named and default

    export - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

    The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.

    Exported modules are in strict mode whether you declare them as such or not. The export statement cannot be used in embedded scripts.

    Link to sectionSyntax

    export { name1, name2,, nameN };
    export { variable1 as name1, variable2 as name2,, nameN };
    export let name1, name2,, nameN; // also var, const
    export let name1 =, name2 =,, nameN; // also var, const
    export function FunctionName(){...}
    export class ClassName {...}
    
    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 { default } from;
    nameN
    Identifier to be exported (so that it can be imported via import in another script).

    Link to sectionDescription

    There are two different types of export, named and default. You can have multiple named exports per module but only one default export. Each type corresponds to one of the above syntax:

    • Named exports:
      // exports a function declared earlier
      export { myFunction }; 
      
      // exports a constant
      export const foo = Math.sqrt(2);
    • Default exports (function):
      export default function() {}
    • Default exports (class):
      export default class {}

    Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

    But a default export can be imported with any name for example:

    let k; export default k = 12; // in file test.js
    
    import m from './test' // note that we have the freedom to use import m instead of import k, because k was default export
    
    console.log(m);        // will log 12

    The following syntax does not export a default export from the imported module:

    export * from;

    If you need to export the default, write the following instead:

    export {default} from 'mod';

    Link to sectionExamples

    Link to sectionUsing named exports

    In the module, we could use the following code:

    // module "my-module.js"
    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 };

    This way, in another script, we could have:

    //You should use this script in html with the type module ,
    //eg ''<script type="module" src="demo.js"></script>",
    //open the page in a httpserver,otherwise there will be a CORS policy error.
    //script demo.js
    
    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

    Link to sectionUsing the default export

    If we want to export a single value or to have a fallback value for our module, we could use a default export:

    // module "my-module.js"
    export default function cube(x) {
      return x * x * x;
    }

    Then, in another script, it will be straightforward to import the default export:

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

    Note that it is not possible to use varlet or const with export default.

    Link to sectionModule Redirects

    If we want to export default, and star from another module (effectively creating a "redirect"):

    // module "redirect-module.js"
    export {default} from './other-module';
    export * from './other-module';

     

    Link to sectionSpecifications

    SpecificationStatusComment
    ECMAScript 2015 (6th Edition, ECMA-262)
    The definition of 'Exports' in that specification.
    Standard Initial definition.
    ECMAScript Latest Draft (ECMA-262)
    The definition of 'Exports' in that specification.
    Draft  
  • 相关阅读:
    SpringBoot项目部署与服务配置
    JDBC链接oracle已经mysql的测试
    Jedis工具类
    jsp&Sevelet基础详解
    Mysql和Oracle数据库concat()函数
    如何在maven工程中加载oracle驱动
    获取日期的相关方法
    SpringBoot配置Email发送功能
    spring中schedule注解的使用
    新建一个新的spring boot项目
  • 原文地址:https://www.cnblogs.com/rsapaper/p/9576360.html
Copyright © 2011-2022 走看看