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

关于ES6模块化

正史上,JavaScript
一贯尚未模块(module)连串,无法将一个大程序拆分成相互看重的小文件,再用轻松的不二法门拼装起来。别的语言都有那项功用,例如Ruby 的require、Python 的import,甚至就连 CSS
都有@import,可是 JavaScript
任何那地方的帮助都并未有,这对开辟大型的、复杂的档期的顺序产生了铁汉障碍。

在nodeJS中,有模块化的方法,使用CommonJS标准能够产生模块化,相当于说,独有在用js进行后端node开辟的时候,技艺动用模块化,前端js仍然特别

在前端大家能够运用requireJS,seaJS来贯彻模块化,可是requireJS也是经过对script标签举行异步导入的艺术来打开,并不是js里自带的语法

小编们也得以利用webpack工具来打开模块化打包,是因为webpack跑在nodeJS中,提起底仍然nodeJS中的模块化

而是在ES6中,大家首先次在js语法中参预了模块化的事物,近日游人如织浏览器都不帮忙,所以说还供给编写翻译

ES6模块化的正规

模块功能主要由几个指令构成: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. 导入

    要是被引进的模块未有暴光,只是一段逻辑代码供给在引进模块里运维的话

    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)
    

相关文章