HTML5技术

ES6模块化 - 空一座旧城,守一个旧人

字号+ 作者:H5之家 来源:H5之家 2017-12-11 08:02 我要评论( )

关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的

关于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命令用于输入其他模块提供的功能。

  • 暴露
  • 可以export直接暴露出某些对象,可以暴露多个:

    str fn .log('fn') person 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 './modules/empty'

    如果要导入某一个模块中暴露的一些对象的话,注意,不一定非要把其暴露的模块全部引入,导出的对象的名字不能错

    .log(str,person) fn()

    在引入模块中暴露的接口的时候,很可能会产生命名冲突,依赖于在暴露的时候定义别名的话,也不是很安全,所以最好在引入的时候命名别名 如果要引入的模块暴露出来的对象有很多,我们在引入的时候可以放入到一个对象中去使用: A对象不需要自己定义,引入的时候会自动创建

    A .log(A)

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 前后端渲染 - 空一座旧城,守一个旧人

      前后端渲染 - 空一座旧城,守一个旧人

      2017-12-11 10:04

    • 移动端经常出现的兼容问题 - 空一座旧城,守一个旧人

      移动端经常出现的兼容问题 - 空一座旧城,守一个旧人

      2017-12-09 08:01

    • 关于跨域请求 - 空一座旧城,守一个旧人

      关于跨域请求 - 空一座旧城,守一个旧人

      2017-12-09 08:01

    • 2.sass变量、嵌套、混合(mixin)、继承拓展、@import、comment - 空一座旧城,守一个旧人

      2.sass变量、嵌套、混合(mixin)、继承拓展、@import、comment - 空

      2017-12-08 16:01

    网友点评