• 欢迎光临~

export和export default

开发技术 开发技术 2022-08-04 次浏览
  1. 概述

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

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

  2. export命令

    模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,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的对外接口。

  3. 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的变量,然后系统允许你引入的时候为它去任意名字
    
  4. 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'
    
  5. 简述区别

    • exportexport default均可用于导出常量、函数、文件、模块等
    • 在一个文件或模块中,export、import可以有多个,export default有且仅有一个
    • 通过export方式导出,在导入时要加{},export default则不需要,并可以起任意名称
    • 输出单个值,使用export default
    • 输出多个值,使用export
    • export default与普通的export不要同时使用
程序员灯塔
转载请注明原文链接:export和export default
喜欢 (0)