涉猎ECMAScript6(ES6/ES2015)模块化

能够写js代码是一回事,能够有效的把代码组织好,改善代码的可读性和易理解就是另外一回事了。ES6提供了模块化的方式来书写代码。传统的代码模块化编写的方式基于闭包,外层函数通过内部的变量或对象返回内部的函数。像这样:

ES6模块化

ES6里面不在需要使用闭包函数的方式来支持模块化,而是提供了专门的语法和函数支持。

①ES6的模块化基于文件,也就是一个js代码文件就是一个模块。目前没有标准支持将这些单个模块文件合并成一个来使用,这就意味着需要单独去加载每个文件,当然这会造成性能问题。这些问题在HTTP/2里面就不在是问题,因为支持了持久化连接,并行传输多个小文件。

②定义的模块不能动态修改,属于定义静态的模块

③ES6模块是单例的,所有导入该模块的地方引用的是同一个实例,如果需要支持多个实例,模块需要提供一些工厂方法。

④在模块里面暴露出来的属性和方法,不仅仅是赋了一个值或引用,实际上绑定到了模块内定义的标识符。这个意思就是模块改变值以后,外部使用模块的地方,对应的变量值会更新。

⑤导入的模块同样是需要加载,不过不用担心性能问题,浏览器或nodejs会提供一个模块加载器,提前扫描引入的模块,加载会在我们使用该模块之前完成。

目前有过不少模块化的标准(CommonJS等),但是ES6的标准我觉得更具有潜力,毕竟是ECMA的拟定的。

 

ES6模块化的两个关键字import,export

1)export:暴露给外部使用的变量,函数等接口,没有标记export的,则是模块内部私有的。在模块里面顶层作用域也不是global,模块里面没有global作用域,也尽量不要在模块里面使用global。

export function foo () {
 //...
}
export var awesome=32;
var bar=[1,2,3];
export {bar};

可以使用as重命名模块成员:export {foo as bar}

export的成员,如果在export代码之后进行了修改,则也会生效到import该模块的地方。

var awesome = 42;
export { awesome };

// later
awesome = 100;//外部引入以后awesome的值

2)import:导入模块

import { foo, bar } from "foo";//"foo" js文件名 {...}指定导入的模块成员

注:我发现目前浏览器对这import和export还不支持

 

class关键字

其实仍然是基于原型的,这点不会变,只是在代码上面看起更像传统类:

类似:

class Foo和function Foo还是有差别的:

①class Foo必须通过new来调用,而function Foo可以作为函数调用

②class Foo不能被hoisted,所以必须先定义后使用,而function Foo会hoisted

③class Foo不会成为window对象的属性,而function Foo则是

super:代表父类 extends:继承

new.target.name:在constructor里返回构函数名

static:定义一个静态函数,有类名直接调用(类似C#)

Symbol.species Constructor Getter:继承一个类,但是constructor使用父类的。

 

本文参考原文:https://github.com/getify/You-Dont-Know-JS

 

javascript
作者:张雪飞
出处:https://zhangxuefei.site/p/1592
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注