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不要同时使用