import命令用于输入任何模块提供的成效

ES陆模块化的正式

模块作用主要由四个指令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入任何模块提供的效益。

  1. 暴露

能够export直接暴揭露有些对象,能够暴光多少个:

    //暴露多个接口 在定义的时候暴露
    export let str = 'abcd'
    export  let fn = function(){
        console.log('fn')
    }
    export let person = {
        name:'二狗'
    }

    //暴露多个接口,在{}里放入要暴露的对象
    export {str,fn,person}

因为直接暴露的对象在引入的时候名字不能改变,可能会导致在引入的模块中造成命名冲突
可以在暴露的时候通过as来定义别名

    export {str as a_str,fn as a_fn,person as a_person}

在暴露对象的时候,如果只有一个,可以default暴露,在引入的时候叫啥都行,也不用加{}

    export default fn

default只能暴露一个东西,如果我们有一个是defualt暴露的,还有几个是具名暴露

    export default str
    export {fn,person}

引入:

    import abc,{fn,person} from './modules/module_a'//abc就是上面的str
  1. 导入

    1经被引入的模块未有暴露,只是一段逻辑代码供给在引进模块里运营的话

    import './modules/empty'
    

    假设要导入某一个模块中揭穿的部分对象的话,注意,不自然非要把其揭破的模块全部引进,导出的靶子的名字不能够错

    import {str,fn,person} from './modules/module_a.js'
    console.log(str,person)
    fn()
    

    在引入模块中展露的接口的时候,非常大概会生出命名争辩,依赖于在爆出的时候定义别称的话,也不是很安全,所以最棒在引进的时候命名小名

    import {str as a_str,fn as a_fn,person as a_person} from './modules/module_a.js'
    

    只要要引进的模块暴表露来的靶子有无数,大家在引入的时候可以放入到一个指标中去行使:
    A对象无需团结定义,引入的时候会活动成立

    import * as A from './modules/module_a'
    console.log(A)
    

关于ES6模块化

历史上,JavaScript
一贯未曾模块(module)种类,不恐怕将三个大程序拆分成互相依赖的小文件,再用简易的艺术拼装起来。其余语言都有那项功效,举例Ruby 的require、Python 的import,以致就连 CSS
都有@import,可是 JavaScript
任何那上边的支撑都未曾,那对开拓大型的、复杂的系列产生了赫赫障碍。

在nodeJS中,有模块化的不2秘技,使用CommonJS规范能够实现模块化,也等于说,唯有在用js实行后端node开辟的时候,技能利用模块化,前端js照旧十分

在前者我们得以利用requireJS,seaJS来落到实处模块化,不过requireJS也是由此对script标签进行异步导入的章程来进行,并不是js里自带的语法

咱俩也足以选拔webpack工具来拓展模块化打包,是因为webpack跑在nodeJS中,聊到底依旧nodeJS中的模块化

可是在ES6中,大家率先次在js语法中参与了模块化的事物,近些日子广大浏览器都不帮忙,所以说还索要编写翻译