Skip to content

Commit 00bc25c

Browse files
RobinQuRobinQu
committed
Built Programing-In-Javascript from commit 58792b9 on branch master
1 parent 10e0c10 commit 00bc25c

23 files changed

+3766
-30
lines changed

‎Browser_Scripting/DOM_Scripting/EventAPI.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,8 @@ <h2 id="-">参考文档</h2>
134134
</div>
135135
<div class="right">
136136
<ul class="inline-list">
137-
<li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/c75a6ed/chapters/Browser_Scripting/DOM_Scripting/EventAPI.md">c75a6ed</a></li>
138-
<li>2014-05-22T02:08:09.906Z</li>
137+
<li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/f295f8e/chapters/Browser_Scripting/DOM_Scripting/EventAPI.md">f295f8e</a></li>
138+
<li>2014-05-22T02:11:03.469Z</li>
139139
</ul>
140140
</div>
141141
</footer>

‎Browser_Scripting/Document_Loading/ScriptExecution.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@ <h3 id="-hack">其他Hack</h3>
118118
</div>
119119
<div class="right">
120120
<ul class="inline-list">
121-
<li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/c75a6ed/chapters/Browser_Scripting/Document_Loading/ScriptExecution.md">c75a6ed</a></li>
122-
<li>2014-05-22T02:08:09.906Z</li>
121+
<li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/f295f8e/chapters/Browser_Scripting/Document_Loading/ScriptExecution.md">f295f8e</a></li>
122+
<li>2014-05-22T02:11:03.469Z</li>
123123
</ul>
124124
</div>
125125
</footer>

‎Browser_Scripting/Document_Loading/ScriptTag.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,8 @@ <h3 id="-">测试用例</h3>
157157
</div>
158158
<div class="right">
159159
<ul class="inline-list">
160-
<li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/c75a6ed/chapters/Browser_Scripting/Document_Loading/ScriptTag.md">c75a6ed</a></li>
161-
<li>2014-05-22T02:08:09.906Z</li>
160+
<li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/f295f8e/chapters/Browser_Scripting/Document_Loading/ScriptTag.md">f295f8e</a></li>
161+
<li>2014-05-22T02:11:03.469Z</li>
162162
</ul>
163163
</div>
164164
</footer>

‎JavaScript_Core/ECMAScript/es5.html

Lines changed: 223 additions & 0 deletions
Large diffs are not rendered by default.

‎JavaScript_Core/ECMAScript/es6/es6_api_extension.html

Lines changed: 262 additions & 0 deletions
Large diffs are not rendered by default.

‎JavaScript_Core/ECMAScript/es6/es6_data_types.html

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ES6引入的数据结构 - Javascript编程语言</title>
5+
<meta charset="UTF-8">
6+
<meta name="baidu-site-verification" content="LPyqUhB1p3" />
7+
<meta name="viewport" content="width=device-width">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9+
<meta name="description" content="Javascript编程语言 - 一本开源的Javascript编程指南; An open-sourced Javascript Guide and Tutorial; ES6引入的数据结构 ES6新加入的数据类型有： WeakMap WeakSet Map Set Typed Objects1 Proxy2 Symbol3 Promise4 这些数据结构的支持并不广泛，在写这篇文章的时候。仅有新版本的Firefox和Node v0.11.x以上版本（开启--harmony参数后）支持。 Map 提供传统意义上的Map。支持任意对象作为key。 new Map">
10+
<meta name="keywords" content="Javascript, guide, open-sourced ">
11+
<link rel="stylesheet" type="text/css" href="/style.css" />
12+
<script>
13+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
14+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
15+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
16+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
17+
18+
ga('create', 'UA-313435-11', 'robinqu.me');
19+
ga('send', 'pageview');
20+
21+
</script>
22+
</head>
23+
<body>
24+
<header class="clearfix">
25+
<div class="left back-toc">
26+
<ul class="inline-list">
27+
<li><a href="/">目录</a></li>
28+
29+
<li class="seperator">></li>
30+
<li>JavaScript核心</li>
31+
32+
<li class="seperator">></li>
33+
<li>ECMAScript特性</li>
34+
35+
<li class="seperator">></li>
36+
<li>ECMAScript6</li>
37+
38+
39+
<li class="seperator">></li>
40+
<li class="current"><strong>当前页面</strong></li>
41+
42+
<li>(<a href="https://github.com/RobinQu/Programing-In-Javascript/edit/master/chapters/JavaScript_Core/ECMAScript/es6/es6_data_types.md">编辑</a>)</li>
43+
</ul>
44+
</div>
45+
<div class="right">
46+
<a href="/"><img src="/images/logo.png" alt="Javascript编程语言" width="256" height="50" /></a>
47+
</div>
48+
</header>
49+
<div class="primary">
50+
<h1 id="es6-">ES6引入的数据结构</h1>
51+
<p>ES6新加入的数据类型有：</p>
52+
<ul>
53+
<li>WeakMap</li>
54+
<li>WeakSet</li>
55+
<li>Map</li>
56+
<li>Set</li>
57+
<li>Typed Objects<sup id="fnref1"><a href="#fn1">1</a></sup></li>
58+
<li>Proxy<sup id="fnref2"><a href="#fn2">2</a></sup></li>
59+
<li>Symbol<sup id="fnref3"><a href="#fn3">3</a></sup></li>
60+
<li>Promise<sup id="fnref4"><a href="#fn4">4</a></sup></li>
61+
</ul>
62+
<p>这些数据结构的支持并不广泛，在写这篇文章的时候。仅有新版本的Firefox和Node v0.11.x以上版本（开启<code>--harmony</code>参数后）支持。</p>
63+
<h2 id="map">Map</h2>
64+
<p>提供传统意义上的Map。支持任意对象作为key。</p>
65+
<p><code>new Map(iterable)</code></p>
66+
<p>iteralbe是Array或其他可枚举的对象，其每个元素是key、value的2元数组。</p>
67+
<p>重要的属性和方法：</p>
68+
<ul>
69+
<li>Map.prototype.size</li>
70+
<li>Map.prototype.clear()</li>
71+
<li>Map.prototype.entries()</li>
72+
<li>Map.prototype.forEach(callback, thisArg)</li>
73+
<li>Map.prototype.get(k)</li>
74+
<li>Map.prototype.set(k,v)</li>
75+
<li>Map.prototype.has(k)</li>
76+
<li>Map.prototype.keys()</li>
77+
<li>Map.prototype.values()</li>
78+
</ul>
79+
<h2 id="set">Set</h2>
80+
<p>传统意义上的<code>Set</code>。</p>
81+
<ul>
82+
<li>Set.prototype.size</li>
83+
<li>Set.prototype.add(v)</li>
84+
<li>Set.prototype.clear()</li>
85+
<li>Set.prototype.delete(v)</li>
86+
<li>Set.prototype.entries()</li>
87+
<li>Set.prototype.forEach(callback, thisArg)</li>
88+
<li>Set.prototype.has(v)</li>
89+
<li>Set.prototype.keys()</li>
90+
<li>Set.prototype.values()</li>
91+
</ul>
92+
<h2 id="weakmap">WeakMap</h2>
93+
<p>Weak开头的Set和Map不对key持有引用，不影响GC。因此，他们没有办法对自身entries的key进行直接的枚举。</p>
94+
<p>构造函数和普通的Map相同：</p>
95+
<p><code>new WeakMap(iterable)</code></p>
96+
<ul>
97+
<li>WeakMap.prototype.clear()</li>
98+
<li>WeakMap.prototype.delete(k)</li>
99+
<li>WeakMap.prototype.get(k)</li>
100+
<li>WeakMap.prototype.has(k)</li>
101+
<li>WeakMap.prototype.set(k,v)</li>
102+
</ul>
103+
<h2 id="weakset">WeakSet</h2>
104+
<p><code>new WeakSet(iterable)</code></p>
105+
<ul>
106+
<li>WeakSet.prototype.add(v)</li>
107+
<li>WeakSet.prototype.clear()</li>
108+
<li>WeakSet.prototype.delete(v)</li>
109+
<li>WeakSet.prototype.has(v)</li>
110+
</ul>
111+
<h2 id="typed-objects">Typed Objects</h2>
112+
<p>类似Ruby的Struct的，但是目前没有任何引擎实现。</p>
113+
<h2 id="proxy-objects">Proxy Objects</h2>
114+
<pre><code>var proxy = Proxy(target, handler);
115+
</code></pre><p>将<code>target</code>的函数调用转向到<code>handler</code>之上。目前除了Firefox支持，没有其他任何JavaScript引擎支持。</p>
116+
<h2 id="symbol">Symbol</h2>
117+
<p>笔者还在理解中。目前新版的Chrome和node支持。</p>
118+
<h2 id="prmoise">Prmoise</h2>
119+
<p>原生版本的Promise API，有关Promise的内容，会在另外一篇文章内详细说明： <a href="../../Functional_JavaScript/JavaScript_Promise.html">JavaScript Promise</a>。</p>
120+
<h2 id="proxy">Proxy</h2>
121+
<p>Proxy是JavaScript元编程的一道大门。JavaScript在语言层面无法去重载操作符，但是通过Proxy API，我们可以彻底的修改一个对象的各种行为。这种强大的行为已经在<code>node --harmony</code>和Firefox中支持了。</p>
122+
<p>待补充。可以参考：</p>
123+
<ul>
124+
<li><a href="http://www.slideshare.net/BrendanEich/metaprog-5303821">http://www.slideshare.net/BrendanEich/metaprog-5303821</a></li>
125+
<li><a href="http://soft.vub.ac.be/~tvcutsem/proxies/">http://soft.vub.ac.be/~tvcutsem/proxies/</a></li>
126+
<li><a href="http://ariya.ofilabs.com/2013/07/es6-and-proxy.html">http://ariya.ofilabs.com/2013/07/es6-and-proxy.html</a></li>
127+
</ul>
128+
<hr>
129+
<div class="footnotes">
130+
<ol>
131+
<li id="fn1"><p><a href="http://wiki.ecmascript.org/doku.php?id=harmony:typed_objects">http://wiki.ecmascript.org/doku.php?id=harmony:typed_objects</a></p>
132+
<a href="#fnref1" class="footnoteBackLink" title="Jump back to footnote 1 in the text.">↩</a></li>
133+
<li id="fn2"><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy</a></p>
134+
<a href="#fnref2" class="footnoteBackLink" title="Jump back to footnote 2 in the text.">↩</a></li>
135+
<li id="fn3"><p><a href="http://people.mozilla.org/~jorendorff/es6-draft.html#sec-symbol-constructor">http://people.mozilla.org/~jorendorff/es6-draft.html#sec-symbol-constructor</a></p>
136+
<a href="#fnref3" class="footnoteBackLink" title="Jump back to footnote 3 in the text.">↩</a></li>
137+
<li id="fn4"><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise</a></p>
138+
<a href="#fnref4" class="footnoteBackLink" title="Jump back to footnote 4 in the text.">↩</a></li>
139+
</ol>
140+
</div>
141+
142+
</div>
143+
<footer class="misc clearfix">
144+
<p class="hint">建议在新版的Chrome、Safari、Firefox中阅读</p>
145+
<div class="left">
146+
<ul class="inline-list">
147+
<li><a href="https://github.com/RobinQu/Programing-In-Javascript/">Source</a></li>
148+
<li><a href="https://github.com/RobinQu/Programing-In-Javascript/blob/master/README.md">Contributors</a></li>
149+
<li><a href="https://github.com/RobinQu/Programing-In-Javascript/issues">Issues</a></li>
150+
</ul>
151+
</div>
152+
<div class="right">
153+
<ul class="inline-list">
154+
<li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/f295f8e/chapters/JavaScript_Core/ECMAScript/es6/es6_data_types.md">f295f8e</a></li>
155+
<li>2014-05-22T02:11:03.469Z</li>
156+
</ul>
157+
</div>
158+
</footer>
159+
</body>
160+
</html>

‎JavaScript_Core/ECMAScript/es6/es6_syntax_features.html

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>ES6语法特性 - Javascript编程语言</title>
5+
<meta charset="UTF-8">
6+
<meta name="baidu-site-verification" content="LPyqUhB1p3" />
7+
<meta name="viewport" content="width=device-width">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9+
<meta name="description" content="Javascript编程语言 - 一本开源的Javascript编程指南; An open-sourced Javascript Guide and Tutorial; ES6语法特性 ES6包含了很多万众期待的特性支持： arrow functions const let default function params rest parameters call(…) array(…) class computed properties modules for…of Array comprehensions Generator comprehensions It">
10+
<meta name="keywords" content="Javascript, guide, open-sourced ">
11+
<link rel="stylesheet" type="text/css" href="/style.css" />
12+
<script>
13+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
14+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
15+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
16+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
17+
18+
ga('create', 'UA-313435-11', 'robinqu.me');
19+
ga('send', 'pageview');
20+
21+
</script>
22+
</head>
23+
<body>
24+
<header class="clearfix">
25+
<div class="left back-toc">
26+
<ul class="inline-list">
27+
<li><a href="/">目录</a></li>
28+
29+
<li class="seperator">></li>
30+
<li>JavaScript核心</li>
31+
32+
<li class="seperator">></li>
33+
<li>ECMAScript特性</li>
34+
35+
<li class="seperator">></li>
36+
<li>ECMAScript6</li>
37+
38+
39+
<li class="seperator">></li>
40+
<li class="current"><strong>当前页面</strong></li>
41+
42+
<li>(<a href="https://github.com/RobinQu/Programing-In-Javascript/edit/master/chapters/JavaScript_Core/ECMAScript/es6/es6_syntax_features.md">编辑</a>)</li>
43+
</ul>
44+
</div>
45+
<div class="right">
46+
<a href="/"><img src="/images/logo.png" alt="Javascript编程语言" width="256" height="50" /></a>
47+
</div>
48+
</header>
49+
<div class="primary">
50+
<h1 id="es6-">ES6语法特性</h1>
51+
<p>ES6包含了很多万众期待的特性支持：</p>
52+
<ul>
53+
<li>arrow functions</li>
54+
<li>const</li>
55+
<li>let</li>
56+
<li>default function params</li>
57+
<li>rest parameters</li>
58+
<li>call(…)</li>
59+
<li>array(…)</li>
60+
<li>class</li>
61+
<li>computed properties</li>
62+
<li>modules</li>
63+
<li>for…of</li>
64+
<li>Array comprehensions</li>
65+
<li>Generator comprehensions</li>
66+
<li>Iterators</li>
67+
<li>yield</li>
68+
<li>Template Strings</li>
69+
<li>block-level declaration</li>
70+
<li>destructing</li>
71+
<li>promoise</li>
72+
</ul>
73+
<p>里面众多的特性都是让JavaScript看起来更规范的好东西，但是大部分都没有被广泛支持。我们仅介绍其中已经至少被一种浏览器和<code>node --harmony</code>下支持的。</p>
74+
<p>在写这篇文章的时候，有如下特性是较为广泛支持的：</p>
75+
<ul>
76+
<li>let<sup id="fnref1"><a href="#fn1">1</a></sup></li>
77+
<li>const<sup id="fnref2"><a href="#fn2">2</a></sup></li>
78+
<li>Block-delvel declaration</li>
79+
<li>for-of</li>
80+
<li>yield</li>
81+
</ul>
82+
<p>对，就这么多了。前三个是为了解决变量声明、定义的问题，而最后一个则影响最大。会在单独篇幅中介绍。下文只介绍前三个特性。</p>
83+
<h2 id="let-block-level-declaration">let和block-level declaration</h2>
84+
<ul>
85+
<li><code>var</code> is scoped to the nearest function block (or global if outside a function block)</li>
86+
<li><code>let</code> is scoped to the nearest enclosing block (or global if outside any block),</li>
87+
</ul>
88+
<p>很多文献、书籍都建议将for循环的起始变量<code>i</code>、<code>len</code>等放置到函数作用于的顶部声明，以避免后续变量持续存在所造成的迷惑。</p>
89+
<pre><code>function() {
90+
for(var i=0,len=5;i&lt;len;i++) {
91+
//body
92+
}
93+
console.log(i,len);=&gt; 5,5
94+
}
95+
</code></pre><p>这是因为ES5的JavaScript的不支持块级作用域，变量仅仅被限制到函数作用域内。</p>
96+
<p>注意在node中，你需要同时加入<code>--harmony</code>和<code>--use-strict</code>来启动，才会支持<code>let</code>。否则会报错： <code>SyntaxError: Illegal let declaration outside extended mode</code>。</p>
97+
<p>在ES6内，可以通过let来定义块级作用域的变量：</p>
98+
<pre><code>function() {
99+
for(let i=0,len=5;i&lt;len;i++) {
100+
//body
101+
}
102+
console.log(i,len) // throw Reference Error
103+
}
104+
</code></pre><p>最后一个，函数定义的作用域问题：</p>
105+
<pre><code>function f() { console.log(&#39;I am outside!&#39;); }
106+
(function () {
107+
if(false) {
108+
// What should happen with this redeclaration?
109+
function f() { console.log(&#39;I am inside!&#39;); }
110+
}
111+
112+
f();
113+
}());
114+
</code></pre><p>如上代码，在ES5时代，每个浏览器都会得出不同的结果。但是ES6中，函数定义只在块级作用域内有效，结果很明确。</p>
115+
<h2 id="const-">const关键字</h2>
116+
<p>const关键字定义一个块级作用域的常量变量。</p>
117+
<pre><code>const a = &quot;You shall remain constant!&quot;;
118+
119+
// SyntaxError: Assignment to constant variable
120+
a = &quot;I wanna be free!&quot;;
121+
</code></pre><h2 id="yield">yield</h2>
122+
<p><code>yield</code>后面有一连串有关Generator和Iterator的内容，会在另外一片文章内详细介绍： <a href="../../Functional_JavaScript/JavaScript_Generator.html">JavaScript Generator</a>。</p>
123+
<hr>
124+
<div class="footnotes">
125+
<ol>
126+
<li id="fn1"><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let</a></p>
127+
<a href="#fnref1" class="footnoteBackLink" title="Jump back to footnote 1 in the text.">↩</a></li>
128+
<li id="fn2"><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const</a></p>
129+
<a href="#fnref2" class="footnoteBackLink" title="Jump back to footnote 2 in the text.">↩</a></li>
130+
</ol>
131+
</div>
132+
133+
</div>
134+
<footer class="misc clearfix">
135+
<p class="hint">建议在新版的Chrome、Safari、Firefox中阅读</p>
136+
<div class="left">
137+
<ul class="inline-list">
138+
<li><a href="https://github.com/RobinQu/Programing-In-Javascript/">Source</a></li>
139+
<li><a href="https://github.com/RobinQu/Programing-In-Javascript/blob/master/README.md">Contributors</a></li>
140+
<li><a href="https://github.com/RobinQu/Programing-In-Javascript/issues">Issues</a></li>
141+
</ul>
142+
</div>
143+
<div class="right">
144+
<ul class="inline-list">
145+
<li>Rev <a href="https://github.com/RobinQu/Programing-In-Javascript/tree/f295f8e/chapters/JavaScript_Core/ECMAScript/es6/es6_syntax_features.md">f295f8e</a></li>
146+
<li>2014-05-22T02:11:03.469Z</li>
147+
</ul>
148+
</div>
149+
</footer>
150+
</body>
151+
</html>

0 commit comments

Comments
 (0)