365体育官网import命令用于输入任何模块提供的效劳,import命令用于输入任何模块提供的效果

关于ES6模块化

野史上,JavaScript
一向未曾模块(module)体系,不可能将一个大程序拆分成相互倚重的小文件,再用简易的法子拼装起来。其他语言都有这项功用,比如
Ruby 的require、Python 的import,甚至就连 CSS
都有@import,可是 JavaScript
任何这下边的支撑都未曾,这对开发大型的、复杂的项目形成了巨大障碍。

在nodeJS中,有模块化的方法,使用CommonJS规范可以做到模块化,也就是说,唯有在用js举办后端node开发的时候,才能运用模块化,前端js依旧非凡

在前端我们可以应用requireJS,seaJS来落实模块化,不过requireJS也是透过对script标签举办异步导入的不二法门来举办,并不是js里自带的语法

365体育官网,我们也可以动用webpack工具来展开模块化打包,是因为webpack跑在nodeJS中,说到底仍旧nodeJS中的模块化

不过在ES6中,大家先是次在js语法中投入了模块化的东西,最近游人如织浏览器都不补助,所以说还索要编译

关于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)
    
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)

相关文章