Skip to content

Commit a5c825c

Browse files
author
yibuyisheng
committed
conflicts
1 parent 04fb00e commit a5c825c

File tree

2 files changed

+145
-39
lines changed

2 files changed

+145
-39
lines changed

md/5/5.md

Lines changed: 145 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,151 @@ npm 可能最后会支持某一个模块的两个版本,这样就能够为 Nod
107107

108108
## 5.3 其他有用的 ES6 工具和库
109109

110-
* 测试工具(比如 Jasmine 和 mocha )
110+
* 测试工具(比如 Jasmine 和 mocha )可以像原来那样继续使用,因为这些工具最终测试的是转换过后的代码,不需要认识 ES6 代码。 [Babel 的文档](https://babeljs.io/docs/using-babel/#misc)中讲解了如何结合 ES6 代码和各种测试工具。
111+
* 下列的 lint 工具都支持 ES6 ,但是支持程度不一样:
112+
- [JSLint](http://www.jslint.com/) (着重于增强编码实践)
113+
- [JSHint](http://jshint.com/) (着重于编码实践)
114+
- [ESLint](http://eslint.org/) (着重于让开发者实现自己的风格规则)
115+
- [JSCS](http://jscs.info/) (着重于增强代码风格)
116+
* shims/polyfills 使得在 ES5 代码中能够使用到大量的 ECMAScript 6 标准库:
117+
- [es6-shim](https://github.com/paulmillr/es6-shim/)
118+
- [Core.js](https://github.com/zloirock/core-js) ( Babel 中有用到)
119+
* ES6 解析器:
120+
- [Esprima](http://esprima.org/)
121+
- [Acorn](https://github.com/marijnh/acorn)
122+
123+
## 5.4 ES6 的 REPL 工具
124+
125+
现在已经有很多 ES6 的 REPL (命令行)工具了。有几个主要的在线的交互式 REPL 工具:
126+
127+
* [TypeScript Playground](http://www.typescriptlang.org/Playground)
128+
* [Babel REPL](https://babeljs.io/repl/)
129+
* [Traceur Transcoding Demo](http://google.github.io/traceur-compiler/demo/repl.html)
130+
131+
另外, Babel 提供了 [babel-node 工具](http://exploringjs.com/es6/ch_deploying-es6.html#sec_babel-node),使得 Node.js 的 REPL 工具也支持 ES6 。
132+
133+
## 5.5 有不能转换成 ES5 代码的 ES6 特性吗?
134+
135+
一些 ECMAScript 6 特性不能被转换成 ES5 。 ES6 有三种类型的特性:
136+
137+
* 对于已有的特性,提供更好的语法
138+
* 给标准库开发的新功能
139+
* 完全新的特性
140+
141+
下节讲解了每一种类型的特性转换(编译)成 ES5 的难易程度。
142+
143+
### 5.5.1 对于已有的特性,提供更好的语法
144+
145+
对于已经能通过库实现的特性, ES6 提供了更好的语法。举两个例子:
146+
147+
*
148+
* 模块
149+
150+
两者都可以轻松编译成 ES5 。例如,有一个 ES6 类:
151+
152+
```js
153+
class Point {
154+
constructor() {
155+
this.x = x;
156+
this.y = y;
157+
}
158+
toString() {
159+
return `(${this.x}, ${this.y})`;
160+
}
161+
}
162+
```
163+
164+
*松散模式*下, Babel 产生更漂亮的 ES5 代码,代价是不完全符合 ES6 的语义。下面是之前的代码在松散模式下的转换结果:
165+
166+
```js
167+
"use strict";
168+
169+
var _classCallCheck = function (instance, Constructor) {
170+
if (!(instance instanceof Constructor)) {
171+
throw new TypeError("Cannot call a class as a function");
172+
}
173+
};
174+
175+
var Point = (function () {
176+
function Point() {
177+
_classCallCheck(this, Point);
178+
179+
this.x = x;
180+
this.y = y;
181+
}
182+
183+
Point.prototype.toString = function toString() {
184+
return "(" + this.x + ", " + this.y + ")";
185+
};
186+
187+
return Point;
188+
})();
189+
```
190+
191+
### 5.5.2 给标准库开发的新功能
192+
193+
相比于 ES5 , ES6 有更加全面的标准库。增加的功能包括:
194+
195+
* 字符串和数组中新的方法
196+
* Promise
197+
* Map , Set
198+
199+
这些都可以通过第三方库提供。大多数功能(比如 `String.prototype.repeat()` )甚至对于 ES5 来说也很有用。后面有一节列出了几个这样的库。
200+
201+
### 5.5.3 完全新的特性
202+
203+
有一些 ES6 特性是全新的,和已有的特性没有任何关系。这样的特性就无法完全按照语义来转换了。但是其中一些特性可以做一些适当的模拟,例如:
204+
205+
* `let``const` :被转换成 `var` ,并且在必要的时候改掉变量的名字来避免命名冲突。这会生成运行比较快的代码,在实际运行中也没什么问题,但是并不能真正实现像 ES6 中 `const` 的变量不可改变的功能。
206+
* Symbol :转换成拥有唯一 ID 的对象。由于括号操作符会将其转换为字符串,所以可以用做属性键。还有,一些属性枚举函数(比如 `Object.keys()` )必须要增加忽略来自于 symbol 的属性键的功能。
207+
* 生成器:编译成状态机,转换过程很复杂,但是效果不错。例如,生成器函数:
208+
209+
```js
210+
function* gen() {
211+
for(let i=0; i < 3; i++) {
212+
yield i;
213+
}
214+
}
215+
```
216+
217+
转换成如下的 ES5 代码:
218+
219+
```js
220+
var marked0$0 = [gen].map(regeneratorRuntime.mark);
221+
function gen() {
222+
var i;
223+
return regeneratorRuntime.wrap(function gen$(context$1$0) {
224+
while (1) switch (context$1$0.prev = context$1$0.next) {
225+
case 0:
226+
i = 0;
227+
228+
case 1:
229+
if (!(i < 3)) {
230+
context$1$0.next = 7;
231+
break;
232+
}
233+
234+
context$1$0.next = 4;
235+
return i;
236+
237+
case 4:
238+
i++;
239+
context$1$0.next = 1;
240+
break;
241+
242+
case 7:
243+
case "end":
244+
return context$1$0.stop();
245+
}
246+
}, marked0$0[0], this);
247+
}
248+
```
249+
250+
你可以在代码中看到状态机,下一个状态存放在 `context$1$0.next` 中。
251+
252+
访问 Facebook 的再生器库( regenerator library ),获取更多相关信息。
253+
254+
* WeakMap :用一种方式将 key 映射到 value ,不会增加对 key 的引用计数,从而不会阻止垃圾回收器对 key 和 value 的回收。在 ES5 中有一种模拟方法,
111255

112256

113257

md/index.md

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,43 +9,6 @@
99
* 感谢
1010

1111
* I 背景
12-
<<<<<<< HEAD
13-
* 1 [关于 ECMAScript 6 ( ES6 )](./1.md)
14-
* 1.1 [TC39 ( Ecma 技术委员会 39 )](./1.1.md)
15-
* 1.2 [ECMAScript 6 是如何设计的](./1.2.md)
16-
* 1.3 [JavaScript vs ECMAScript](./1.3.md)
17-
* 1.4 [升级到 ES6](./1.4.md)
18-
* 1.5 [ES6 的目标](./1.5.md)
19-
* 1.6 [ES6 特性概览](./1.6.md)
20-
* 1.7 [ECMAScript 简史](./1.7.md)
21-
* 2 [ECMAScript 6 常见问题解答](./2.md)
22-
* 2.1 [当前引擎支持 ES6 情况如何?](./2.1.md)
23-
* 2.2 [如何将 ECMAScript 5 代码升级至 ECMAScript 6 ?](./2.2.md)
24-
* 2.3 [现在学习 ECMAScript 5 还有意义吗?](./2.3.md)
25-
* 2.4 [ES6 臃肿吗?](./2.4.md)
26-
* 2.5 [ES6 规范文档不是很长吗?](./2.5.md)
27-
* 2.6 [ES6 包含了数组生成表达式( Array Comprehension )吗?](./2.6.md)
28-
* 2.7 [ES6 是静态类型的吗?](./2.7.md)
29-
* 2.8 [应该避免使用类吗?](./2.8.md)
30-
* 2.9 [ES6 有`特性`( traits )或者`混入`( mixins )吗?](./2.9.md)
31-
* 2.10 [为什么 ES6 有带 `=>` 的箭头函数,而没有带 `->` 的箭头函数?](./2.10.md)
32-
* 2.11 [在哪里可以找到更多的 ES6 资源?](./2.11.md)
33-
* 3 [一个 JavaScript : 在 ECMAScript 6 中避免版本化](./3.md)
34-
* 3.1 [版本化](./3.1.md)
35-
* 3.2 [严格模式与 ECMAScript 6](./3.2.md)
36-
* 3.3 [结语](./3.3.md)
37-
* 3.4 [深入阅读](./3.4.md)
38-
* 4 [进入 ECMAScript 6 的第一步](./4.md)
39-
* 4.1 [尝试 ECMAScript 6](./4.1.md)
40-
* 4.2 转换工具
41-
* 4.3 其他有用的 ES6 工具和库
42-
* 4.4 ES6 交互式解释器( REPLs )
43-
* 4.5 有 ES6 特性不能转换成 ES5 吗?
44-
* 4.6 示范转换设置
45-
* 4.7 示范设置:通过 webpack 和 babel 处理客户端 ES6
46-
* 4.8 示范设置:通过 Babel 在 Node.js 基础上动态转换 ES6
47-
* 4.9 示范设置:通过 gulp 和 Babel 在 Node.js 上静态转换 ES6
48-
=======
4912
* 1 [关于 ECMAScript 6 ( ES6 )](./1/1.md)
5013
* 1.1 [TC39 ( Ecma 技术委员会 39 )](./1/1.1.md)
5114
* 1.2 [ECMAScript 6 是如何设计的](./1/1.2.md)
@@ -73,7 +36,6 @@
7336
* 3.4 [深入阅读](./3/3.4.md)
7437
* 4 [ECMAScript 6 入门](./4/4.md)
7538
* 5 [部署 ECMAScript 6](./5/5.md)
76-
>>>>>>> gh-pages
7739
* II 数据
7840
* 5 [新的数值和 Math 特性](./5.md)
7941
* 5.1 概览

0 commit comments

Comments
 (0)