ES6的module语法--export

来源:互联网 发布:linux 限制用户登录 编辑:程序博客网 时间:2024/05/20 17:10

    历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

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

ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。——《es6入门》

    1、模块功能主要由两个命令构成:exportimportexport命令用于暴露本模块,import命令用于引入某个模块。

    2、模块内部的所有变量都不能被外部读取,所以需要使用export命令

var Name = 'Michael';var Sex = 'Jackson';var year = 1994;export {firstName, lastName, year};


    3、export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

// 报错export 1;// 报错var m = 1;export m;


注:面两种写法都会报错,因为没有提供对外的接口。第一种写法直接输出1,第二种写法通过变量m,还是直接输出1。1只是一个值,不是接口。正确的写法是下面这样。

// 写法一export var m = 1;// 写法二var m = 1;export {m};// 写法三var n = 1;export {n as m};    //同样function和class也必须遵守这样的写法。

      4as是重命名关键字

function func1(){};function func2(){};export {   func1 as function1,   //将func1命名为function1   func2 as function2    //将func2命名为function2};
   

     5、export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错(import也同样)。

这是因为处于条件码块之中,就无法完成静态优化了,违背了ES6模块的初衷。

function foo(){ export default 'bar'}foo()
因为export处于函数模块作用域中,所以会报错。
  

原创粉丝点击