export和export default()

  • 概述

    在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言标准的层面上，实现了模块功能，而且实现的相当简单，完全可以取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

    在ES6中，export和export default都可以用于导出常量、文件、函数、模块等。

  • export命令
    模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其它模块提供的功能。
    一个模块就是一个独立的文件。该文件内部的所有变量，外部无法直接获取。如果外部要获取模块内部的某个变量，就必须使用export关键字输出该变量。
    例如：
    // a.js
    export var str = ‘内容’
    export var number = 0
    export function message(sth){
    return sth
    }

    或
    //a.js
    var str = ‘内容’
    var number = 0
    function message(sth){
    return sth
    }
    export {str,number,message}

    通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。
    //a.js
    var str = ‘内容’
    var number = 0
    function message(sth){
    return sth
    }
    export {
    str as newname1,
    number as newname2,
    message as newname3
    }

    上面代码使用as关键字，重命名了变量str、number、message的对外接口。

  • export default命令
    export default命令用于指定模块的默认输出。一个模块只能有一个默认输出，因此，export default命令只能使用一次。所以，import命令后面不用加大括号。
    一个文件内有且只能有一个export default
    //a.js
    const str = ‘内容’
    export default str

    //在另一个文件中的导入方式
    //b.js
    import strFile from ‘a’
    //导入的时候没有{}
    //本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你引入的时候为它去任意名字

  • import命令
    使用export命令定义了模块的对外接口后，其它JS文件就可以通过import命令加载这个模块。
    //b.js
    import {str,number,message} fron ‘./a’
    //也可以分开写两次，导入的时候带花括号，将每个变量函数名写清楚

    上面代码的import命令，用于加载a.js文件，引入后就可以在b.js中使用a.js文件中的变量、函数、类等。import命令接受一对大括号，里面指定要从其它模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。
    如果想为输入的变量重新去一个名字，import命令要使用as关键字，将输入的变量重命名。
    //b.js
    import {
    str as newname1,
    number as newname2,
    message as newname3
    } from ‘./a’

    import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉JavaScript引擎该模块的位置。
    //import引入一个依赖包，不需要相对路径
    import axios from ‘axios’
    //import引入一个自己写的js文件，是需要相对路径的
    import AppService from ‘./appService’

  • 简述区别

    export与export default均可用于导出常量、函数、文件、模块等
    在一个文件或模块中，export、import可以有多个，export default有且仅有一个
    通过export方式导出，在导入时要加{}，export default则不需要，并可以起任意名称
    输出单个值，使用export default
    输出多个值，使用export
    export default与普通的export不要同时使用

  • export与export default均可用于导出常量、函数、文件、模块等
  • 在一个文件或模块中，export、import可以有多个，export default有且仅有一个
  • 通过export方式导出，在导入时要加{}，export default则不需要，并可以起任意名称
  • 输出单个值，使用export default
  • 输出多个值，使用export
  • export default与普通的export不要同时使用
————————
  • 概述

    在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6在语言标准的层面上，实现了模块功能，而且实现的相当简单，完全可以取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

    在ES6中，export和export default都可以用于导出常量、文件、函数、模块等。

  • export命令
    模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其它模块提供的功能。
    一个模块就是一个独立的文件。该文件内部的所有变量，外部无法直接获取。如果外部要获取模块内部的某个变量，就必须使用export关键字输出该变量。
    例如：
    // a.js
    export var str = ‘内容’
    export var number = 0
    export function message(sth){
    return sth
    }

    或
    //a.js
    var str = ‘内容’
    var number = 0
    function message(sth){
    return sth
    }
    export {str,number,message}

    通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。
    //a.js
    var str = ‘内容’
    var number = 0
    function message(sth){
    return sth
    }
    export {
    str as newname1,
    number as newname2,
    message as newname3
    }

    上面代码使用as关键字，重命名了变量str、number、message的对外接口。

  • export default命令
    export default命令用于指定模块的默认输出。一个模块只能有一个默认输出，因此，export default命令只能使用一次。所以，import命令后面不用加大括号。
    一个文件内有且只能有一个export default
    //a.js
    const str = ‘内容’
    export default str

    //在另一个文件中的导入方式
    //b.js
    import strFile from ‘a’
    //导入的时候没有{}
    //本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你引入的时候为它去任意名字

  • import命令
    使用export命令定义了模块的对外接口后，其它JS文件就可以通过import命令加载这个模块。
    //b.js
    import {str,number,message} fron ‘./a’
    //也可以分开写两次，导入的时候带花括号，将每个变量函数名写清楚

    上面代码的import命令，用于加载a.js文件，引入后就可以在b.js中使用a.js文件中的变量、函数、类等。import命令接受一对大括号，里面指定要从其它模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。
    如果想为输入的变量重新去一个名字，import命令要使用as关键字，将输入的变量重命名。
    //b.js
    import {
    str as newname1,
    number as newname2,
    message as newname3
    } from ‘./a’

    import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉JavaScript引擎该模块的位置。
    //import引入一个依赖包，不需要相对路径
    import axios from ‘axios’
    //import引入一个自己写的js文件，是需要相对路径的
    import AppService from ‘./appService’

  • 简述区别

    export与export default均可用于导出常量、函数、文件、模块等
    在一个文件或模块中，export、import可以有多个，export default有且仅有一个
    通过export方式导出，在导入时要加{}，export default则不需要，并可以起任意名称
    输出单个值，使用export default
    输出多个值，使用export
    export default与普通的export不要同时使用

  • export与export default均可用于导出常量、函数、文件、模块等
  • 在一个文件或模块中，export、import可以有多个，export default有且仅有一个
  • 通过export方式导出，在导入时要加{}，export default则不需要，并可以起任意名称
  • 输出单个值，使用export default
  • 输出多个值，使用export
  • export default与普通的export不要同时使用