Hello, I am Marijn and this is my home page.
89 | `），会包含一些额外信息，其形式是`name="value"`这种键值对，我们称之为属性。在本例中，使用属性`href="http://eloquentjavascript.net"`指定链接的目标，其中`href`表示“超文本链接（Hypertext Reference）”。
102 |
103 | 某些类型的标签不会包含任何元素，这种标签不需要闭合。元数据标签``就是一个例子。
104 |
105 | > 译者注：最好还是这样闭合它们：``。
106 |
107 | 尽管 HTML 中尖括号有特殊含义，但为了在文档的文本中包含这些符号，可以引入另外一种形式的特殊标记方法。普通文本中的起始尖括号写成`<`（less than），而闭合尖括号写成`>`（greater than）。在 HTML 中，我们将一个`&`字符后跟着一个单词和分号（`;`）这种写法称为一个实体，浏览器会使用实体编码对应的字符替换它们。
108 |
109 | 与之类似的是 JavaScript 字符串中反斜杠的使用。由于 HTML 中的实体机制赋予了`&`特殊含义，因此我们需要使用`&`来表示一个`&`字符。在属性的值（包在双引号中）中使用`"`可以插入实际的引号字符。
110 |
111 | HTML 的解析过程容错性非常强。当应有的标签丢失时，浏览器会重新构建这些标签。标签的重新构建已经标准化，你可以认为所有现代浏览器的行为都是一致的。
112 |
113 | 下面的文件与之前版本显示效果相同：
114 |
115 | ```html
116 |
117 |
118 |
119 | My home page
120 |
121 | My home page
122 | Hello, I am Marijn and this is my home page.
123 |
I also wrote a book! Read it
124 | here.
125 | ```
126 |
127 | ``、`
`和``标签可以完全丢弃。浏览器知道``和``属于头部，而`<h1>`属于主体。此外，我再也不用明确关闭某个段落，因为新段落开始或文档结束时，浏览器会隐式关闭段落标签。目标链接两边的引号也可以丢弃。
128 |
129 | 本书的示例通常都会省略`<html>`、`<head>`和`<body>`标签，以保持源代码简短，避免太过杂乱。但我会明确关闭所有标签并在属性两旁包含引号。
130 |
131 | 本书也会经常忽略`doctype`和`charset`声明。这并不是鼓励大家省略它们。当你忘记它们时，浏览器往往会做出荒谬的事情。 您应该认为`doctype`和`charset`元数据隐式出现在示例中，即使它们没有实际显示在文本中。
132 |
133 | ## HTML 和 JavaScript
134 |
135 | 对于本书来说，最重要的一个 HTML 标签是`<script>`。该标签允许我们在文档中包含一段 JavaScript 代码。
136 |
137 | ```html
138 | <h1>Testing alert</h1>
139 | <script>alert("hello!");</script>
140 | ```
141 |
142 | 当浏览器在读取 HTML 时，一旦遇到`<script>`标签就会执行该代码。这个页面在打开时会弹出一个对话框 - `alert`函数类似`prompt`，因为它弹出一个小窗口，但只显示一条消息而不请求输入。
143 |
144 | 在 HTML 文档中包含大程序是不切实际的。`<script>`标签可以指定一个`src`属性，从一个 URL 获取脚本文件（包含 JavaScript 程序的文本文件）。
145 |
146 | ```html
147 | <h1>Testing alert</h1>
148 | <script src="code/hello.js"></script>
149 | ```
150 |
151 | 这里包含的文件`code/hello.js`是和上文中相同的一段程序，`alert("hello")`。当一个页面将其他 URL 引用为自身的一部分时（比如图像文件或脚本），网页浏览器将会立即获取这些资源并将其包含在页面中。
152 |
153 | 即使`script`标签引用了一个文本文件，且并未包含任何代码，你也必须使用`</script>`来闭合标签。如果你忘记了这点，浏览器会将剩余的页面会作为脚本的一部分进行解析。
154 |
155 | 你可以在浏览器中加载ES模块（参见第 10 章），向脚本标签提供`type ="module"`属性。 这些模块可以依赖于其他模块，通过将相对于自己的 URL 用作`import`声明中的模块名称。
156 |
157 |
158 | 某些属性也可以包含 JavaScript 程序。下面展示的`<button>`标签（显示一个按钮）有一个`onclick`属性。该属性的值将在点击按钮时运行。
159 |
160 | ```html
161 | <button onclick="alert('Boom!');">DO NOT PRESS</button>
162 | ```
163 |
164 | 需要注意的是，我们在`onclick`属性的字符串中使用了单引号，这是因为我们在使用了双引号来引用整个属性。我们也可以使用`"`。
165 |
166 | ## 沙箱
167 |
168 | 直接执行从因特网中下载的程序存在潜在危险。你不了解大多数的网页开发者，他们不一定都心怀善意。一旦运行某些不怀好意的人提供的程序，你的电脑可能会感染病毒，这些程序还会窃取数据会并盗走账号。
169 |
170 | 但网络的吸引力就在于你可以浏览网站，而不必要信任所有网站。这就是为什么浏览器严重限制了 JavaScript 程序的能力—— JavaScript 无法查看电脑中的任何文件，也无法修改与其所在页面无关的数据。
171 |
172 | 我们将这种隔离程序运行环境的技术称为沙箱。以该思想编写的程序在沙箱中运行，不会对计算机造成任何伤害。但是你应该想象，这种特殊的沙箱上面有一个厚钢筋笼子，所以在其中运行的程序实际上不会出去。
173 |
174 | 实现沙箱的难点是：一方面我们要给予程序一定的自由使得程序能有实际用处，但又要限制程序，防止其执行危险的行为。许多实用功能（比如与服务器通信或从剪贴板读取内容）也会存在问题，有些侵入者可以利用这些功能来侵入你的计算机。
175 |
176 | 时不时会有一些人想到新方法，突破浏览器的限制，并对你的机器造成伤害，从窃取少量的私人信息到掌握执行浏览器的整个机器。浏览器开发者的对策是修补漏洞，然后一切都恢复正常。直到下一次问题被发现并广为传播之前，某些政府或秘密组织可以私下利用这些漏洞。
177 |
178 | ## 兼容性与浏览器之争
179 |
180 | 在 Web 技术发展的早期，一款名为 Mosaic 的浏览器统治了整个市场。几年之后，这种平衡被 Netscape 公司打破，随后又被微软的 Internet Explorer 排挤出市场。无论什么时候，当一款浏览器统治了整个市场，浏览器供应商就会觉得他们有权利单方面为网络研发新的特性。由于大多数人都使用相同的浏览器，因此网站会开始使用这些独有特性，也就不再考虑其他浏览器的兼容性问题了。
181 |
182 | 这是兼容性的黑暗时代，我们通常称之为浏览器之争。网络开发者总是为缺乏统一的 Web 标准，而需要去考虑两到三种互不兼容的平台而感到烦恼。让事情变得更糟糕的是 2003 年左右使用的浏览器充满了漏洞，当然不同浏览器的漏洞都不一样。网页编写者的生活颇为艰辛。
183 |
184 | Mozilla Firefox，作为 Netscape 浏览器的非盈利性分支，在20世纪初末期开始挑战 Internet Explorer 的霸主地位。因为当时微软并未特别关心与其竞争，导致 Firefox 迅速占领了很大的市场份额。与此同时，Google 发布了它的 Chrome 浏览器，而 Apple 的 Safari 也得到普及，导致现在成为四个主要选手的竞争，而非一家独大。
185 |
186 | 新的参与者对标准有着更认真的态度，和更好的工程实践，为我们减少了不兼容性和错误。 微软看到其市场份额极速下降，在其 Edge 浏览器中采取了这些态度，取代了 Internet Explorer。 如果您今天开始学习网络开发，请认为自己是幸运的。 主流浏览器的最新版本行为非常一致，并且错误相对较少。
187 |
188 | 这并不是说就没有问题了。某些使用网络的人，出于惰性或公司政策，被迫使用旧版本的浏览器。直到这些浏览器完全退出市场之前，为旧版本浏览器编写网站仍需要掌握很多不常见的特性，了解旧浏览器的缺陷和特殊之处。本书不会讨论这些特殊的特性，而着眼于介绍现代且健全的网络程序设计风格。
189 |
--------------------------------------------------------------------------------
/404.html:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: /404.html
3 | ---
4 | <script>window.location.href = '/';</script>
5 |
--------------------------------------------------------------------------------
/5.md:
--------------------------------------------------------------------------------
1 | ## 五、高阶函数
2 |
3 | > 原文：[Higher-Order Functions](http://eloquentjavascript.net/05_higher_order.html)
4 | >
5 | > 译者：[飞龙](https://github.com/wizardforcel)
6 | >
7 | > 协议：[CC BY-NC-SA 4.0](http://creativecommons.org/licenses/by-nc-sa/4.0/)
8 | >
9 | > 自豪地采用[谷歌翻译](https://translate.google.cn/)
10 | >
11 | > 部分参考了[《JavaScript 编程精解（第 2 版）》](https://book.douban.com/subject/26707144/)
12 |
13 | > Tzu-li and Tzu-ssu were boasting about the size of their latest programs. ‘Two-hundred thousand lines,’ said Tzu-li, ‘not counting comments!’ Tzu-ssu responded, ‘Pssh, mine is almost a million lines already.’ Master Yuan-Ma said, ‘My best program has five hundred lines.’ Hearing this, Tzu-li and Tzu-ssu were enlightened.
14 | >
15 | > Master Yuan-Ma，《The Book of Programming》
16 | >
17 | > There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies.
18 | >
19 | > C.A.R. Hoare，1980 ACM Turing Award Lecture
20 |
21 | 
22 |
23 | 开发大型程序通常需要耗费大量财力和物力，这绝不仅仅是因为构建程序所花费时间的问题。大型程序的复杂程度总是很高，而这些复杂性也会给开发人员带来不少困扰，而程序错误或 bug 往往就是这些时候引入的。大型程序为这些 bug 提供了良好的藏身之所，因此我们更加难以在大型程序中找到它们。
24 |
25 | 让我们简单回顾一下前言当中的两个示例。其中第一个程序包含了 6 行代码并可以直接运行。
26 |
27 | ```js
28 | let total = 0, count = 1;
29 | while (count <= 10) {
30 | total += count;
31 | count += 1;
32 | }
33 | console.log(total);
34 | ```
35 |
36 | 第二个程序则依赖于外部函数才能执行，且只有一行代码。
37 |
38 | ```js
39 | console.log(sum(range(1, 10)));
40 | ```
41 |
42 | 哪一个程序更有可能含有 bug 呢？
43 |
44 | 如果算上`sum`和`range`两个函数的代码量，显然第二个程序的代码量更大。不过，我仍然觉得第二个程序包含 bug 的可能性比第一个程序低。
45 |
46 | 之所以这么说的原因是，第二个程序编写的代码很好地表达了我们期望解决的问题。对于计算一组数字之和这个操作来说，我们关注的是计算范围和求和运算，而不是循环和计数。
47 |
48 | `sum`和`range`这两个函数定义的操作当然会包含循环、计数和其他一些操作。但相比于将这些代码直接写到一起，这种表述方式更为简单，同时也易于避免错误。
49 |
50 | ## 抽象
51 |
52 | 在程序设计中，我们把这种编写代码的方式称为抽象。抽象可以隐藏底层的实现细节，从更高（或更加抽象）的层次看待我们要解决的问题。
53 |
54 | 举个例子，比较一下这两份豌豆汤的食谱：
55 |
56 | 按照每人一杯的量将脱水豌豆放入容器中。倒水直至浸没豌豆，然后至少将豌豆浸泡 12 个小时。将豌豆从水中取出沥干，倒入煮锅中，按照每人四杯水的量倒入水。将食材盖满整个锅底，并慢煮 2 个小时。按照每人半个的量加入洋葱，用刀切片，然后放入豌豆中。按照每人一根的量加入芹菜，用刀切片，然后放入豌豆当中。按照每人一根的量放入胡萝卜，用刀切片，然后放入豌豆中。最后一起煮 10 分钟以上即可。
57 |
58 | 第二份食谱：
59 |
60 | 一个人的量：一杯脱水豌豆、半个切好的洋葱、一根芹菜和一根胡萝卜。
61 |
62 | 将豌豆浸泡 12 个小时。按照每人四杯水的量倒入水，然后用文火煨 2 个小时。加入切片的蔬菜，煮 10 分钟以上即可。
63 |
64 | 相比第一份食谱，第二份食谱更简短且更易于理解。但你需要了解一些有关烹调的术语：浸泡、煨、切片，还有蔬菜。
65 |
66 | 在编程的时候，我们不能期望所有功能都是现成的。因此，你可能就会像第一份食谱那样编写你的程序，逐个编写计算机需要执行的代码和步骤，而忽略了这些步骤之上的抽象概念。
67 |
68 | 在编程时，注意你的抽象级别什么时候过低，是一项非常有用的技能。
69 |
70 | ## 重复的抽象
71 |
72 | 我们已经了解的普通函数就是一种很好的构建抽象的工具。但有些时候，光有函数也不一定能够解决我们的问题。
73 |
74 | 程序以给定次数执行某些操作很常见。 你可以为此写一个`for`循环，就像这样：
75 |
76 | ```js
77 | for (let i = 0; i < 10; i++) {
78 | console.log(i);
79 | }
80 | ```
81 |
82 | 我们是否能够将“做某件事`N`次”抽象为函数？ 编写一个调用`console.log` `N`次的函数是很容易的。
83 |
84 | ```js
85 | function repeatLog(n) {
86 | for (let i = 0; i < n; i++) {
87 | console.log(i);
88 | }
89 | }
90 | ```
91 |
92 | 但如果我们想执行打印数字以外的操作该怎么办呢？我们可以使用函数来定义我们想做的事，而函数也是值，因此我们可以将期望执行的操作封装成函数，然后传递进来。
93 |
94 | ```js
95 | function repeat(n, action) {
96 | for (let i = 0; i < n; i++) {
97 | action(i);
98 | }
99 | }
100 |
101 | repeat(3, console.log);
102 | // → 0
103 | // → 1
104 | // → 2
105 | ```
106 |
107 | 你不必将预定义的函数传递给`repeat`。 通常情况下，你希望原地创建一个函数值。
108 |
109 | ```js
110 | let labels = [];
111 | repeat(5, i => {
112 | labels.push(`Unit ${i + 1}`);
113 | });
114 | console.log(labels);
115 | // → ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"]
116 | ```
117 |
118 | 这个结构有点像`for`循环 - 它首先描述了这种循环，然后提供了一个主体。 但是，主体现在写为一个函数值，它被包裹在`repeat`调用的括号中。 这就是它必须用右小括号和右大括号闭合的原因。 在这个例子中，主体是单个小表达式，你也可以省略大括号并将循环写成单行。
119 |
120 | ## 高阶函数
121 |
122 | 如果一个函数操作其他函数，即将其他函数作为参数或将函数作为返回值，那么我们可以将其称为高阶函数。因为我们已经看到函数就是一个普通的值，那么高阶函数也就不是什么稀奇的概念了。高阶这个术语来源于数学，在数学当中，函数和值的概念有着严格的区分。
123 |
124 | 我们可以使用高阶函数对一系列操作和值进行抽象。高阶函数有多种表现形式。比如你可以使用高阶函数来新建另一些函数。
125 |
126 | ```js
127 | function greaterThan(n) {
128 | return m => m > n;
129 | }
130 | let greaterThan10 = greaterThan(10);
131 | console.log(greaterThan10(11));
132 | // → true
133 | ```
134 |
135 | 你也可以使用高阶函数来修改其他的函数。
136 |
137 | ```js
138 | function noisy(f) {
139 | return (...args) => {
140 | console.log("calling with", args);
141 | let result = f(...args);
142 | console.log("called with", args, ", returned", result);
143 | return result;
144 | };
145 | }
146 | noisy(Math.min)(3, 2, 1);
147 | // → calling with [3, 2, 1]
148 | // → called with [3, 2, 1] , returned 1
149 | ```
150 |
151 | 你甚至可以使用高阶函数来实现新的控制流。
152 |
153 | ```js
154 | function unless(test, then) {
155 | if (!test) then();
156 | }
157 | repeat(3, n => {
158 | unless(n % 2 == 1, () => {
159 | console.log(n, "is even");
160 | });
161 | });
162 | // → 0 is even
163 | // → 2 is even
164 | ```
165 |
166 | 有一个内置的数组方法，`forEach`，它提供了类似`for/of`循环的东西，作为一个高阶函数。
167 |
168 | ```js
169 | ["A", "B"].forEach(l => console.log(l));
170 | // → A
171 | // → B
172 | ```
173 |
174 | ## 脚本数据集
175 |
176 | 数据处理是高阶函数表现突出的一个领域。 为了处理数据，我们需要一些真实数据。 本章将使用脚本书写系统的数据集，例如拉丁文，西里尔文或阿拉伯文。
177 |
178 | 请记住第 1 章中的 Unicode，该系统为书面语言中的每个字符分配一个数字。 大多数这些字符都与特定的脚本相关联。 该标准包含 140 个不同的脚本 - 81 个今天仍在使用，59 个是历史性的。
179 |
180 | 虽然我只能流利地阅读拉丁字符，但我很欣赏这样一个事实，即人们使用其他至少 80 种书写系统来编写文本，其中许多我甚至不认识。 例如，以下是泰米尔语手写体的示例。
181 |
182 | 
183 |
184 | 示例数据集包含 Unicode 中定义的 140 个脚本的一些信息。 本章的[编码沙箱](https://eloquentjavascript.net/code#5)中提供了`SCRIPTS`绑定。 该绑定包含一组对象，其中每个对象都描述了一个脚本。
185 |
186 | ```json
187 | {
188 | name: "Coptic",
189 | ranges: [[994, 1008], [11392, 11508], [11513, 11520]],
190 | direction: "ltr",
191 | year: -200,
192 | living: false,
193 | link: "https://en.wikipedia.org/wiki/Coptic_alphabet"
194 | }
195 | ```
196 |
197 | 这样的对象会告诉你脚本的名称，分配给它的 Unicode 范围，书写方向，（近似）起始时间，是否仍在使用以及更多信息的链接。 方向可以是从左到右的`"ltr"`，从右到左的`"rtl"`（阿拉伯语和希伯来语文字的写法），或者从上到下的`"ttb"`（蒙古文的写法）。
198 |
199 | `ranges`属性包含 Unicode 字符范围数组，每个数组都有两元素，包含下限和上限。 这些范围内的任何字符码都会分配给脚本。 下限是包括的（代码 994 是一个科普特字符），并且上限排除在外（代码 1008 不是）。
200 |
201 | ## 数组过滤
202 |
203 | 为了找到数据集中仍在使用的脚本，以下函数可能会有所帮助。 它过滤掉数组中未通过测试的元素：
204 |
205 | ```js
206 | function filter(array, test) {
207 | let passed = [];
208 | for (let element of array) {
209 | if (test(element)) {
210 | passed.push(element);
211 | }
212 | }
213 | return passed;
214 | }
215 |
216 | console.log(filter(SCRIPTS, script => script.living));
217 | // → [{name: "Adlam", …}, …]
218 | ```
219 |
220 | 该函数使用名为`test`的参数（一个函数值）填充计算中的“间隙” - 决定要收集哪些元素的过程。
221 |
222 | 需要注意的是，`filter`函数并没有从当前数组中删除元素，而是新建了一个数组，并将满足条件的元素存入新建的数组中。这个函数是一个“纯函数”，因为该函数并未修改给定的数组。
223 |
224 | 与`forEach`一样，`filter`函数也是标准的数组方法。本例中定义的函数只是用于展示内部实现原理。今后我们会使用以下方法来过滤数据：
225 |
226 | ```js
227 | console.log(SCRIPTS.filter(s => s.direction == "ttb"));
228 | // → [{name: "Mongolian", …}, …]
229 | ```
230 |
231 | ## 使用`map`函数转换数组
232 |
233 | 假设我们已经通过某种方式过滤了`SCRIPTS`数组，生成一个用于表示脚本的信息数组。但我们想创建一个包含名称的数组，因为这样更加易于检查。
234 |
235 | `map`方法对数组中的每个元素调用函数，然后利用返回值来构建一个新的数组，实现转换数组的操作。新建数组的长度与输入的数组一致，但其中的内容却通过对每个元素调用的函数“映射”成新的形式。
236 |
237 | ```js
238 | function map(array, transform) {
239 | let mapped = [];
240 | for (let element of array) {
241 | mapped.push(transform(element));
242 | }
243 | return mapped;
244 | }
245 |
246 | let rtlScripts = SCRIPTS.filter(s => s.direction == "rtl");
247 | console.log(map(rtlScripts, s => s.name));
248 | // → ["Adlam", "Arabic", "Imperial Aramaic", …]
249 | ```
250 |
251 | 与`forEach`和`filter`一样，`map`也是标准的数组方法。
252 |
253 | ## 使用`reduce`汇总数据
254 |
255 | 与数组有关的另一个常见事情是从它们中计算单个值。 我们的递归示例，汇总了一系列数字，就是这样一个例子。 另一个例子是找到字符最多的脚本。
256 |
257 | 表示这种模式的高阶操作称为归约（reduce）（有时也称为折叠（fold））。 它通过反复从数组中获取单个元素，并将其与当前值合并来构建一个值。 在对数字进行求和时，首先从数字零开始，对于每个元素，将其与总和相加。
258 |
259 | `reduce`函数包含三个参数：数组、执行合并操作的函数和初始值。该函数没有`filter`和`map`那样直观，所以仔细看看：
260 |
261 | ```js
262 | function reduce(array, combine, start) {
263 | let current = start;
264 | for (let element of array) {
265 | current = combine(current, element);
266 | }
267 | return current;
268 | }
269 |
270 | console.log(reduce([1, 2, 3, 4], (a, b) => a + b, 0));
271 | // → 10
272 | ```
273 |
274 | 数组中有一个标准的`reduce`方法，当然和我们上面看到的那个函数一致，可以简化合并操作。如果你的数组中包含多个元素，在调用`reduce`方法的时候忽略了`start`参数，那么该方法将会使用数组中的第一个元素作为初始值，并从第二个元素开始执行合并操作。
275 |
276 | ```js
277 | console.log([1, 2, 3, 4].reduce((a, b) => a + b));
278 | // → 10
279 | ```
280 |
281 | 为了使用`reduce`（两次）来查找字符最多的脚本，我们可以这样写：
282 |
283 | ```js
284 | function characterCount(script) {
285 | return script.ranges.reduce((count, [from, to]) => {
286 | return count + (to - from);
287 | }, 0);
288 | }
289 |
290 | console.log(SCRIPTS.reduce((a, b) => {
291 | return characterCount(a) < characterCount(b) ? b : a;
292 | }));
293 | // → {name: "Han", …}
294 | ```
295 |
296 | `characterCount`函数通过累加范围的大小，来减少分配给脚本的范围。 请注意归约器函数的参数列表中使用的解构。 `reduce'的第二次调用通过重复比较两个脚本并返回更大的脚本，使用它来查找最大的脚本。
297 |
298 | Unicode 标准分配了超过 89,000 个字符给汉字脚本，它成为数据集中迄今为止最大的书写系统。 汉字是一种（有时）用于中文，日文和韩文的文字。 这些语言共享很多字符，尽管他们倾向于以不同的方式写它们。 （基于美国的）Unicode 联盟决定将它们看做一个单独的书写系统来保存字符码。 这被称为中日韩越统一表意文字（Han unification），并且仍然使一些人非常生气。
299 |
300 | ## 可组合性
301 |
302 | 考虑一下，我们怎样才可以在不使用高阶函数的情况下，编写以上示例（找到最大的脚本）？代码没有那么糟糕。
303 |
304 | ```js
305 | let biggest = null;
306 | for (let script of SCRIPTS) {
307 | if (biggest == null ||
308 | characterCount(biggest) < characterCount(script)) {
309 | biggest = script;
310 | }
311 | }
312 | console.log(biggest);
313 | // → {name: "Han", …}
314 | ```
315 |
316 | 这段代码中多了一些绑定，虽然多了两行代码，但代码逻辑还是很容易让人理解的。
317 |
318 | 当你需要组合操作时，高阶函数的价值就突显出来了。举个例子，我们编写一段代码，找出数据集中男人和女人的平均年龄。
319 |
320 | ```js
321 | function average(array) {
322 | return array.reduce((a, b) => a + b) / array.length;
323 | }
324 |
325 | console.log(Math.round(average(
326 | SCRIPTS.filter(s => s.living).map(s => s.year))));
327 | // → 1185
328 | console.log(Math.round(average(
329 | SCRIPTS.filter(s => !s.living).map(s => s.year))));
330 | // → 209
331 | ```
332 |
333 | 因此，Unicode 中的死亡脚本，平均比活动脚本更老。 这不是一个非常有意义或令人惊讶的统计数据。 但是我希望你会同意，用于计算它的代码不难阅读。 你可以把它看作是一个流水线：我们从所有脚本开始，过滤出活动的（或死亡的）脚本，从这些脚本中抽出时间，对它们进行平均，然后对结果进行四舍五入。
334 |
335 | 你当然也可以把这个计算写成一个大循环。
336 |
337 | ```js
338 | let total = 0, count = 0;
339 | for (let script of SCRIPTS) {
340 | if (script.living) {
341 | total += script.year;
342 | count += 1;
343 | }
344 | }
345 | console.log(Math.round(total / count));
346 | // → 1185
347 | ```
348 |
349 | 但很难看到正在计算什么以及如何计算。 而且由于中间结果并不表示为一致的值，因此将“平均值”之类的东西提取到单独的函数中，需要更多的工作。
350 |
351 | 就计算机实际在做什么而言，这两种方法也是完全不同的。 第一个在运行`filter`和`map`的时候会建立新的数组，而第二个只会计算一些数字，从而减少工作量。 你通常可以采用可读的方法，但是如果你正在处理巨大的数组，并且多次执行这些操作，那么抽象风格的加速就是值得的。
352 |
353 | ## 字符串和字符码
354 |
355 | 这个数据集的一种用途是确定一段文本所使用的脚本。 我们来看看执行它的程序。
356 |
357 | 请记住，每个脚本都有一组与其相关的字符码范围。 所以给定一个字符码，我们可以使用这样的函数来找到相应的脚本（如果有的话）：
358 |
359 | ```js
360 | function characterScript(code) {
361 | for (let script of SCRIPTS) {
362 | if (script.ranges.some(([from, to]) => {
363 | return code >= from && code < to;
364 | })) {
365 | return script;
366 | }
367 | }
368 | return null;
369 | }
370 |
371 | console.log(characterScript(121));
372 | // → {name: "Latin", …}
373 | ```
374 |
375 | `some`方法是另一个高阶函数。 它需要一个测试函数，并告诉你该函数是否对数组中的任何元素返回`true`。
376 |
377 | 但是，我们如何获得字符串中的字符码？
378 |
379 | 在第一章中，我提到 JavaScript 字符串被编码为一个 16 位数字的序列。 这些被称为代码单元。 一个 Unicode 字符代码最初应该能放进这样一个单元（它给你超 65,000 个字符）。 后来人们发现它不够用了，很多人避开了为每个字符使用更多内存的需求。 为了解决这些问题，人们发明了 UTF-16，JavaScript 字符串使用的格式 。它使用单个 16 位代码单元描述了大多数常见字符，但是为其他字符使用一对两个这样的单元。
380 |
381 | 今天 UTF-16 通常被认为是一个糟糕的主意。 它似乎总是故意设计来引起错误。 很容易编写程序，假装代码单元和字符是一个东西。 如果你的语言不使用两个单位的字符，显然能正常工作。 但只要有人试图用一些不太常见的中文字符来使用这样的程序，就会中断。 幸运的是，随着 emoji 符号的出现，每个人都开始使用两个单元的字符，处理这些问题的负担更加分散。
382 |
383 | ```js
384 | // Two emoji characters, horse and shoe
385 | let horseShoe = "\ud83d\udc34\ud83d\udc5f";
386 | console.log(horseShoe.length);
387 | // → 4
388 | console.log(horseShoe[0]);
389 | // → (Invalid half-character)
390 | console.log(horseShoe.charCodeAt(0));
391 | // → 55357 (Code of the half-character)
392 | console.log(horseShoe.codePointAt(0));
393 | // → 128052 (Actual code for horse emoji)
394 | ```
395 |
396 | JavaScript的`charCodeAt`方法为你提供了一个代码单元，而不是一个完整的字符代码。 稍后添加的`codePointAt`方法确实提供了完整的 Unicode 字符。 所以我们可以使用它从字符串中获取字符。 但传递给`codePointAt`的参数仍然是代码单元序列的索引。 因此，要运行字符串中的所有字符，我们仍然需要处理一个字符占用一个还是两个代码单元的问题。
397 |
398 | 在上一章中，我提到`for/of`循环也可以用在字符串上。 像`codePointAt`一样，这种类型的循环，是在人们敏锐地意识到 UTF-16 的问题的时候引入的。 当你用它来遍历一个字符串时，它会给你真正的字符，而不是代码单元。
399 |
400 | ```js
401 | let roseDragon = "\ud83c\udf45\ud83d\udc09";
402 | for (let char of roseDragon) {
403 | console.log(char);
404 | // → (emoji rose)
405 | // → (emoji dragon)
406 | ```
407 |
408 | 如果你有一个字符（它是一个或两个代码单元的字符串），你可以使用`codePointAt(0)`来获得它的代码。
409 |
410 | ## 识别文本
411 |
412 | 我们有了`characterScript`函数和一种正确遍历字符的方法。 下一步将是计算属于每个脚本的字符。 下面的计数抽象会很实用：
413 |
414 | ```js
415 | function countBy(items, groupName) {
416 | let counts = [];
417 | for (let item of items) {
418 | let name = groupName(item);
419 | let known = counts.findIndex(c => c.name == name);
420 | if (known == -1) {
421 | counts.push({name, count: 1});
422 | } else {
423 | counts[known].count++;
424 | }
425 | }
426 | return counts;
427 | }
428 |
429 | console.log(countBy([1, 2, 3, 4, 5], n => n > 2));
430 | // → [{name: false, count: 2}, {name: true, count: 3}]
431 | ```
432 |
433 | `countBy`函数需要一个集合（我们可以用`for/of`来遍历的任何东西）以及一个函数，它计算给定元素的组名。 它返回一个对象数组，每个对象命名一个组，并告诉你该组中找到的元素数量。
434 |
435 | 它使用另一个数组方法`findIndex`。 这个方法有点像`indexOf`，但它不是查找特定的值，而是查找给定函数返回`true`的第一个值。 像`indexOf`一样，当没有找到这样的元素时，它返回 -1。
436 |
437 | 使用`countBy`，我们可以编写一个函数，告诉我们在一段文本中使用了哪些脚本。
438 |
439 | ```js
440 | function textScripts(text) {
441 | let scripts = countBy(text, char => {
442 | let script = characterScript(char.codePointAt(0));
443 | return script ? script.name : "none";
444 | }).filter(({name}) => name != "none");
445 |
446 | let total = scripts.reduce((n, {count}) => n + count, 0);
447 | if (total == 0) return "No scripts found";
448 |
449 | return scripts.map(({name, count}) => {
450 | return `${Math.round(count * 100 / total)}% ${name}`;
451 | }).join(", ");
452 | }
453 |
454 | console.log(textScripts('英国的狗说"woof", 俄罗斯的狗说"тяв"'));
455 | // → 61% Han, 22% Latin, 17% Cyrillic
456 | ```
457 |
458 | 该函数首先按名称对字符进行计数，使用`characterScript`为它们分配一个名称，并且对于不属于任何脚本的字符，回退到字符串`"none"`。 `filter`调用从结果数组中删除`"none"`的条目，因为我们对这些字符不感兴趣。
459 |
460 | 为了能够计算百分比，我们首先需要属于脚本的字符总数，我们可以用`reduce`来计算。 如果没有找到这样的字符，该函数将返回一个特定的字符串。 否则，它使用`map`将计数条目转换为可读的字符串，然后使用`join`合并它们。
461 |
462 | ## 本章小结
463 |
464 | 能够将函数值传递给其他函数，是 JavaScript 的一个非常有用的方面。 它允许我们编写函数，用它们中的“间隙”对计算建模。 调用这些函数的代码，可以通过提供函数值来填补间隙。
465 |
466 | 数组提供了许多有用的高阶方法。 你可以使用`forEach`来遍历数组中的元素。 `filter`方法返回一个新数组，只包含通过谓词函数的元素。 通过将函数应用于每个元素的数组转换，使用`map`来完成。 你可以使用`reduce`将数组中的所有元素合并为一个值。 `some`方法测试任何元素是否匹配给定的谓词函数。 `findIndex`找到匹配谓词的第一个元素的位置。
467 |
468 | ## 习题
469 |
470 | ### 展开
471 |
472 | 联合使用`reduce`方法和`concat`方法，将一个数组的数组“展开”成一个单个数组，包含原始数组的所有元素。
473 |
474 | ```js
475 | let arrays = [[1, 2, 3], [4, 5], [6]];
476 | // Your code here.
477 | // → [1, 2, 3, 4, 5, 6]
478 | ```
479 |
480 | ### 你自己的循环
481 |
482 | 编写一个高阶函数`loop`，提供类似`for`循环语句的东西。 它接受一个值，一个测试函数，一个更新函数和一个主体函数。 每次迭代中，它首先在当前循环值上运行测试函数，并在返回`false`时停止。 然后它调用主体函数，向其提供当前值。 最后，它调用`update`函数来创建一个新的值，并从头开始。
483 |
484 | 定义函数时，可以使用常规循环来执行实际循环。
485 |
486 | ```js
487 | // Your code here.
488 |
489 | loop(3, n => n > 0, n => n - 1, console.log);
490 | // → 3
491 | // → 2
492 | // → 1
493 | ```
494 |
495 | ### `every`
496 |
497 | 类似于`some`方法，数组也有`every`方法。 当给定函数对数组中的每个元素返回`true`时，此函数返回`true`。 在某种程度上，`some`是作用于数组的`||`运算符的一个版本，`every`就像`&&`运算符。
498 |
499 | 将`every`实现为一个函数，接受一个数组和一个谓词函数作为参数。编写两个版本，一个使用循环，另一个使用`some`方法。
500 |
501 | ```js
502 | function every(array, test) {
503 | // Your code here.
504 | }
505 |
506 | console.log(every([1, 3, 5], n => n < 10));
507 | // → true
508 | console.log(every([2, 4, 16], n => n < 10));
509 | // → false
510 | console.log(every([], n => n < 10));
511 | // → true
512 | ```
513 |
--------------------------------------------------------------------------------
/7.md:
--------------------------------------------------------------------------------
1 | # 七、项目：机器人
2 |
3 | > 原文：[Project: A Robot](http://eloquentjavascript.net/07_robot.html)
4 | >
5 | > 译者：[飞龙](https://github.com/wizardforcel)
6 | >
7 | > 协议：[CC BY-NC-SA 4.0](http://creativecommons.org/licenses/by-nc-sa/4.0/)
8 | >
9 | > 自豪地采用[谷歌翻译](https://translate.google.cn/)
10 |
11 | > [...] 置疑计算机能不能思考 [...] 就相当于置疑潜艇能不能游泳。
12 | >
13 | > 艾兹格尔·迪科斯特拉，《计算机科学的威胁》
14 |
15 | 
16 |
17 | 在“项目”章节中，我会在短时间内停止向你讲述新理论，相反我们会一起完成一个项目。 学习编程理论是必要的，但阅读和理解实际的计划同样重要。
18 |
19 | 我们在本章中的项目是构建一个自动机，一个在虚拟世界中执行任务的小程序。 我们的自动机将是一个接送包裹的邮件递送机器人。
20 |
21 | ## Meadowfield
22 |
23 | Meadowfield 村不是很大。 它由 11 个地点和 14 条道路组成。 它可以用`roads`数组来描述：
24 |
25 | ```js
26 | const roads = [
27 | "Alice's House-Bob's House", "Alice's House-Cabin",
28 | "Alice's House-Post Office", "Bob's House-Town Hall",
29 | "Daria's House-Ernie's House", "Daria's House-Town Hall",
30 | "Ernie's House-Grete's House", "Grete's House-Farm",
31 | "Grete's House-Shop", "Marketplace-Farm",
32 | "Marketplace-Post Office", "Marketplace-Shop",
33 | "Marketplace-Town Hall", "Shop-Town Hall"
34 | ];
35 | ```
36 |
37 | 
38 |
39 | 村里的道路网络形成了一个图。 图是节点（村里的地点）与他们之间的边（道路）的集合。 这张图将成为我们的机器人在其中移动的世界。
40 |
41 | 字符串数组并不易于处理。 我们感兴趣的是，我们可以从特定地点到达的目的地。 让我们将道路列表转换为一个数据结构，对于每个地点，都会告诉我们从那里可以到达哪些地点。
42 |
43 | ```js
44 | function buildGraph(edges) {
45 | let graph = Object.create(null);
46 | function addEdge(from, to) {
47 | if (graph[from] == null) {
48 | graph[from] = [to];
49 | } else {
50 | graph[from].push(to);
51 | }
52 | }
53 | for (let [from, to] of edges.map(r => r.split("-"))) {
54 | addEdge(from, to);
55 | addEdge(to, from);
56 | }
57 | return graph;
58 | }
59 |
60 | const roadGraph = buildGraph(roads);
61 | ```
62 |
63 | 给定边的数组，`buildGraph`创建一个映射对象，该对象为每个节点存储连通节点的数组。
64 |
65 | 它使用`split`方法，将形式为`"Start-End"`的道路字符串，转换为两元素数组，包含起点和终点作为单个字符串。
66 |
67 | ## 任务
68 |
69 | 我们的机器人将在村庄周围移动。 在各个地方都有包裹，每个都寄往其他地方。 机器人在收到包裹时拾取包裹，并在抵达目的地时将其送达。
70 |
71 | 自动机必须在每个点决定下一步要去哪里。 所有包裹递送完成后，它就完成了任务。
72 |
73 | 为了能够模拟这个过程，我们必须定义一个可以描述它的虚拟世界。 这个模型告诉我们机器人在哪里以及包裹在哪里。 当机器人决定移到某处时，我们需要更新模型以反映新情况。
74 |
75 | 如果你正在考虑面向对象编程，你的第一个冲动可能是开始为世界中的各种元素定义对象。 一个机器人，一个包裹，也许还有一个地点。 然后，它们可以持有描述其当前状态的属性，例如某个位置的一堆包裹，我们可以在更新世界时改变这些属性。
76 |
77 | 这是错的。
78 |
79 | 至少，通常是这样。 一个东西听起来像一个对象，并不意味着它应该是你的程序中的一个对象。 为应用程序中的每个概念反射式编写类，往往会留下一系列互连对象，每个对象都有自己的内部的变化的状态。 这样的程序通常很难理解，因此很容易崩溃。
80 |
81 | 相反，让我们将村庄的状态压缩成定义它的值的最小集合。 机器人的当前位置和未送达的包裹集合，其中每个都拥有当前位置和目标地址。这样就够了。
82 |
83 | 当我们到达新地点时，让我们这样做，在机器人移动时不会改变这种状态，而是在移动之后为当前情况计算一个新状态。
84 |
85 | ```js
86 | class VillageState {
87 | constructor(place, parcels) {
88 | this.place = place;
89 | this.parcels = parcels;
90 | }
91 |
92 | move(destination) {
93 | if (!roadGraph[this.place].includes(destination)) {
94 | return this;
95 | } else {
96 | let parcels = this.parcels.map(p => {
97 | if (p.place != this.place) return p;
98 | return {place: destination, address: p.address};
99 | }).filter(p => p.place != p.address);
100 | return new VillageState(destination, parcels);
101 | }
102 | }
103 | }
104 | ```
105 |
106 | `move`方法是动作发生的地方。 它首先检查是否有当前位置到目的地的道路，如果没有，则返回旧状态，因为这不是有效的移动。
107 |
108 | 然后它创建一个新的状态，将目的地作为机器人的新地点。 但它也需要创建一套新的包裹 - 机器人携带的包裹（位于机器人当前位置）需要移动到新位置。 而要寄往新地点的包裹需要送达 - 也就是说，需要将它们从未送达的包裹中移除。 `'map'`的调用处理移动，并且`'filter'`的调用处理递送。
109 |
110 | 包裹对象在移动时不会更改，但会被重新创建。 `move`方法为我们提供新的村庄状态，但完全保留了原有的村庄状态。
111 |
112 | ```js
113 | let first = new VillageState(
114 | "Post Office",
115 | [{place: "Post Office", address: "Alice's House"}]
116 | );
117 | let next = first.move("Alice's House");
118 |
119 | console.log(next.place);
120 | // → Alice's House
121 | console.log(next.parcels);
122 | // → []
123 | console.log(first.place);
124 | // → Post Office
125 | ```
126 |
127 | `move`会使包裹被送达，并在下一个状态中反映出来。 但最初的状态仍然描述机器人在邮局并且包裹未送达的情况。
128 |
129 | ## 持久性数据
130 |
131 | 不会改变的数据结构称为不变的（immutable）或持久性的（persistent）。 他们的表现很像字符串和数字，因为他们就是他们自己，并保持这种状态，而不是在不同的时间包含不同的东西。
132 |
133 | 在 JavaScript 中，几乎所有的东西都可以改变，所以使用应该持久性的值需要一些限制。 有一个叫做`Object.freeze`的函数，它可以改变一个对象，使其忽略它的属性的写入。 如果你想要小心，你可以使用它来确保你的对象没有改变。 `freeze`确实需要计算机做一些额外的工作，忽略更新可能会让一些人迷惑，让他们做错事。 所以我通常更喜欢告诉人们，不应该弄乱给定的对象，并希望他们记住它。
134 |
135 | ```js
136 | let object = Object.freeze({value: 5});
137 | object.value = 10;
138 | console.log(object.value);
139 | // → 5
140 | ```
141 |
142 | 当语言显然期待我这样做时，为什么我不想改变对象？
143 |
144 | 因为它帮助我理解我的程序。 这又是关于复杂性管理。 当我的系统中的对象是固定的，稳定的东西时，我可以孤立地考虑操作它们 - 从给定的起始状态移动到爱丽丝的房子，始终会产生相同的新状态。 当对象随着时间而改变时，这就给这种推理增加了全新的复杂性。
145 |
146 | 对于小型系统，例如我们在本章中构建的东西，我们可以处理那些额外的复杂性。 但是我们可以建立什么样的系统，最重要的限制是我们能够理解多少。 任何让你的代码更容易理解的东西，都可以构建一个更加庞大的系统。
147 |
148 | 不幸的是，尽管理解构建在持久性数据结构上的系统比较容易，但设计一个，特别是当你的编程语言没有帮助时，可能会更难一些。 我们将在本书中寻找使用持久性数据结构的时机，但我们也将使用可变数据结构。
149 |
150 | ## 模拟
151 |
152 | 递送机器人观察世界并决定它想要移动的方向。 因此，我们可以说机器人是一个函数，接受`VillageState`对象并返回附近地点的名称。
153 |
154 | 因为我们希望机器人能够记住东西，以便他们可以制定和执行计划，我们也会传递他们的记忆，并让他们返回一个新的记忆。 因此，机器人返回的东西是一个对象，包含它想要移动的方向，以及下次调用时将返回给它的记忆值。
155 |
156 | ```js
157 | function runRobot(state, robot, memory) {
158 | for (let turn = 0;; turn++) {
159 | if (state.parcels.length == 0) {
160 | console.log(`Done in ${turn} turns`);
161 | break;
162 | }
163 | let action = robot(state, memory);
164 | state = state.move(action.direction);
165 | memory = action.memory;
166 | console.log(`Moved to ${action.direction}`);
167 | }
168 | }
169 | ```
170 |
171 | 考虑一下机器人必须做些什么来“解决”一个给定的状态。 它必须通过访问拥有包裹的每个位置来拾取所有包裹，并通过访问包裹寄往的每个位置来递送，但只能在拾取包裹之后。
172 |
173 | 什么是可能有效的最愚蠢的策略？ 机器人可以在每回合中，向随机方向行走。 这意味着很有可能它最终会碰到所有的包裹，然后也会在某个时候到达包裹应该送达的地方。
174 |
175 | 以下是可能的样子：
176 |
177 | ```js
178 | function randomPick(array) {
179 | let choice = Math.floor(Math.random() * array.length);
180 | return array[choice];
181 | }
182 |
183 | function randomRobot(state) {
184 | return {direction: randomPick(roadGraph[state.place])};
185 | }
186 | ```
187 |
188 | 请记住，`Math.random()`返回 0 和 1 之间的数字，但总是小于 1。 将这样一个数乘以数组长度，然后将`Math.floor`应用于它，向我们提供数组的随机索引。
189 |
190 | 由于这个机器人不需要记住任何东西，所以它忽略了它的第二个参数（记住，可以使用额外的参数调用 JavaScript 函数而不会产生不良影响）并省略返回对象中的`memory`属性。
191 |
192 | 为了使这个复杂的机器人工作，我们首先需要一种方法来创建一些包裹的新状态。 静态方法（通过直接向构造函数添加一个属性来编写）是放置该功能的好地方。
193 |
194 | ```js
195 | VillageState.random = function(parcelCount = 5) {
196 | let parcels = [];
197 | for (let i = 0; i < parcelCount; i++) {
198 | let address = randomPick(Object.keys(roadGraph));
199 | let place;
200 | do {
201 | place = randomPick(Object.keys(roadGraph));
202 | } while (place == address);
203 | parcels.push({place, address});
204 | }
205 | return new VillageState("Post Office", parcels);
206 | };
207 | ```
208 |
209 | 我们不想要发往寄出地的任何包裹。 出于这个原因，当`do`循环获取与地址相同的地方时，它会继续选择新的地方。
210 |
211 | 让我们建立一个虚拟世界。
212 |
213 | ```js
214 | runRobot(VillageState.random(), randomRobot);
215 | // → Moved to Marketplace
216 | // → Moved to Town Hall
217 | // → …
218 | // → Done in 63 turns
219 | ```
220 |
221 | 机器人需要花费很多时间来交付包裹，因为它没有很好规划。 我们很快就会解决。
222 |
223 | 为了更好地理解模拟，你可以使用本章编程环境中提供的`runRobotAnimation`函数。 这将运行模拟，但不是输出文本，而是向你展示机器人在村庄地图上移动。
224 |
225 | ```js
226 | runRobotAnimation(VillageState.random(), randomRobot);
227 | ```
228 |
229 | `runRobotAnimation`的实现方式现在仍然是一个谜，但是在阅读本书的后面的章节，讨论 Web 浏览器中的 JavaScript 集成之后，你将能够猜到它的工作原理。
230 |
231 | ## 邮车的路线
232 |
233 | 我们应该能够比随机机器人做得更好。 一个简单的改进就是从现实世界的邮件传递方式中获得提示。 如果我们发现一条经过村庄所有地点的路线，机器人可以通行该路线两次，此时它保证能够完成。 这是一条这样的路线（从邮局开始）。
234 |
235 | ```js
236 | const mailRoute = [
237 | "Alice's House", "Cabin", "Alice's House", "Bob's House",
238 | "Town Hall", "Daria's House", "Ernie's House",
239 | "Grete's House", "Shop", "Grete's House", "Farm",
240 | "Marketplace", "Post Office"
241 | ];
242 | ```
243 |
244 | 为了实现路线跟踪机器人，我们需要利用机器人的记忆。 机器人将其路线的其余部分保存在其记忆中，并且每回合丢弃第一个元素。
245 |
246 | ```js
247 | function routeRobot(state, memory) {
248 | if (memory.length == 0) {
249 | memory = mailRoute;
250 | }
251 | return {direction: memory[0], memory: memory.slice(1)};
252 | }
253 | ```
254 |
255 | 这个机器人已经快了很多。 它最多需要 26 个回合（13 步的路线的两倍），但通常要少一些。
256 |
257 | ```js
258 | runRobotAnimation(VillageState.random(), routeRobot, []);
259 | ```
260 |
261 | ## 寻路
262 |
263 | 不过，我不会盲目遵循固定的智能寻路行为。 如果机器人为需要完成的实际工作调整行为，它可以更高效地工作。
264 |
265 | 为此，它必须能够有针对性地朝着给定的包裹移动，或者朝着包裹必须送达的地点。 尽管如此，即使目标距离我们不止一步，也需要某种寻路函数。
266 |
267 | 在图上寻找路线的问题是一个典型的搜索问题。 我们可以判断一个给定的解决方案（路线）是否是一个有效的解决方案，但我们不能像 2 + 2 这样，直接计算解决方案。 相反，我们必须不断创建潜在的解决方案，直到找到有效的解决方案。
268 |
269 | 图上的可能路线是无限的。 但是当搜索`A`到`B`的路线时，我们只关注从`A`起始的路线。 我们也不关心两次访问同一地点的路线 - 这绝对不是最有效的路线。 这样可以减少查找者必须考虑的路线数量。
270 |
271 | 事实上，我们最感兴趣的是最短路线。 所以我们要确保，查看较长路线之前，我们要查看较短的路线。 一个好的方法是，从起点使路线“生长”，探索尚未到达的每个可到达的地方，直到路线到达目标。 这样，我们只探索潜在的有趣路线，并找到到目标的最短路线（或最短路线之一，如果有多条路线）。
272 |
273 | 这是一个实现它的函数：
274 |
275 | ```js
276 | function findRoute(graph, from, to) {
277 | let work = [{at: from, route: []}];
278 | for (let i = 0; i < work.length; i++) {
279 | let {at, route} = work[i];
280 | for (let place of graph[at]) {
281 | if (place == to) return route.concat(place);
282 | if (!work.some(w => w.at == place)) {
283 | work.push({at: place, route: route.concat(place)});
284 | }
285 | }
286 | }
287 | }
288 | ```
289 |
290 | 探索必须按照正确的顺序完成 - 首先到达的地方必须首先探索。 我们不能到达一个地方就立即探索，因为那样意味着，从那里到达的地方也会被立即探索，以此类推，尽管可能还有其他更短的路径尚未被探索。
291 |
292 | 因此，该函数保留一个工作列表。 这是一系列应该探索的地方，以及让我们到那里的路线。 它最开始只有起始位置和空路线。
293 |
294 | 然后，通过获取列表中的下一个项目并进行探索，来执行搜索，这意味着，会查看从该地点起始的所有道路。 如果其中之一是目标，则可以返回完成的路线。 否则，如果我们以前没有看过这个地方，就会在列表中添加一个新项目。 如果我们之前看过它，因为我们首先查看了短路线，我们发现，到达那个地方的路线较长，或者与现有路线一样长，我们不需要探索它。
295 |
296 | 你可以在视觉上将它想象成一个已知路线的网，从起始位置爬出来，在各个方向上均匀生长（但不会缠绕回去）。 只要第一条线到达目标位置，其它线就会退回起点，为我们提供路线。
297 |
298 | 我们的代码无法处理工作列表中没有更多工作项的情况，因为我们知道我们的图是连通的，这意味着可以从其他所有位置访问每个位置。 我们始终能够找到两点之间的路线，并且搜索不会失败。
299 |
300 | ```js
301 | function goalOrientedRobot({place, parcels}, route) {
302 | if (route.length == 0) {
303 | let parcel = parcels[0];
304 | if (parcel.place != place) {
305 | route = findRoute(roadGraph, place, parcel.place);
306 | } else {
307 | route = findRoute(roadGraph, place, parcel.address);
308 | }
309 | }
310 | return {direction: route[0], memory: route.slice(1)};
311 | }
312 | ```
313 |
314 | 这个机器人使用它的记忆值作为移动方向的列表，就像寻路机器人一样。 无论什么时候这个列表是空的，它都必须弄清下一步该做什么。 它会取出集合中第一个未送达的包裹，如果该包裹还没有被拾取，则会绘制一条朝向它的路线。 如果包裹已经被拾取，它仍然需要送达，所以机器人会创建一个朝向递送地址的路线。
315 |
316 | 让我们看看如何实现。
317 |
318 | ```js
319 | runRobotAnimation(VillageState.random(),
320 | goalOrientedRobot, []);
321 | ```
322 |
323 | 这个机器人通常在大约 16 个回合中，完成了送达 5 个包裹的任务。 略好于`routeRobot`，但仍然绝对不是最优的。
324 |
325 | ## 练习
326 |
327 | ### 测量机器人
328 |
329 | 很难通过让机器人解决一些场景来客观比较他们。 也许一个机器人碰巧得到了更简单的任务，或者它擅长的那种任务，而另一个没有。
330 |
331 | 编写一个`compareRobots`，接受两个机器人（和它们的起始记忆）。 它应该生成 100 个任务，并让每个机器人解决每个这些任务。 完成后，它应输出每个机器人每个任务的平均步数。
332 |
333 | 为了公平起见，请确保你将每个任务分配给两个机器人，而不是为每个机器人生成不同的任务。
334 |
335 | ```js
336 | function compareRobots(robot1, memory1, robot2, memory2) {
337 | // Your code here
338 | }
339 |
340 | compareRobots(routeRobot, [], goalOrientedRobot, []);
341 | ```
342 |
343 | ### 机器人的效率
344 |
345 | 你能写一个机器人，比`goalOrientedRobot`更快完成递送任务吗？ 如果你观察机器人的行为，它会做什么明显愚蠢的事情？如何改进它们？
346 |
347 | 如果你解决了上一个练习，你可能打算使用`compareRobots`函数来验证你是否改进了机器人。
348 |
349 | ```js
350 | // Your code here
351 |
352 | runRobotAnimation(VillageState.random(), yourRobot, memory);
353 | ```
354 |
355 | ### 持久性分组
356 |
357 | 标准 JavaScript 环境中提供的大多数数据结构不太适合持久使用。 数组有`slice`和`concat`方法，可以让我们轻松创建新的数组而不会损坏旧数组。 但是`Set`没有添加或删除项目并创建新集合的方法。
358 |
359 | 编写一个新的类`PGroup`，类似于第六章中的`Group`类，它存储一组值。 像`Group`一样，它具有`add`，`delete`和`has`方法。
360 |
361 | 然而，它的`add`方法应该返回一个新的`PGroup`实例，并添加给定的成员，并保持旧的不变。 与之类似，`delete`创建一个没有给定成员的新实例。
362 |
363 | 该类应该适用于任何类型的值，而不仅仅是字符串。 当与大量值一起使用时，它不一定非常高效。
364 |
365 | 构造函数不应该是类接口的一部分（尽管你绝对会打算在内部使用它）。 相反，有一个空的实例`PGroup.empty`，可用作起始值。
366 |
367 | 为什么只需要一个`PGroup.empty`值，而不是每次都创建一个新的空分组？
368 |
369 | ```js
370 | class PGroup {
371 | // Your code here
372 | }
373 |
374 | let a = PGroup.empty.add("a");
375 | let ab = a.add("b");
376 | let b = ab.delete("a");
377 |
378 | console.log(b.has("b"));
379 | // → true
380 | console.log(a.has("b"));
381 | // → false
382 | console.log(b.has("a"));
383 | // → false
384 | ```
385 |
--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | eloquent-js.apachecn.org
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM httpd:2.4
2 | COPY ./ /usr/local/apache2/htdocs/
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License (CC BY-NC-SA 4.0)
2 |
3 | Copyright © 2020 ApacheCN(apachecn@163.com)
4 |
5 | By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
6 |
7 | Section 1 – Definitions.
8 |
9 | a. Adapted Material means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
10 | b. Adapter's License means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
11 | c. BY-NC-SA Compatible License means a license listed at creativecommons.org/compatiblelicenses, approved by Creative Commons as essentially the equivalent of this Public License.
12 | d. Copyright and Similar Rights means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
13 | e. Effective Technological Measures means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements.
14 | f. Exceptions and Limitations means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
15 | g. License Elements means the license attributes listed in the name of a Creative Commons Public License. The License Elements of this Public License are Attribution, NonCommercial, and ShareAlike.
16 | h. Licensed Material means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
17 | i. Licensed Rights means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
18 | j. Licensor means the individual(s) or entity(ies) granting rights under this Public License.
19 | k. NonCommercial means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange.
20 | l. Share means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them.
21 | m. Sui Generis Database Rights means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
22 | n. You means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning.
23 |
24 | Section 2 – Scope.
25 |
26 | a. License grant.
27 | 1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
28 | A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and
29 | B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only.
30 | 2. Exceptions and Limitations. For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions.
31 | 3. Term. The term of this Public License is specified in Section 6(a).
32 | 4. Media and formats; technical modifications allowed. The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
33 | 5. Downstream recipients.
34 | A. Offer from the Licensor – Licensed Material. Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License.
35 | B. Additional offer from the Licensor – Adapted Material. Every recipient of Adapted Material from You automatically receives an offer from the Licensor to exercise the Licensed Rights in the Adapted Material under the conditions of the Adapter’s License You apply.
36 | C. No downstream restrictions. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
37 | 6. No endorsement. Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i).
38 | b. Other rights.
39 | 1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
40 | 2. Patent and trademark rights are not licensed under this Public License.
41 | 3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes.
42 |
43 | Section 3 – License Conditions.
44 |
45 | Your exercise of the Licensed Rights is expressly made subject to the following conditions.
46 |
47 | a. Attribution.
48 | 1. If You Share the Licensed Material (including in modified form), You must:
49 | A. retain the following if it is supplied by the Licensor with the Licensed Material:
50 | i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
51 | ii. a copyright notice;
52 | iii. a notice that refers to this Public License;
53 | iv. a notice that refers to the disclaimer of warranties;
54 | v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
55 | B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
56 | C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License.
57 | 2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
58 | 3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable.
59 | b. ShareAlike.
60 | In addition to the conditions in Section 3(a), if You Share Adapted Material You produce, the following conditions also apply.
61 | 1. The Adapter’s License You apply must be a Creative Commons license with the same License Elements, this version or later, or a BY-NC-SA Compatible License.
62 | 2. You must include the text of, or the URI or hyperlink to, the Adapter's License You apply. You may satisfy this condition in any reasonable manner based on the medium, means, and context in which You Share Adapted Material.
63 | 3. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, Adapted Material that restrict exercise of the rights granted under the Adapter's License You apply.
64 |
65 | Section 4 – Sui Generis Database Rights.
66 |
67 | Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
68 |
69 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only;
70 | b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material, including for purposes of Section 3(b); and
71 | c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database.
72 |
73 | For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights.
74 |
75 | Section 5 – Disclaimer of Warranties and Limitation of Liability.
76 |
77 | a. Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.
78 | b. To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.
79 | c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
80 |
81 | Section 6 – Term and Termination.
82 |
83 | a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
84 | b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
85 | 1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
86 | 2. upon express reinstatement by the Licensor.
87 | For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
88 | c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License.
89 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
90 |
91 | Section 7 – Other Terms and Conditions.
92 |
93 | a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
94 | b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License.
95 |
96 | Section 8 – Interpretation.
97 |
98 | a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License.
99 | b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions.
100 | c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
101 | d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript 编程精解 中文第三版
2 |
3 | 原书：[Eloquent JavaScript 3rd edition](http://eloquentjavascript.net/)
4 |
5 | 译者：[飞龙](https://github.com/wizardforcel)
6 |
7 | 自豪地采用[谷歌翻译](https://translate.google.cn/)
8 |
9 | 部分参考了[《JavaScript 编程精解（第 2 版）》](https://book.douban.com/subject/26707144/)
10 |
11 | + [在线阅读](https://eloquent-js.apachecn.org)
12 | + [在线阅读（Gitee）](https://apachecn.gitee.io/eloquent-js-3e-zh/)
13 | + [PDF格式](https://www.gitbook.com/download/pdf/book/wizardforcel/eloquent-js-3e)
14 | + [EPUB格式](https://www.gitbook.com/download/epub/book/wizardforcel/eloquent-js-3e)
15 | + [MOBI格式](https://www.gitbook.com/download/mobi/book/wizardforcel/eloquent-js-3e)
16 | + [代码仓库](https://github.com/wizardforcel/eloquent-js-3e-zh)
17 |
18 |
19 | ## 下载
20 |
21 | ### Docker
22 |
23 | ```
24 | docker pull apachecn0/eloquent-js-3e-zh
25 | docker run -tid -p <port>:80 apachecn0/eloquent-js-3e-zh
26 | # 访问 http://localhost:{port} 查看文档
27 | ```
28 |
29 | ### PYPI
30 |
31 | ```
32 | pip install eloquent-js-3e-zh
33 | eloquent-js-3e-zh <port>
34 | # 访问 http://localhost:{port} 查看文档
35 | ```
36 |
37 | ## 赞助我
38 |
39 | 
40 |
41 | ## 协议
42 |
43 | [CC BY-NC-SA 4.0](http://creativecommons.org/licenses/by-nc-sa/4.0/)
44 |
--------------------------------------------------------------------------------
/SUMMARY.md:
--------------------------------------------------------------------------------
1 | + [JavaScript 编程精解 中文第三版](README.md)
2 | + [零、前言](0.md)
3 | + [一、值，类型和运算符](1.md)
4 | + [二、程序结构](2.md)
5 | + [三、函数](3.md)
6 | + [四、数据结构：对象和数组](4.md)
7 | + [五、高阶函数](5.md)
8 | + [六、对象的秘密](6.md)
9 | + [七、项目：机器人](7.md)
10 | + [八、Bug 和错误](8.md)
11 | + [九、正则表达式](9.md)
12 | + [十、模块](10.md)
13 | + [十一、异步编程](11.md)
14 | + [十二、项目：编程语言](12.md)
15 | + [十三、浏览器中的 JavaScript](13.md)
16 | + [十四、文档对象模型](14.md)
17 | + [十五、处理事件](15.md)
18 | + [十六、项目：平台游戏](16.md)
19 | + [十七、在画布上绘图](17.md)
20 | + [十八、HTTP 和表单](18.md)
21 | + [十九、项目：像素艺术编辑器](19.md)
22 | + [二十、Node.js](20.md)
23 | + [二十一、项目：技能分享网站](21.md)
--------------------------------------------------------------------------------
/asset/docsify-apachecn-footer.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | var footer = [
3 | '<hr/>',
4 | '<div align="center">',
5 | ' <p><a href="http://www.apachecn.org/" target="_blank"><font face="KaiTi" size="6" color="red">我们一直在努力</font></a><p>',
6 | ' <p><a href="https://github.com/apachecn/eloquent-js-3e-zh/" target="_blank">apachecn/eloquent-js-3e-zh</a></p>',
7 | ' <p><iframe align="middle" src="https://ghbtns.com/github-btn.html?user=apachecn&repo=eloquent-js-3e-zh&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="100px" height="25px"></iframe>',
8 | ' <iframe align="middle" src="https://ghbtns.com/github-btn.html?user=apachecn&repo=eloquent-js-3e-zh&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="25px"></iframe>',
9 | ' <iframe align="middle" src="https://ghbtns.com/github-btn.html?user=apachecn&repo=eloquent-js-3e-zh&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="25px"></iframe>',
10 | ' <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=bcee938030cc9e1552deb3bd9617bbbf62d3ec1647e4b60d9cd6b6e8f78ddc03"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="ML | ApacheCN" title="ML | ApacheCN"></a></p>',
11 | ' <p><span id="cnzz_stat_icon_1275211409"></span></p>',
12 | ' <div style="text-align:center;margin:0 0 10.5px;">',
13 | ' <ins class="adsbygoogle"',
14 | ' style="display:inline-block;width:728px;height:90px"',
15 | ' data-ad-client="ca-pub-3565452474788507"',
16 | ' data-ad-slot="2543897000"></ins>',
17 | ' </div>',
18 | '</div>'
19 | ].join('\n')
20 | var plugin = function(hook) {
21 | hook.afterEach(function(html) {
22 | return html + footer
23 | })
24 | hook.doneEach(function() {
25 | (adsbygoogle = window.adsbygoogle || []).push({})
26 | })
27 | }
28 | var plugins = window.$docsify.plugins || []
29 | plugins.push(plugin)
30 | window.$docsify.plugins = plugins
31 | })()
--------------------------------------------------------------------------------
/asset/docsify-baidu-push.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | var plugin = function(hook) {
3 | hook.doneEach(function() {
4 | new Image().src =
5 | '//api.share.baidu.com/s.gif?r=' +
6 | encodeURIComponent(document.referrer) +
7 | "&l=" + encodeURIComponent(location.href)
8 | })
9 | }
10 | var plugins = window.$docsify.plugins || []
11 | plugins.push(plugin)
12 | window.$docsify.plugins = plugins
13 | })()
--------------------------------------------------------------------------------
/asset/docsify-baidu-stat.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | var plugin = function(hook) {
3 | hook.doneEach(function() {
4 | window._hmt = window._hmt || []
5 | var hm = document.createElement("script")
6 | hm.src = "https://hm.baidu.com/hm.js?" + window.$docsify.bdStatId
7 | document.querySelector("article").appendChild(hm)
8 | })
9 | }
10 | var plugins = window.$docsify.plugins || []
11 | plugins.push(plugin)
12 | window.$docsify.plugins = plugins
13 | })()
--------------------------------------------------------------------------------
/asset/docsify-cnzz.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | var plugin = function(hook) {
3 | hook.doneEach(function() {
4 | var sc = document.createElement('script')
5 | sc.src = 'https://s5.cnzz.com/z_stat.php?id=' +
6 | window.$docsify.cnzzId + '&online=1&show=line'
7 | document.querySelector('article').appendChild(sc)
8 | })
9 | }
10 | var plugins = window.$docsify.plugins || []
11 | plugins.push(plugin)
12 | window.$docsify.plugins = plugins
13 | })()
--------------------------------------------------------------------------------
/asset/docsify-copy-code.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * docsify-copy-code
3 | * v2.1.0
4 | * https://github.com/jperasmus/docsify-copy-code
5 | * (c) 2017-2019 JP Erasmus <jperasmus11@gmail.com>
6 | * MIT license
7 | */
8 | !function(){"use strict";function r(o){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o})(o)}!function(o,e){void 0===e&&(e={});var t=e.insertAt;if(o&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],c=document.createElement("style");c.type="text/css","top"===t&&n.firstChild?n.insertBefore(c,n.firstChild):n.appendChild(c),c.styleSheet?c.styleSheet.cssText=o:c.appendChild(document.createTextNode(o))}}(".docsify-copy-code-button,.docsify-copy-code-button span{cursor:pointer;transition:all .25s ease}.docsify-copy-code-button{position:absolute;z-index:1;top:0;right:0;overflow:visible;padding:.65em .8em;border:0;border-radius:0;outline:0;font-size:1em;background:grey;background:var(--theme-color,grey);color:#fff;opacity:0}.docsify-copy-code-button span{border-radius:3px;background:inherit;pointer-events:none}.docsify-copy-code-button .error,.docsify-copy-code-button .success{position:absolute;z-index:-100;top:50%;left:0;padding:.5em .65em;font-size:.825em;opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.docsify-copy-code-button.error .error,.docsify-copy-code-button.success .success{opacity:1;-webkit-transform:translate(-115%,-50%);transform:translate(-115%,-50%)}.docsify-copy-code-button:focus,pre:hover .docsify-copy-code-button{opacity:1}"),document.querySelector('link[href*="docsify-copy-code"]')&&console.warn("[Deprecation] Link to external docsify-copy-code stylesheet is no longer necessary."),window.DocsifyCopyCodePlugin={init:function(){return function(o,e){o.ready(function(){console.warn("[Deprecation] Manually initializing docsify-copy-code using window.DocsifyCopyCodePlugin.init() is no longer necessary.")})}}},window.$docsify=window.$docsify||{},window.$docsify.plugins=[function(o,s){o.doneEach(function(){var o=Array.apply(null,document.querySelectorAll("pre[data-lang]")),c={buttonText:"Copy to clipboard",errorText:"Error",successText:"Copied"};s.config.copyCode&&Object.keys(c).forEach(function(t){var n=s.config.copyCode[t];"string"==typeof n?c[t]=n:"object"===r(n)&&Object.keys(n).some(function(o){var e=-1<location.href.indexOf(o);return c[t]=e?n[o]:c[t],e})});var e=['<button class="docsify-copy-code-button">','<span class="label">'.concat(c.buttonText,"</span>"),'<span class="error">'.concat(c.errorText,"</span>"),'<span class="success">'.concat(c.successText,"</span>"),"</button>"].join("");o.forEach(function(o){o.insertAdjacentHTML("beforeend",e)})}),o.mounted(function(){document.querySelector(".content").addEventListener("click",function(o){if(o.target.classList.contains("docsify-copy-code-button")){var e="BUTTON"===o.target.tagName?o.target:o.target.parentNode,t=document.createRange(),n=e.parentNode.querySelector("code"),c=window.getSelection();t.selectNode(n),c.removeAllRanges(),c.addRange(t);try{document.execCommand("copy")&&(e.classList.add("success"),setTimeout(function(){e.classList.remove("success")},1e3))}catch(o){console.error("docsify-copy-code: ".concat(o)),e.classList.add("error"),setTimeout(function(){e.classList.remove("error")},1e3)}"function"==typeof(c=window.getSelection()).removeRange?c.removeRange(t):"function"==typeof c.removeAllRanges&&c.removeAllRanges()}})})}].concat(window.$docsify.plugins||[])}();
9 | //# sourceMappingURL=docsify-copy-code.min.js.map
10 |
--------------------------------------------------------------------------------
/asset/prism-darcula.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Darcula theme
3 | *
4 | * Adapted from a theme based on:
5 | * IntelliJ Darcula Theme (https://github.com/bulenkov/Darcula)
6 | *
7 | * @author Alexandre Paradis <service.paradis@gmail.com>
8 | * @version 1.0
9 | */
10 |
11 | code[class*="lang-"],
12 | pre[data-lang] {
13 | color: #a9b7c6 !important;
14 | background-color: #2b2b2b !important;
15 | font-family: Consolas, Monaco, 'Andale Mono', monospace;
16 | direction: ltr;
17 | text-align: left;
18 | white-space: pre;
19 | word-spacing: normal;
20 | word-break: normal;
21 | line-height: 1.5;
22 |
23 | -moz-tab-size: 4;
24 | -o-tab-size: 4;
25 | tab-size: 4;
26 |
27 | -webkit-hyphens: none;
28 | -moz-hyphens: none;
29 | -ms-hyphens: none;
30 | hyphens: none;
31 | }
32 |
33 | pre[data-lang]::-moz-selection, pre[data-lang] ::-moz-selection,
34 | code[class*="lang-"]::-moz-selection, code[class*="lang-"] ::-moz-selection {
35 | color: inherit;
36 | background: rgba(33, 66, 131, .85);
37 | }
38 |
39 | pre[data-lang]::selection, pre[data-lang] ::selection,
40 | code[class*="lang-"]::selection, code[class*="lang-"] ::selection {
41 | color: inherit;
42 | background: rgba(33, 66, 131, .85);
43 | }
44 |
45 | /* Code blocks */
46 | pre[data-lang] {
47 | padding: 1em;
48 | margin: .5em 0;
49 | overflow: auto;
50 | }
51 |
52 | :not(pre) > code[class*="lang-"],
53 | pre[data-lang] {
54 | background: #2b2b2b;
55 | }
56 |
57 | /* Inline code */
58 | :not(pre) > code[class*="lang-"] {
59 | padding: .1em;
60 | border-radius: .3em;
61 | }
62 |
63 | .token.comment,
64 | .token.prolog,
65 | .token.cdata {
66 | color: #808080;
67 | }
68 |
69 | .token.delimiter,
70 | .token.boolean,
71 | .token.keyword,
72 | .token.selector,
73 | .token.important,
74 | .token.atrule {
75 | color: #cc7832;
76 | }
77 |
78 | .token.operator,
79 | .token.punctuation,
80 | .token.attr-name {
81 | color: #a9b7c6;
82 | }
83 |
84 | .token.tag,
85 | .token.tag .punctuation,
86 | .token.doctype,
87 | .token.builtin {
88 | color: #e8bf6a;
89 | }
90 |
91 | .token.entity,
92 | .token.number,
93 | .token.symbol {
94 | color: #6897bb;
95 | }
96 |
97 | .token.property,
98 | .token.constant,
99 | .token.variable {
100 | color: #9876aa;
101 | }
102 |
103 | .token.string,
104 | .token.char {
105 | color: #6a8759;
106 | }
107 |
108 | .token.attr-value,
109 | .token.attr-value .punctuation {
110 | color: #a5c261;
111 | }
112 |
113 | .token.attr-value .punctuation:first-child {
114 | color: #a9b7c6;
115 | }
116 |
117 | .token.url {
118 | color: #287bde;
119 | text-decoration: underline;
120 | }
121 |
122 | .token.function {
123 | color: #ffc66d;
124 | }
125 |
126 | .token.regex {
127 | background: #364135;
128 | }
129 |
130 | .token.bold {
131 | font-weight: bold;
132 | }
133 |
134 | .token.italic {
135 | font-style: italic;
136 | }
137 |
138 | .token.inserted {
139 | background: #294436;
140 | }
141 |
142 | .token.deleted {
143 | background: #484a4a;
144 | }
145 |
146 | code.lang-css .token.property,
147 | code.lang-css .token.property + .token.punctuation {
148 | color: #a9b7c6;
149 | }
150 |
151 | code.lang-css .token.id {
152 | color: #ffc66d;
153 | }
154 |
155 | code.lang-css .token.selector > .token.class,
156 | code.lang-css .token.selector > .token.attribute,
157 | code.lang-css .token.selector > .token.pseudo-class,
158 | code.lang-css .token.selector > .token.pseudo-element {
159 | color: #ffc66d;
160 | }
--------------------------------------------------------------------------------
/asset/prism-javascript.min.js:
--------------------------------------------------------------------------------
1 | Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|(?:get|set)(?=\s*[\[$\w\xA0-\uFFFF])|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,function:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)?\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:[_$A-Za-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()]|\([^()]*\))+?(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript;
--------------------------------------------------------------------------------
/asset/search.min.js:
--------------------------------------------------------------------------------
1 | !function(){var h={},f={EXPIRE_KEY:"docsify.search.expires",INDEX_KEY:"docsify.search.index"};function l(e){var n={"&":"&","<":"<",">":">",'"':""","'":"'"};return String(e).replace(/[&<>"']/g,function(e){return n[e]})}function p(e){return e.text||"table"!==e.type||(e.cells.unshift(e.header),e.text=e.cells.map(function(e){return e.join(" | ")}).join(" |\n ")),e.text}function u(r,e,i,o){void 0===e&&(e="");var s,n=window.marked.lexer(e),c=window.Docsify.slugify,d={};return n.forEach(function(e){if("heading"===e.type&&e.depth<=o){var n=function(e){void 0===e&&(e="");var a={};return{str:e=e&&e.replace(/^'/,"").replace(/'$/,"").replace(/(?:^|\s):([\w-]+:?)=?([\w-%]+)?/g,function(e,n,t){return-1===n.indexOf(":")?(a[n]=t&&t.replace(/"/g,"")||!0,""):e}).trim(),config:a}}(e.text),t=n.str,a=n.config;s=a.id?i.toURL(r,{id:c(a.id)}):i.toURL(r,{id:c(l(e.text))}),d[s]={slug:s,title:t,body:""}}else{if(!s)return;d[s]?d[s].body?(e.text=p(e),d[s].body+="\n"+(e.text||"")):(e.text=p(e),d[s].body=d[s].body?d[s].body+e.text:e.text):d[s]={slug:s,title:"",body:""}}}),c.clear(),d}function c(e){var r=[],i=[];Object.keys(h).forEach(function(n){i=i.concat(Object.keys(h[n]).map(function(e){return h[n][e]}))});var o=(e=e.trim()).split(/[\s\-，\\/]+/);1!==o.length&&(o=[].concat(e,o));function n(e){var n=i[e],s=0,c="",d=n.title&&n.title.trim(),p=n.body&&n.body.trim(),t=n.slug||"";if(d&&(o.forEach(function(e){var n,t=new RegExp(e.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&"),"gi"),a=-1;if(n=d?d.search(t):-1,a=p?p.search(t):-1,0<=n||0<=a){s+=0<=n?3:0<=a?2:0,a<0&&(a=0);var r,i=0;i=0==(r=a<11?0:a-10)?70:a+e.length+60,p&&i>p.length&&(i=p.length);var o="..."+l(p).substring(r,i).replace(t,function(e){return'<em class="search-keyword">'+e+"</em>"})+"...";c+=o}}),0<s)){var a={title:l(d),content:p?c:"",url:t,score:s};r.push(a)}}for(var t=0;t<i.length;t++)n(t);return r.sort(function(e,n){return n.score-e.score})}function i(t,a){var e="auto"===t.paths,n=e?function(r){var i=[];return Docsify.dom.findAll(".sidebar-nav a:not(.section-link):not([data-nosearch])").forEach(function(e){var n=e.href,t=e.getAttribute("href"),a=r.parse(n).path;a&&-1===i.indexOf(a)&&!Docsify.util.isAbsolutePath(t)&&i.push(a)}),i}(a.router):t.paths,r="";if(e&&t.pathNamespaces){var i=n[0];if(Array.isArray(t.pathNamespaces))r=t.pathNamespaces.find(function(e){return i.startsWith(e)})||r;else if(t.pathNamespaces instanceof RegExp){var o=i.match(t.pathNamespaces);o&&(r=o[0])}}var s=function(e){return e?f.EXPIRE_KEY+"/"+e:f.EXPIRE_KEY}(t.namespace)+r,c=function(e){return e?f.INDEX_KEY+"/"+e:f.INDEX_KEY}(t.namespace)+r,d=localStorage.getItem(s)<Date.now();if(h=JSON.parse(localStorage.getItem(c)),d)h={};else if(!e)return;var p=n.length,l=0;n.forEach(function(n){if(h[n])return l++;Docsify.get(a.router.getFile(n),!1,a.config.requestHeaders).then(function(e){h[n]=u(n,e,a.router,t.depth),p===++l&&function(e,n,t){localStorage.setItem(n,Date.now()+e),localStorage.setItem(t,JSON.stringify(h))}(t.maxAge,s,c)})})}var d,m="";function r(e){var n=Docsify.dom.find("div.search"),t=Docsify.dom.find(n,".results-panel"),a=Docsify.dom.find(n,".clear-button"),r=Docsify.dom.find(".sidebar-nav"),i=Docsify.dom.find(".app-name");if(!e)return t.classList.remove("show"),a.classList.remove("show"),t.innerHTML="",void(d.hideOtherSidebarContent&&(r.classList.remove("hide"),i.classList.remove("hide")));var o=c(e),s="";o.forEach(function(e){s+='<div class="matching-post">\n<a href="'+e.url+'">\n<h2>'+e.title+"</h2>\n<p>"+e.content+"</p>\n</a>\n</div>"}),t.classList.add("show"),a.classList.add("show"),t.innerHTML=s||'<p class="empty">'+m+"</p>",d.hideOtherSidebarContent&&(r.classList.add("hide"),i.classList.add("hide"))}function a(e){d=e}function o(e,n){var t=n.router.parse().query.s;a(e),Docsify.dom.style("\n.sidebar {\n padding-top: 0;\n}\n\n.search {\n margin-bottom: 20px;\n padding: 6px;\n border-bottom: 1px solid #eee;\n}\n\n.search .input-wrap {\n display: flex;\n align-items: center;\n}\n\n.search .results-panel {\n display: none;\n}\n\n.search .results-panel.show {\n display: block;\n}\n\n.search input {\n outline: none;\n border: none;\n width: 100%;\n padding: 0 7px;\n line-height: 36px;\n font-size: 14px;\n border: 1px solid transparent;\n}\n\n.search input:focus {\n box-shadow: 0 0 5px var(--theme-color, #42b983);\n border: 1px solid var(--theme-color, #42b983);\n}\n\n.search input::-webkit-search-decoration,\n.search input::-webkit-search-cancel-button,\n.search input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.search .clear-button {\n cursor: pointer;\n width: 36px;\n text-align: right;\n display: none;\n}\n\n.search .clear-button.show {\n display: block;\n}\n\n.search .clear-button svg {\n transform: scale(.5);\n}\n\n.search h2 {\n font-size: 17px;\n margin: 10px 0;\n}\n\n.search a {\n text-decoration: none;\n color: inherit;\n}\n\n.search .matching-post {\n border-bottom: 1px solid #eee;\n}\n\n.search .matching-post:last-child {\n border-bottom: 0;\n}\n\n.search p {\n font-size: 14px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n\n.search p.empty {\n text-align: center;\n}\n\n.app-name.hide, .sidebar-nav.hide {\n display: none;\n}"),function(e){void 0===e&&(e="");var n='<div class="input-wrap">\n <input type="search" value="'+e+'" aria-label="Search text" />\n <div class="clear-button">\n <svg width="26" height="24">\n <circle cx="12" cy="12" r="11" fill="#ccc" />\n <path stroke="white" stroke-width="2" d="M8.25,8.25,15.75,15.75" />\n <path stroke="white" stroke-width="2"d="M8.25,15.75,15.75,8.25" />\n </svg>\n </div>\n </div>\n <div class="results-panel"></div>\n </div>',t=Docsify.dom.create("div",n),a=Docsify.dom.find("aside");Docsify.dom.toggleClass(t,"search"),Docsify.dom.before(a,t)}(t),function(){var e,n=Docsify.dom.find("div.search"),t=Docsify.dom.find(n,"input"),a=Docsify.dom.find(n,".input-wrap");Docsify.dom.on(n,"click",function(e){return-1===["A","H2","P","EM"].indexOf(e.target.tagName)&&e.stopPropagation()}),Docsify.dom.on(t,"input",function(n){clearTimeout(e),e=setTimeout(function(e){return r(n.target.value.trim())},100)}),Docsify.dom.on(a,"click",function(e){"INPUT"!==e.target.tagName&&(t.value="",r())})}(),t&&setTimeout(function(e){return r(t)},500)}function s(e,n){a(e),function(e,n){var t=Docsify.dom.getNode('.search input[type="search"]');if(t)if("string"==typeof e)t.placeholder=e;else{var a=Object.keys(e).filter(function(e){return-1<n.indexOf(e)})[0];t.placeholder=e[a]}}(e.placeholder,n.route.path),function(e,n){if("string"==typeof e)m=e;else{var t=Object.keys(e).filter(function(e){return-1<n.indexOf(e)})[0];m=e[t]}}(e.noData,n.route.path)}var g={placeholder:"Type to search",noData:"No Results!",paths:"auto",depth:2,maxAge:864e5,hideOtherSidebarContent:!1,namespace:void 0,pathNamespaces:void 0};$docsify.plugins=[].concat(function(e,n){var t=Docsify.util,a=n.config.search||g;Array.isArray(a)?g.paths=a:"object"==typeof a&&(g.paths=Array.isArray(a.paths)?a.paths:"auto",g.maxAge=t.isPrimitive(a.maxAge)?a.maxAge:g.maxAge,g.placeholder=a.placeholder||g.placeholder,g.noData=a.noData||g.noData,g.depth=a.depth||g.depth,g.hideOtherSidebarContent=a.hideOtherSidebarContent||g.hideOtherSidebarContent,g.namespace=a.namespace||g.namespace,g.pathNamespaces=a.pathNamespaces||g.pathNamespaces);var r="auto"===g.paths;e.mounted(function(e){o(g,n),r||i(g,n)}),e.doneEach(function(e){s(g,n),r&&i(g,n)})},$docsify.plugins)}();
2 |
--------------------------------------------------------------------------------
/asset/style.css:
--------------------------------------------------------------------------------
1 | /*隐藏头部的目录*/
2 | #main>ul:nth-child(1) {
3 | display: none;
4 | }
5 |
6 | #main>ul:nth-child(2) {
7 | display: none;
8 | }
9 |
10 | .markdown-section h1 {
11 | margin: 3rem 0 2rem 0;
12 | }
13 |
14 | .markdown-section h2 {
15 | margin: 2rem 0 1rem;
16 | }
17 |
18 | img,
19 | pre {
20 | border-radius: 8px;
21 | }
22 |
23 | .content,
24 | .sidebar,
25 | .markdown-section,
26 | body,
27 | .search input {
28 | background-color: rgba(243, 242, 238, 1) !important;
29 | }
30 |
31 | @media (min-width:600px) {
32 | .sidebar-toggle {
33 | background-color: #f3f2ee;
34 | }
35 | }
36 |
37 | .docsify-copy-code-button {
38 | background: #f8f8f8 !important;
39 | color: #7a7a7a !important;
40 | }
41 |
42 | body {
43 | /*font-family: Microsoft YaHei, Source Sans Pro, Helvetica Neue, Arial, sans-serif !important;*/
44 | }
45 |
46 | .markdown-section>p {
47 | font-size: 16px !important;
48 | }
49 |
50 | .markdown-section pre>code {
51 | font-family: Consolas, Roboto Mono, Monaco, courier, monospace !important;
52 | font-size: .9rem !important;
53 |
54 | }
55 |
56 | /*.anchor span {
57 | color: rgb(66, 185, 131);
58 | }*/
59 |
60 | section.cover h1 {
61 | margin: 0;
62 | }
63 |
64 | body>section>div.cover-main>ul>li>a {
65 | color: #42b983;
66 | }
67 |
68 | .markdown-section img {
69 | box-shadow: 7px 9px 10px #aaa !important;
70 | }
71 |
72 |
73 | pre {
74 | background-color: #f3f2ee !important;
75 | }
76 |
77 | @media (min-width:600px) {
78 | pre code {
79 | /*box-shadow: 2px 1px 20px 2px #aaa;*/
80 | /*border-radius: 10px !important;*/
81 | padding-left: 20px !important;
82 | }
83 | }
84 |
85 | @media (max-width:600px) {
86 | pre {
87 | padding-left: 0px !important;
88 | padding-right: 0px !important;
89 | }
90 | }
91 |
92 | .markdown-section pre {
93 | padding-left: 0 !important;
94 | padding-right: 0px !important;
95 | box-shadow: 2px 1px 20px 2px #aaa;
96 | }
--------------------------------------------------------------------------------
/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/cover.jpg
--------------------------------------------------------------------------------
/img/0-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/0-0.jpg
--------------------------------------------------------------------------------
/img/1-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/1-0.jpg
--------------------------------------------------------------------------------
/img/10-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/10-0.jpg
--------------------------------------------------------------------------------
/img/11-1.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="445" height="210" viewBox="-2 -2 445 210"><style type="text/css">
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | </style>
10 | <g><text x="0" y="14" font-family="PT Mono">synchronous, single thread of control</text><path d="M 0.5 40.5 L 20.5 40.5" stroke="#44f" stroke-width="5"></path><path d="M 20 40 L 180 40" stroke="#c22" stroke-width="2"></path><ellipse cx="20" cy="40" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><path d="M 180.5 40.5 L 200.5 40.5" stroke="#44f" stroke-width="5"></path><path d="M 200 40 L 400 40" stroke="#c22" stroke-width="2"></path><ellipse cx="200" cy="40" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><path d="M 400.5 40.5 L 440.5 40.5" stroke="#44f" stroke-width="5"></path><text x="0" y="71" font-family="PT Mono">synchronous, two threads of control</text><path d="M 0.5 95.5 L 20.5 95.5" stroke="#44f" stroke-width="5"></path><path d="M 20 95 L 180 95" stroke="#c22" stroke-width="2"></path><ellipse cx="20" cy="95" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><path d="M 220.5 95.5 L 260.5 95.5" stroke="#44f" stroke-width="5"></path><path d="M 0.5 120.5 L 20.5 120.5" stroke="#44f" stroke-width="5"></path><path d="M 20 120 L 220 120" stroke="#c22" stroke-width="2"></path><ellipse cx="20" cy="120" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><path d="M 220.5 120.5 L 240.5 120.5" stroke="#44f" stroke-width="5"></path><text x="0" y="151" font-family="PT Mono">asynchronous</text><path d="M 20 175 a 30 30 0 0 0 30 30 l 82 0 a 30 30 0 0 0 30 -30" stroke="#c22" fill="none" stroke-width="2"></path><path d="M 40 175 a 15 15 0 0 0 15 15 l 152 0 a 15 15 0 0 0 15 -15" stroke="#c22" fill="none" stroke-width="2"></path><path d="M 0.5 175.5 L 60.5 175.5" stroke="#44f" stroke-width="5"></path><path d="M 20 175 L 20 175" stroke="#c22" stroke-width="2"></path><ellipse cx="20" cy="175" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><path d="M 40 175 L 40 175" stroke="#c22" stroke-width="2"></path><ellipse cx="40" cy="175" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><path d="M 160.5 175.5 L 180.5 175.5" stroke="#44f" stroke-width="5"></path><path d="M 220.5 175.5 L 260.5 175.5" stroke="#44f" stroke-width="5"></path></g></svg>
11 |
--------------------------------------------------------------------------------
/img/11-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/11-2.png
--------------------------------------------------------------------------------
/img/12-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/12-0.jpg
--------------------------------------------------------------------------------
/img/12-1.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="169" height="240" viewBox="-7 -10 169 240"><style>
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | .ast-text { font-family: "PT Mono"; font-size: 14px; stroke: none; }
10 | </style>
11 | <g><ellipse cx="0" cy="0" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="13" y="4.5" class="ast-text">do</text><ellipse cx="30" cy="20" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="43" y="24.5" class="ast-text">define</text><path d="M 0.5 5.5 L 0.5 10.5 A 10 10 0 0 0 10.5 20.5 L 25.5 20.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(25.5 20.5) rotate(90) scale(1)"></path><ellipse cx="60" cy="40" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="73" y="44.5" class="ast-text">x</text><path d="M 30.5 25.5 L 30.5 30.5 A 10 10 0 0 0 40.5 40.5 L 55.5 40.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(55.5 40.5) rotate(90) scale(1)"></path><ellipse cx="60" cy="60" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="73" y="64.5" class="ast-text">10</text><path d="M 30.5 25.5 L 30.5 50.5 A 10 10 0 0 0 40.5 60.5 L 55.5 60.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(55.5 60.5) rotate(90) scale(1)"></path><ellipse cx="30" cy="80" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="43" y="84.5" class="ast-text">if</text><path d="M 0.5 5.5 L 0.5 70.5 A 10 10 0 0 0 10.5 80.5 L 25.5 80.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(25.5 80.5) rotate(90) scale(1)"></path><ellipse cx="60" cy="100" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="73" y="104.5" class="ast-text">></text><path d="M 30.5 85.5 L 30.5 90.5 A 10 10 0 0 0 40.5 100.5 L 55.5 100.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(55.5 100.5) rotate(90) scale(1)"></path><ellipse cx="90" cy="120" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="103" y="124.5" class="ast-text">x</text><path d="M 60.5 105.5 L 60.5 110.5 A 10 10 0 0 0 70.5 120.5 L 85.5 120.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(85.5 120.5) rotate(90) scale(1)"></path><ellipse cx="90" cy="140" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="103" y="144.5" class="ast-text">5</text><path d="M 60.5 105.5 L 60.5 130.5 A 10 10 0 0 0 70.5 140.5 L 85.5 140.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(85.5 140.5) rotate(90) scale(1)"></path><ellipse cx="60" cy="160" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="73" y="164.5" class="ast-text">print</text><path d="M 30.5 85.5 L 30.5 150.5 A 10 10 0 0 0 40.5 160.5 L 55.5 160.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(55.5 160.5) rotate(90) scale(1)"></path><ellipse cx="90" cy="180" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="103" y="184.5" class="ast-text">"large"</text><path d="M 60.5 165.5 L 60.5 170.5 A 10 10 0 0 0 70.5 180.5 L 85.5 180.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(85.5 180.5) rotate(90) scale(1)"></path><ellipse cx="60" cy="200" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="73" y="204.5" class="ast-text">print</text><path d="M 30.5 85.5 L 30.5 190.5 A 10 10 0 0 0 40.5 200.5 L 55.5 200.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(55.5 200.5) rotate(90) scale(1)"></path><ellipse cx="90" cy="220" rx="5" ry="5" fill="black" width="10" height="10"></ellipse><text x="103" y="224.5" class="ast-text">"small"</text><path d="M 60.5 205.5 L 60.5 210.5 A 10 10 0 0 0 70.5 220.5 L 85.5 220.5" stroke="black" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(85.5 220.5) rotate(90) scale(1)"></path></g></svg>
--------------------------------------------------------------------------------
/img/13-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/13-0.jpg
--------------------------------------------------------------------------------
/img/14-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/14-0.jpg
--------------------------------------------------------------------------------
/img/14-1.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="369" height="429" viewBox="-268 -358 369 429"><style type="text/css">
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | .leaf {
10 | font-family: "Georgia";
11 | font-size: 15px;
12 | }
13 | .wraptext {
14 | font-family: "PT Mono";
15 | font-size: 14px;
16 | }
17 | .wrap {
18 | border-radius: 4px;
19 | stroke-width: 1px; stroke: #666;
20 | fill: none;
21 | }
22 | </style>
23 | <g><text x="0" y="16" class="leaf">here</text><text x="0" y="-11" class="wraptext">a</text><rect x="-11.5" y="-28.5" width="57" height="61" class="wrap" rx="4" ry="4"></rect><text x="57" y="16" class="leaf">.</text><text x="-230" y="16" class="leaf">I also wrote a book! Read it</text><text x="-230" y="-19.5" class="wraptext">p</text><rect x="-241.5" y="-37.5" width="316" height="82" class="wrap" rx="4" ry="4"></rect><text x="-230" y="-65.5" class="leaf">Hello, I am Marijn and this is...</text><text x="-230" y="-92.5" class="wraptext">p</text><rect x="-241.5" y="-110.5" width="316" height="61" class="wrap" rx="4" ry="4"></rect><text x="-230" y="-138.5" class="leaf">My home page</text><text x="-230" y="-165.5" class="wraptext">h1</text><rect x="-241.5" y="-183.5" width="316" height="61" class="wrap" rx="4" ry="4"></rect><text x="-241.5" y="-194.5" class="wraptext">body</text><rect x="-253.5" y="-212.5" width="340" height="269" class="wrap" rx="4" ry="4"></rect><text x="-230" y="-252.5" class="leaf">My home page</text><text x="-230" y="-279.5" class="wraptext">title</text><rect x="-241.5" y="-297.5" width="316" height="61" class="wrap" rx="4" ry="4"></rect><text x="-241.5" y="-308.5" class="wraptext">head</text><rect x="-253.5" y="-326.5" width="340" height="102" class="wrap" rx="4" ry="4"></rect><text x="-253.5" y="-337.5" class="wraptext">html</text><rect x="-265.5" y="-355.5" width="364" height="424" class="wrap" rx="4" ry="4"></rect></g></svg>
24 |
--------------------------------------------------------------------------------
/img/14-2.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="439" height="259" viewBox="-2 -2 439 259"><style type="text/css">
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | .box {
10 | stroke: #666;
11 | fill: url(#boxgrad);
12 | border-radius: 4px;
13 | }
14 | .leafbox {
15 | fill: url(#leafgrad);
16 | }
17 | .boxtext {
18 | font-size: 18px;
19 | font-family: "PT Mono";
20 | stroke: none;
21 | fill: black;
22 | }
23 | .leafboxtext { font-family: "Georgia"; }
24 | .arrow { stroke: black; }
25 | </style>
26 | <defs>
27 | <linearGradient id="boxgrad" x1="0" x2="0" y1="0" y2="1">
28 | <stop stop-color="#f8f8f8" offset="0%"></stop>
29 | <stop stop-color="#e8e8f2" offset="100%"></stop>
30 | </linearGradient>
31 | <linearGradient id="leafgrad" x1="0" x2="0" y1="0" y2="1">
32 | <stop stop-color="#f8f8f8" offset="0%"></stop>
33 | <stop stop-color="#caf0f0" offset="100%"></stop>
34 | </linearGradient>
35 | </defs>
36 | <g><rect x="0.5" y="0.5" width="66" height="30" class="box" rx="4" ry="4"></rect><text x="9.700000000000001" y="23" class="boxtext" fill="black" stroke="none">html</text><rect x="91.5" y="0.5" width="66" height="30" class="box" rx="4" ry="4"></rect><text x="100.7" y="23" class="boxtext" fill="black" stroke="none">head</text><path d="M 66.5 15.5 L 91.5 15.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(91.5 15.5) rotate(90) scale(1)"></path><rect x="182.5" y="0.5" width="78" height="30" class="box" rx="4" ry="4"></rect><text x="191.7" y="23" class="boxtext" fill="black" stroke="none">title</text><path d="M 157.5 15.5 L 182.5 15.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(182.5 15.5) rotate(90) scale(1)"></path><rect x="285.5" y="0.5" width="149" height="29" class="box leafbox" rx="4" ry="4"></rect><text x="294.3" y="22.25" class="boxtext leafboxtext" fill="black" stroke="none">My home page</text><path d="M 260.5 15.5 L 285.5 15.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(285.5 15.5) rotate(90) scale(1)"></path><rect x="91.5" y="45.5" width="66" height="30" class="box" rx="4" ry="4"></rect><text x="100.7" y="68" class="boxtext" fill="black" stroke="none">body</text><path d="M 74.5 15.5 L 74.5 56.5 A 4 4 0 0 0 78.5 60.5 L 91.5 60.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(91.5 60.5) rotate(90) scale(1)"></path><rect x="182.5" y="45.5" width="78" height="30" class="box" rx="4" ry="4"></rect><text x="191.7" y="68" class="boxtext" width="78" fill="black" stroke="none">h1</text><path d="M 157.5 60.5 L 182.5 60.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(182.5 60.5) rotate(90) scale(1)"></path><rect x="285.5" y="45.5" width="149" height="29" class="box leafbox" rx="4" ry="4"></rect><text x="294.3" y="67.25" class="boxtext leafboxtext" fill="black" stroke="none">My home page</text><path d="M 260.5 60.5 L 285.5 60.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(285.5 60.5) rotate(90) scale(1)"></path><rect x="182.5" y="90.5" width="78" height="30" class="box" rx="4" ry="4"></rect><text x="191.7" y="113" class="boxtext" width="78" fill="black" stroke="none">p</text><path d="M 165.5 60.5 L 165.5 101.5 A 4 4 0 0 0 169.5 105.5 L 182.5 105.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(182.5 105.5) rotate(90) scale(1)"></path><rect x="285.5" y="90.5" width="149" height="29" class="box leafbox" rx="4" ry="4"></rect><text x="294.3" y="112.25" class="boxtext leafboxtext" width="149" fill="black" stroke="none">Hello! I am...</text><path d="M 260.5 105.5 L 285.5 105.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(285.5 105.5) rotate(90) scale(1)"></path><rect x="182.5" y="135.5" width="78" height="30" class="box" rx="4" ry="4"></rect><text x="191.7" y="158" class="boxtext" width="78" fill="black" stroke="none">p</text><path d="M 165.5 60.5 L 165.5 146.5 A 4 4 0 0 0 169.5 150.5 L 182.5 150.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(182.5 150.5) rotate(90) scale(1)"></path><rect x="285.5" y="135.5" width="149" height="29" class="box leafbox" rx="4" ry="4"></rect><text x="294.3" y="157.25" class="boxtext leafboxtext" width="149" fill="black" stroke="none">I also wrote...</text><path d="M 260.5 150.5 L 285.5 150.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(285.5 150.5) rotate(90) scale(1)"></path><rect x="376.5" y="180.5" width="58" height="29" class="box leafbox" rx="4" ry="4"></rect><text x="385.3" y="202.25" class="boxtext leafboxtext" fill="black" stroke="none">here</text><rect x="285.5" y="180.5" width="66" height="30" class="box" rx="4" ry="4"></rect><text x="294.7" y="203" class="boxtext" width="66" fill="black" stroke="none">a</text><path d="M 268.5 150.5 L 268.5 191.5 A 4 4 0 0 0 272.5 195.5 L 285.5 195.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(285.5 195.5) rotate(90) scale(1)"></path><path d="M 351.5 195.5 L 376.5 195.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(376.5 195.5) rotate(90) scale(1)"></path><rect x="285.5" y="225.5" width="23" height="29" class="box leafbox" rx="4" ry="4"></rect><text x="294.3" y="247.25" class="boxtext leafboxtext" fill="black" stroke="none">.</text><path d="M 268.5 150.5 L 268.5 236.5 A 4 4 0 0 0 272.5 240.5 L 285.5 240.5" class="arrow" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(285.5 240.5) rotate(90) scale(1)"></path></g></svg>
37 |
--------------------------------------------------------------------------------
/img/14-3.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="357" height="317" viewBox="-245 -250 357 317"><style type="text/css">
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | .leaf {
10 | font-family: "Georgia";
11 | font-size: 17px;
12 | }
13 | .wraptext, .linktext, .index {
14 | font-family: "PT Mono";
15 | font-size: 14px;
16 | }
17 | .wrap {
18 | border-radius: 4px;
19 | stroke: #666;
20 | fill: none;
21 | }
22 | .link { stroke: #6aa; }
23 | .linktext, .index { fill: #6aa; }
24 | </style>
25 | <g><text x="-167" y="16" class="leaf">I also wrote a book! ...</text><text x="-167" y="-11" class="wraptext">p</text><rect x="-178.5" y="-28.5" width="191" height="61" class="wrap" rx="4" ry="4"></rect><text x="-167" y="-68.5" class="leaf">Hello, I am Marijn...</text><text x="-167" y="-95.5" class="wraptext">p</text><rect x="-178.5" y="-113.5" width="191" height="61" class="wrap" rx="4" ry="4"></rect><text x="-167" y="-153.5" class="leaf">My home page</text><text x="-167" y="-180.5" class="wraptext">h1</text><rect x="-178.5" y="-198.5" width="191" height="61" class="wrap" rx="4" ry="4"></rect><text x="-178.5" y="-209.5" class="wraptext">body</text><rect x="-190.5" y="-227.5" width="215" height="272" class="wrap" rx="4" ry="4"></rect><text x="-230.5" y="-180.5" class="index">0</text><text x="-230.5" y="-95.5" class="index">1</text><text x="-230.5" y="-11" class="index">2</text><rect x="-242.5" y="-204.5" width="32" height="209" class="wrap" rx="4" ry="4"></rect><path d="M -210.5 -184.5 L -178.5 -184.5" class="link" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 170, 170)" transform="translate(-178.5 -184.5) rotate(90) scale(1)"></path><path d="M -210.5 -99.5 L -178.5 -99.5" class="link" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 170, 170)" transform="translate(-178.5 -99.5) rotate(90) scale(1)"></path><path d="M -210.5 -15.5 L -178.5 -15.5" class="link" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 170, 170)" transform="translate(-178.5 -15.5) rotate(90) scale(1)"></path><path d="M -175.5 -227.5 L -175.5 -232.5 A 7 7 0 0 0 -182.5 -239.5 L -219.5 -239.5 A 7 7 0 0 0 -226.5 -232.5 L -226.5 -204.5" class="link" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 170, 170)" transform="translate(-226.5 -204.5) rotate(180) scale(1)"></path><text x="-170.5" y="-235.5" class="linktext">childNodes</text><path d="M -42.5 -227.5 L -42.5 -232.5 A 7 7 0 0 0 -49.5 -239.5 L -55.5 -239.5 A 7 7 0 0 0 -62.5 -232.5 L -62.5 -198.5" class="link" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 170, 170)" transform="translate(-62.5 -198.5) rotate(180) scale(1)"></path><text x="-38" y="-235.5" class="linktext">firstChild</text><path d="M -42.5 44.5 L -42.5 49.5 A 7 7 0 0 1 -49.5 56.5 L -55.5 56.5 A 7 7 0 0 1 -62.5 49.5 L -62.5 32.5" class="link" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 170, 170)" transform="translate(-62.5 32.5) scale(1)"></path><text x="-38" y="61.5" class="linktext">lastChild</text><path d="M -158.5 -113.5 L -158.5 -137.5" class="link" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 170, 170)" transform="translate(-158.5 -137.5) scale(1)"></path><text x="-153.5" y="-121" class="linktext">previousSibling</text><path d="M -158.5 -52.5 L -158.5 -28.5" class="link" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 170, 170)" transform="translate(-158.5 -28.5) rotate(180) scale(1)"></path><text x="-153.5" y="-36" class="linktext">nextSibling</text><path d="M 12.5 -82.5 L 31.5 -82.5 A 7 7 0 0 0 38.5 -89.5 L 38.5 -95.5 A 7 7 0 0 0 31.5 -102.5 L 31.5 -102.5 L 24.5 -102.5" class="link" fill="none"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 170, 170)" transform="translate(24.5 -102.5) rotate(270) scale(1)"></path><text x="29.5" y="-66" class="linktext">parentNode</text></g></svg>
26 |
--------------------------------------------------------------------------------
/img/14-4.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="252" height="167" viewBox="-131 -84 252 167"><style type="text/css">
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | .caption { font-family: 'PT Mono'; font-size: 13px; }
10 | </style>
11 | <g><path d="M 0.5 -79.5 L 0.5 80.5" stroke="black"></path><path d="M -79.5 0.5 L 80.5 0.5" stroke="black"></path><path d="M 14.7 3 A 15 15 0 1 1 10.6 -10.6" stroke="black" fill="none"></path><path d="M 12.5 -8.5 L 13.5 -7.5" stroke="black"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(13.5 -7.5) rotate(135) scale(1)"></path><ellipse cx="0" cy="0" rx="60" ry="60" stroke="black" fill="none" width="120" height="120"></ellipse><ellipse cx="42.426406871192846" cy="42.426406871192846" rx="3" ry="3" fill="#44f" width="6" height="6"></ellipse><path d="M 0.5 42.5 L 39.5 42.5" stroke="#44f"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(68, 68, 255)" transform="translate(39.5 42.5) rotate(90) scale(1)"></path><path d="M 42.5 0.5 L 42.5 39.5" stroke="#44f"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(68, 68, 255)" transform="translate(42.5 39.5) rotate(180) scale(1)"></path><text x="32.426406871192846" y="64.42640687119285" class="caption" fill="#44f">cos(¼π)</text><text x="62.426406871192846" y="29.426406871192846" class="caption" fill="#44f">sin(¼π)</text><ellipse cx="-30.000000000544134" cy="-51.961524226752175" rx="3" ry="3" fill="#0a0" width="6" height="6"></ellipse><path d="M 0.5 -51.5 L -27.5 -51.5" stroke="#0a0"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 170, 0)" transform="translate(-27.5 -51.5) rotate(270) scale(1)"></path><path d="M -30.5 0.5 L -30.5 -48.5" stroke="#0a0"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 170, 0)" transform="translate(-30.5 -48.5) scale(1)"></path><text x="-84.00000000054413" y="-69.96152422675218" class="caption" fill="#0a0">cos(-⅔π)</text><text x="-129.00000000054413" y="-29.961524226752175" class="caption" fill="#0a0">sin(-⅔π)</text></g></svg>
12 |
--------------------------------------------------------------------------------
/img/15-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/15-0.jpg
--------------------------------------------------------------------------------
/img/16-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/16-0.jpg
--------------------------------------------------------------------------------
/img/16-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/16-1.png
--------------------------------------------------------------------------------
/img/16-2.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="125" height="105" viewBox="-2 -2 125 105"><g><rect x="40" y="20" width="40" height="60" fill="#e0e0ff"></rect><g><path d="M 20.5 0.5 L 20.5 100.5" width="120" height="100" stroke-width="1" stroke="#888"></path><path d="M 40.5 0.5 L 40.5 100.5" width="120" height="100" stroke-width="1" stroke="#888"></path><path d="M 60.5 0.5 L 60.5 100.5" width="120" height="100" stroke-width="1" stroke="#888"></path><path d="M 80.5 0.5 L 80.5 100.5" width="120" height="100" stroke-width="1" stroke="#888"></path><path d="M 100.5 0.5 L 100.5 100.5" width="120" height="100" stroke-width="1" stroke="#888"></path><path d="M 0.5 20.5 L 120.5 20.5" width="120" height="100" stroke-width="1" stroke="#888"></path><path d="M 0.5 40.5 L 120.5 40.5" width="120" height="100" stroke-width="1" stroke="#888"></path><path d="M 0.5 60.5 L 120.5 60.5" width="120" height="100" stroke-width="1" stroke="#888"></path><path d="M 0.5 80.5 L 120.5 80.5" width="120" height="100" stroke-width="1" stroke="#888"></path></g><rect x="55" y="37" width="16" height="30" fill="#404040"></rect></g></svg>
--------------------------------------------------------------------------------
/img/17-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/17-0.jpg
--------------------------------------------------------------------------------
/img/17-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/17-1.png
--------------------------------------------------------------------------------
/img/17-2.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="635" height="224" viewBox="-82 -82 635 224"><style type="text/css">
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | .caption { font-family: 'PT Mono'; font-size: 13px; }
10 | </style>
11 | <g><path d="M 0.5 -79.5 L 0.5 80.5" stroke="black"></path><path d="M -79.5 0.5 L 80.5 0.5" stroke="black"></path><path d="M 0.5 -79.5 L 0.5 80.5" stroke="#0a0" transform="translate(50 50)"></path><path d="M -79.5 0.5 L 80.5 0.5" stroke="#0a0" transform="translate(50 50)"></path><path d="M 0.5 0.5 L 50.5 50.5" stroke="#0a0"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 170, 0)" transform="translate(50.5 50.5) rotate(135) scale(1)"></path><path d="M 0.5 -79.5 L 0.5 80.5" stroke="#44f" transform="translate(50 50) rotate(20)"></path><path d="M -79.5 0.5 L 80.5 0.5" stroke="#44f" transform="translate(50 50) rotate(20)"></path><path d="M 110.5 50.5 L 110.5 72.5" stroke="#44f"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(68, 68, 255)" transform="translate(110.5 72.5) rotate(180) scale(1)"></path><text x="75" y="27" fill="#0a0" class="caption">translate(50, 50)</text><text x="130" y="67" fill="#44f" class="caption">rotate(0.1*Math.PI)</text><path d="M 0.5 -79.5 L 0.5 80.5" stroke="black" transform="translate(360 0)"></path><path d="M -79.5 0.5 L 80.5 0.5" stroke="black" transform="translate(360 0)"></path><path d="M 0.5 -79.5 L 0.5 80.5" stroke="#0a0" transform="translate(360 0) rotate(20)"></path><path d="M -79.5 0.5 L 80.5 0.5" stroke="#0a0" transform="translate(360 0) rotate(20)"></path><path d="M 360.5 -59.5 L 380.5 -59.5" stroke="#0a0"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 170, 0)" transform="translate(380.5 -59.5) rotate(90) scale(1)"></path><path d="M 0.5 -79.5 L 0.5 80.5" stroke="#44f" transform="translate(360 0) rotate(20) translate(50, 50)"></path><path d="M -79.5 0.5 L 80.5 0.5" stroke="#44f" transform="translate(360 0) rotate(20) translate(50, 50)"></path><path d="M 360.5 0.5 L 390.5 65.5" stroke="#44f"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(68, 68, 255)" transform="translate(390.5 65.5) rotate(155.22485943116808) scale(1)"></path><text x="390" y="-48" fill="#0a0" class="caption">rotate(0.1*Math.PI)</text><text x="415" y="57" fill="#44f" class="caption">translate(50, 50)</text></g></svg>
12 |
--------------------------------------------------------------------------------
/img/17-3.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="152" viewBox="-62 -84 324 152"><style type="text/css">
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | .caption { font-family: 'PT Mono'; font-size: 13px; }
10 | </style>
11 | <g><path d="M 0.5 -59.5 L 0.5 60.5" stroke="black"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(0.5 60.5) rotate(180) scale(1)"></path><path d="M -59.5 0.5 L 60.5 0.5" stroke="black"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(0, 0, 0)" transform="translate(60.5 0.5) rotate(90) scale(1)"></path><path d="M 0.5 -59.5 L 0.5 60.5" stroke="black" transform="translate(200 0) scale(-1 1)"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(200 0) scale(-1 1) translate(0.5 60.5) rotate(180) scale(1)" stroke="none" fill="rgb(0, 0, 0)"></path><path d="M -59.5 0.5 L 60.5 0.5" stroke="black" transform="translate(200 0) scale(-1 1)"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" transform="translate(200 0) scale(-1 1) translate(60.5 0.5) rotate(90) scale(1)" stroke="none" fill="rgb(0, 0, 0)"></path><path d="M 100.5 -64.5 L 100.5 65.5" stroke="#888"></path><text x="76" y="-70" fill="#888" class="caption">mirror</text><path d="M -15 -25 L 30 0 L -15 25 z" stroke="#0a0" fill="none" transform="translate(100 0)"></path><path d="M -15 -25 L 30 0 L -15 25 z" stroke="#44f" fill="none" transform="translate(200 0)"></path><path d="M -15 -25 L 30 0 L -15 25 z" stroke="#f44" fill="none" transform="scale(-1 1)"></path><path d="M -15 -25 L 30 0 L -15 25 z" stroke="black" fill="none" transform="scale(-1 1) translate(-100 0)"></path><text x="72" y="-18" fill="#0a0" class="caption">1</text><text x="172" y="-18" fill="#44f" class="caption">2</text><text x="20" y="-18" fill="#f44" class="caption">3</text><text x="120" y="-18" fill="black" class="caption">4</text></g></svg>
12 |
--------------------------------------------------------------------------------
/img/17-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/17-4.png
--------------------------------------------------------------------------------
/img/17-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/17-5.png
--------------------------------------------------------------------------------
/img/18-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/18-0.jpg
--------------------------------------------------------------------------------
/img/19-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/19-0.jpg
--------------------------------------------------------------------------------
/img/19-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/19-1.png
--------------------------------------------------------------------------------
/img/19-2.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="355" height="155" viewBox="-2 -2 355 155"><g><rect x="0" y="15" width="75" height="15" fill="#bbbbff"></rect><rect x="75" y="30" width="60" height="15" fill="#bbbbff"></rect><rect x="135" y="45" width="15" height="60" fill="#bbbbff"></rect><rect x="60" y="105" width="75" height="15" fill="#bbbbff"></rect><rect x="75" y="45" width="15" height="30" fill="#bbbbff"></rect><rect x="45" y="30" width="15" height="75" fill="#bbbbff"></rect><rect x="90" y="120" width="30" height="30" fill="#bbbbff"></rect><rect x="15" y="90" width="15" height="30" fill="#bbbbff"></rect><g><path d="M 15.5 0.5 L 15.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 30.5 0.5 L 30.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 45.5 0.5 L 45.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 60.5 0.5 L 60.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 75.5 0.5 L 75.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 90.5 0.5 L 90.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 105.5 0.5 L 105.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 120.5 0.5 L 120.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 135.5 0.5 L 135.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 15.5 L 150.5 15.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 30.5 L 150.5 30.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 45.5 L 150.5 45.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 60.5 L 150.5 60.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 75.5 L 150.5 75.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 90.5 L 150.5 90.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 105.5 L 150.5 105.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 120.5 L 150.5 120.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 135.5 L 150.5 135.5" width="150" height="150" stroke-width="1" stroke="#444"></path><rect x="0.5" y="0.5" width="150" height="150" stroke-width="1" stroke="#444" fill="none"></rect></g><ellipse cx="112.5" cy="67.5" rx="3.75" ry="3.75" fill="#a33" width="7.5" height="7.5"></ellipse><rect x="275" y="75" width="15" height="30" fill="#ffe6c0"></rect><rect x="290" y="45" width="45" height="60" fill="#ffe6c0"></rect><rect x="260" y="30" width="15" height="75" fill="#ffe6c0"></rect><rect x="200" y="15" width="75" height="15" fill="#bbbbff"></rect><rect x="275" y="30" width="60" height="15" fill="#bbbbff"></rect><rect x="335" y="45" width="15" height="60" fill="#bbbbff"></rect><rect x="260" y="105" width="75" height="15" fill="#bbbbff"></rect><rect x="275" y="45" width="15" height="30" fill="#bbbbff"></rect><rect x="245" y="30" width="15" height="75" fill="#bbbbff"></rect><rect x="290" y="120" width="30" height="30" fill="#bbbbff"></rect><rect x="215" y="90" width="15" height="30" fill="#bbbbff"></rect><g><path d="M 215.5 0.5 L 215.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 230.5 0.5 L 230.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 245.5 0.5 L 245.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 260.5 0.5 L 260.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 275.5 0.5 L 275.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 290.5 0.5 L 290.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 305.5 0.5 L 305.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 320.5 0.5 L 320.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 335.5 0.5 L 335.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 15.5 L 350.5 15.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 30.5 L 350.5 30.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 45.5 L 350.5 45.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 60.5 L 350.5 60.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 75.5 L 350.5 75.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 90.5 L 350.5 90.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 105.5 L 350.5 105.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 120.5 L 350.5 120.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 135.5 L 350.5 135.5" width="150" height="150" stroke-width="1" stroke="#444"></path><rect x="200.5" y="0.5" width="150" height="150" stroke-width="1" stroke="#444" fill="none"></rect></g><ellipse cx="312.5" cy="67.5" rx="3.75" ry="3.75" fill="#a33" width="7.5" height="7.5"></ellipse></g></svg>
--------------------------------------------------------------------------------
/img/19-3.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="355" height="155" viewBox="-2 -2 355 155"><g><rect x="30" y="15" width="15" height="15" fill="#000"></rect><rect x="45" y="30" width="15" height="15" fill="#000"></rect><rect x="45" y="45" width="15" height="15" fill="#000"></rect><rect x="60" y="60" width="15" height="15" fill="#000"></rect><rect x="75" y="75" width="15" height="15" fill="#000"></rect><rect x="90" y="90" width="15" height="15" fill="#000"></rect><rect x="90" y="105" width="15" height="15" fill="#000"></rect><rect x="105" y="120" width="15" height="15" fill="#000"></rect><g><path d="M 15.5 0.5 L 15.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 30.5 0.5 L 30.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 45.5 0.5 L 45.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 60.5 0.5 L 60.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 75.5 0.5 L 75.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 90.5 0.5 L 90.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 105.5 0.5 L 105.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 120.5 0.5 L 120.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 135.5 0.5 L 135.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 15.5 L 150.5 15.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 30.5 L 150.5 30.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 45.5 L 150.5 45.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 60.5 L 150.5 60.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 75.5 L 150.5 75.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 90.5 L 150.5 90.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 105.5 L 150.5 105.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 120.5 L 150.5 120.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 0.5 135.5 L 150.5 135.5" width="150" height="150" stroke-width="1" stroke="#444"></path><rect x="0.5" y="0.5" width="150" height="150" stroke-width="1" stroke="#444" fill="none"></rect></g><ellipse cx="37.5" cy="22.5" rx="3.75" ry="3.75" fill="#fff" width="7.5" height="7.5"></ellipse><ellipse cx="112.5" cy="127.5" rx="3.75" ry="3.75" fill="#fff" width="7.5" height="7.5"></ellipse><rect x="230" y="15" width="15" height="15" fill="#000"></rect><rect x="230" y="30" width="15" height="15" fill="#000"></rect><rect x="245" y="30" width="15" height="15" fill="#000"></rect><rect x="245" y="45" width="15" height="15" fill="#000"></rect><rect x="245" y="60" width="15" height="15" fill="#000"></rect><rect x="260" y="60" width="15" height="15" fill="#000"></rect><rect x="260" y="75" width="15" height="15" fill="#000"></rect><rect x="275" y="75" width="15" height="15" fill="#000"></rect><rect x="275" y="90" width="15" height="15" fill="#000"></rect><rect x="290" y="90" width="15" height="15" fill="#000"></rect><rect x="290" y="105" width="15" height="15" fill="#000"></rect><rect x="290" y="120" width="15" height="15" fill="#000"></rect><rect x="305" y="120" width="15" height="15" fill="#000"></rect><g><path d="M 215.5 0.5 L 215.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 230.5 0.5 L 230.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 245.5 0.5 L 245.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 260.5 0.5 L 260.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 275.5 0.5 L 275.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 290.5 0.5 L 290.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 305.5 0.5 L 305.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 320.5 0.5 L 320.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 335.5 0.5 L 335.5 150.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 15.5 L 350.5 15.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 30.5 L 350.5 30.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 45.5 L 350.5 45.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 60.5 L 350.5 60.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 75.5 L 350.5 75.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 90.5 L 350.5 90.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 105.5 L 350.5 105.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 120.5 L 350.5 120.5" width="150" height="150" stroke-width="1" stroke="#444"></path><path d="M 200.5 135.5 L 350.5 135.5" width="150" height="150" stroke-width="1" stroke="#444"></path><rect x="200.5" y="0.5" width="150" height="150" stroke-width="1" stroke="#444" fill="none"></rect></g><ellipse cx="237.5" cy="22.5" rx="3.75" ry="3.75" fill="#fff" width="7.5" height="7.5"></ellipse><ellipse cx="312.5" cy="127.5" rx="3.75" ry="3.75" fill="#fff" width="7.5" height="7.5"></ellipse></g></svg>
--------------------------------------------------------------------------------
/img/2-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/2-0.jpg
--------------------------------------------------------------------------------
/img/2-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/2-1.png
--------------------------------------------------------------------------------
/img/2-2.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
3 |
4 | <svg
5 | xmlns:dc="http://purl.org/dc/elements/1.1/"
6 | xmlns:cc="http://creativecommons.org/ns#"
7 | xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8 | xmlns:svg="http://www.w3.org/2000/svg"
9 | xmlns="http://www.w3.org/2000/svg"
10 | xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11 | xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12 | width="204.48096"
13 | height="19.999929"
14 | id="svg3216"
15 | version="1.1"
16 | inkscape:version="0.48.4 r9939"
17 | sodipodi:docname="New document 8">
18 | <defs
19 | id="defs3218">
20 | <marker
21 | inkscape:stockid="Arrow1Send"
22 | orient="auto"
23 | refY="0"
24 | refX="0"
25 | id="Arrow1Send"
26 | style="overflow:visible">
27 | <path
28 | id="path3774"
29 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
30 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
31 | transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
32 | inkscape:connector-curvature="0" />
33 | </marker>
34 | </defs>
35 | <sodipodi:namedview
36 | id="base"
37 | pagecolor="#ffffff"
38 | bordercolor="#666666"
39 | borderopacity="1.0"
40 | inkscape:pageopacity="0.0"
41 | inkscape:pageshadow="2"
42 | inkscape:zoom="0.35"
43 | inkscape:cx="156.78125"
44 | inkscape:cy="-138.56231"
45 | inkscape:document-units="px"
46 | inkscape:current-layer="layer1"
47 | showgrid="false"
48 | fit-margin-top="0"
49 | fit-margin-left="0"
50 | fit-margin-right="0"
51 | fit-margin-bottom="0"
52 | inkscape:window-width="1600"
53 | inkscape:window-height="875"
54 | inkscape:window-x="0"
55 | inkscape:window-y="25"
56 | inkscape:window-maximized="0" />
57 | <metadata
58 | id="metadata3221">
59 | <rdf:RDF>
60 | <cc:Work
61 | rdf:about="">
62 | <dc:format>image/svg+xml</dc:format>
63 | <dc:type
64 | rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
65 | <dc:title></dc:title>
66 | </cc:Work>
67 | </rdf:RDF>
68 | </metadata>
69 | <g
70 | inkscape:label="Layer 1"
71 | inkscape:groupmode="layer"
72 | id="layer1"
73 | transform="translate(-218.21875,-373.79994)">
74 | <path
75 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)"
76 | d="m 218.236,384.24914 190.41375,0"
77 | id="path5135"
78 | inkscape:connector-curvature="0"
79 | sodipodi:nodetypes="cc" />
80 | </g>
81 | </svg>
82 |
--------------------------------------------------------------------------------
/img/2-3.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
3 |
4 | <svg
5 | xmlns:dc="http://purl.org/dc/elements/1.1/"
6 | xmlns:cc="http://creativecommons.org/ns#"
7 | xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8 | xmlns:svg="http://www.w3.org/2000/svg"
9 | xmlns="http://www.w3.org/2000/svg"
10 | xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11 | xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12 | width="205.10103"
13 | height="85.750778"
14 | id="svg3283"
15 | version="1.1"
16 | inkscape:version="0.48.4 r9939"
17 | sodipodi:docname="New document 11">
18 | <defs
19 | id="defs3285">
20 | <marker
21 | inkscape:stockid="Arrow1Send"
22 | orient="auto"
23 | refY="0"
24 | refX="0"
25 | id="Arrow1Send"
26 | style="overflow:visible">
27 | <path
28 | id="path3774"
29 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
30 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
31 | transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
32 | inkscape:connector-curvature="0" />
33 | </marker>
34 | <marker
35 | inkscape:stockid="Arrow1Send"
36 | orient="auto"
37 | refY="0"
38 | refX="0"
39 | id="marker3266"
40 | style="overflow:visible">
41 | <path
42 | id="path3268"
43 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
44 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
45 | transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
46 | inkscape:connector-curvature="0" />
47 | </marker>
48 | <marker
49 | inkscape:stockid="Arrow1Send"
50 | orient="auto"
51 | refY="0"
52 | refX="0"
53 | id="marker3270"
54 | style="overflow:visible">
55 | <path
56 | id="path3272"
57 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
58 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
59 | transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
60 | inkscape:connector-curvature="0" />
61 | </marker>
62 | <marker
63 | inkscape:stockid="Arrow1Send"
64 | orient="auto"
65 | refY="0"
66 | refX="0"
67 | id="marker3274"
68 | style="overflow:visible">
69 | <path
70 | id="path3276"
71 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
72 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
73 | transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
74 | inkscape:connector-curvature="0" />
75 | </marker>
76 | </defs>
77 | <sodipodi:namedview
78 | id="base"
79 | pagecolor="#ffffff"
80 | bordercolor="#666666"
81 | borderopacity="1.0"
82 | inkscape:pageopacity="0.0"
83 | inkscape:pageshadow="2"
84 | inkscape:zoom="0.35"
85 | inkscape:cx="1288.581"
86 | inkscape:cy="-271.41478"
87 | inkscape:document-units="px"
88 | inkscape:current-layer="layer1"
89 | showgrid="false"
90 | fit-margin-top="0"
91 | fit-margin-left="0"
92 | fit-margin-right="0"
93 | fit-margin-bottom="0"
94 | inkscape:window-width="1600"
95 | inkscape:window-height="875"
96 | inkscape:window-x="0"
97 | inkscape:window-y="25"
98 | inkscape:window-maximized="0" />
99 | <metadata
100 | id="metadata3288">
101 | <rdf:RDF>
102 | <cc:Work
103 | rdf:about="">
104 | <dc:format>image/svg+xml</dc:format>
105 | <dc:type
106 | rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
107 | <dc:title></dc:title>
108 | </cc:Work>
109 | </rdf:RDF>
110 | </metadata>
111 | <g
112 | inkscape:label="Layer 1"
113 | inkscape:groupmode="layer"
114 | id="layer1"
115 | transform="translate(913.58095,-175.19662)">
116 | <g
117 | id="g3322"
118 | transform="matrix(0,-1,1,0,-1032.3622,-596.20924)">
119 | <path
120 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)"
121 | d="m -815.78349,118.91917 1.01015,27.77919"
122 | id="path4943"
123 | inkscape:connector-curvature="0"
124 | sodipodi:nodetypes="cc" />
125 | <path
126 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)"
127 | d="m -807.70227,168.41664 c 0,0 67.6802,38.3858 7.07106,95.9645"
128 | id="path5139"
129 | inkscape:connector-curvature="0"
130 | sodipodi:nodetypes="cc" />
131 | <path
132 | sodipodi:nodetypes="cc"
133 | inkscape:connector-curvature="0"
134 | id="path5141"
135 | d="m -813.76319,274.48267 1.01015,35.35534"
136 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)" />
137 | <path
138 | sodipodi:nodetypes="cc"
139 | inkscape:connector-curvature="0"
140 | id="path5159"
141 | d="m -820.86915,168.41664 c 0,0 -67.68021,38.3858 -7.07106,95.9645"
142 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)" />
143 | <path
144 | transform="translate(-888.97485,115.42425)"
145 | d="m 80.307123,50.755318 c 0,3.347351 -2.713564,6.060915 -6.060915,6.060915 -3.347351,0 -6.060915,-2.713564 -6.060915,-6.060915 0,-3.347351 2.713564,-6.060915 6.060915,-6.060915 3.347351,0 6.060915,2.713564 6.060915,6.060915 z"
146 | sodipodi:ry="6.060915"
147 | sodipodi:rx="6.060915"
148 | sodipodi:cy="50.755318"
149 | sodipodi:cx="74.246208"
150 | id="path3001"
151 | style="fill:#ff0000;fill-opacity:1;stroke:none"
152 | sodipodi:type="arc" />
153 | </g>
154 | </g>
155 | </svg>
156 |
--------------------------------------------------------------------------------
/img/2-4.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
3 |
4 | <svg
5 | xmlns:dc="http://purl.org/dc/elements/1.1/"
6 | xmlns:cc="http://creativecommons.org/ns#"
7 | xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8 | xmlns:svg="http://www.w3.org/2000/svg"
9 | xmlns="http://www.w3.org/2000/svg"
10 | xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11 | xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12 | width="238.24316"
13 | height="104.35892"
14 | id="svg2"
15 | version="1.1"
16 | inkscape:version="0.48.4 r9939"
17 | sodipodi:docname="controlflow-nested-else.svg">
18 | <defs
19 | id="defs4">
20 | <marker
21 | inkscape:stockid="Arrow1Send"
22 | orient="auto"
23 | refY="0"
24 | refX="0"
25 | id="Arrow1Send"
26 | style="overflow:visible">
27 | <path
28 | id="path3774"
29 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
30 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
31 | transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
32 | inkscape:connector-curvature="0" />
33 | </marker>
34 | <marker
35 | inkscape:stockid="Arrow2Mend"
36 | orient="auto"
37 | refY="0"
38 | refX="0"
39 | id="Arrow2Mend"
40 | style="overflow:visible">
41 | <path
42 | id="path3786"
43 | style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
44 | d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
45 | transform="scale(-0.6,-0.6)"
46 | inkscape:connector-curvature="0" />
47 | </marker>
48 | <marker
49 | inkscape:stockid="Arrow1Mend"
50 | orient="auto"
51 | refY="0"
52 | refX="0"
53 | id="Arrow1Mend"
54 | style="overflow:visible">
55 | <path
56 | id="path3768"
57 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
58 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
59 | transform="matrix(-0.4,0,0,-0.4,-4,0)"
60 | inkscape:connector-curvature="0" />
61 | </marker>
62 | <marker
63 | inkscape:stockid="Arrow1Lend"
64 | orient="auto"
65 | refY="0"
66 | refX="0"
67 | id="Arrow1Lend"
68 | style="overflow:visible">
69 | <path
70 | id="path3762"
71 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
72 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
73 | transform="matrix(-0.8,0,0,-0.8,-10,0)"
74 | inkscape:connector-curvature="0" />
75 | </marker>
76 | </defs>
77 | <sodipodi:namedview
78 | id="base"
79 | pagecolor="#ffffff"
80 | bordercolor="#666666"
81 | borderopacity="1.0"
82 | inkscape:pageopacity="0.0"
83 | inkscape:pageshadow="2"
84 | inkscape:zoom="2.8"
85 | inkscape:cx="182.61224"
86 | inkscape:cy="45.356254"
87 | inkscape:document-units="px"
88 | inkscape:current-layer="layer1"
89 | showgrid="false"
90 | showguides="true"
91 | inkscape:guide-bbox="true"
92 | inkscape:window-width="1600"
93 | inkscape:window-height="875"
94 | inkscape:window-x="0"
95 | inkscape:window-y="25"
96 | inkscape:window-maximized="0"
97 | fit-margin-top="0"
98 | fit-margin-left="0"
99 | fit-margin-right="3"
100 | fit-margin-bottom="0" />
101 | <metadata
102 | id="metadata7">
103 | <rdf:RDF>
104 | <cc:Work
105 | rdf:about="">
106 | <dc:format>image/svg+xml</dc:format>
107 | <dc:type
108 | rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
109 | <dc:title></dc:title>
110 | </cc:Work>
111 | </rdf:RDF>
112 | </metadata>
113 | <g
114 | inkscape:label="Layer 1"
115 | inkscape:groupmode="layer"
116 | id="layer1"
117 | transform="translate(-222.69525,-394.46429)">
118 | <path
119 | sodipodi:nodetypes="cc"
120 | inkscape:connector-curvature="0"
121 | id="path4943"
122 | d="m 226.69525,431.70744 27.77919,1.01015"
123 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)" />
124 | <path
125 | sodipodi:nodetypes="cc"
126 | inkscape:connector-curvature="0"
127 | id="path5139"
128 | d="m 274.76415,441.21724 c 2.14286,43.57143 36.60008,44.46591 47.39307,47.42819"
129 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)" />
130 | <path
131 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)"
132 | d="m 411.18732,433.72774 35.35534,1.01015"
133 | id="path5141"
134 | inkscape:connector-curvature="0"
135 | sodipodi:nodetypes="cc" />
136 | <path
137 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)"
138 | d="m 278.69272,425.19321 c 0,0 60.8858,-56.96593 122.75021,-4.57106"
139 | id="path5159"
140 | inkscape:connector-curvature="0"
141 | sodipodi:nodetypes="cc" />
142 | <path
143 | sodipodi:type="arc"
144 | style="fill:#ff0000;fill-opacity:1;stroke:none"
145 | id="path3001"
146 | sodipodi:cx="74.246208"
147 | sodipodi:cy="50.755318"
148 | sodipodi:rx="6.060915"
149 | sodipodi:ry="6.060915"
150 | d="m 80.307123,50.755318 a 6.060915,6.060915 0 1 1 -12.12183,0 6.060915,6.060915 0 1 1 12.12183,0 z"
151 | transform="matrix(0,1,1,0,223.20033,358.51608)" />
152 | <path
153 | transform="matrix(0,1,1,0,291.77176,418.51608)"
154 | d="m 80.307123,50.755318 a 6.060915,6.060915 0 1 1 -12.12183,0 6.060915,6.060915 0 1 1 12.12183,0 z"
155 | sodipodi:ry="6.060915"
156 | sodipodi:rx="6.060915"
157 | sodipodi:cy="50.755318"
158 | sodipodi:cx="74.246208"
159 | id="path3002"
160 | style="fill:#ff0000;fill-opacity:1;stroke:none"
161 | sodipodi:type="arc" />
162 | <path
163 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)"
164 | d="m 341.54987,484.43152 c 0,0 0.96327,-38.82118 55.9645,-46.85751"
165 | id="path3004"
166 | inkscape:connector-curvature="0"
167 | sodipodi:nodetypes="cc" />
168 | <path
169 | sodipodi:nodetypes="cc"
170 | inkscape:connector-curvature="0"
171 | id="path3006"
172 | d="m 350.83558,490.14581 c 24.92879,-3.90484 44.71588,-30.84607 52.03593,-41.14323"
173 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)" />
174 | </g>
175 | </svg>
176 |
--------------------------------------------------------------------------------
/img/2-5.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
3 |
4 | <svg
5 | xmlns:dc="http://purl.org/dc/elements/1.1/"
6 | xmlns:cc="http://creativecommons.org/ns#"
7 | xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8 | xmlns:svg="http://www.w3.org/2000/svg"
9 | xmlns="http://www.w3.org/2000/svg"
10 | xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11 | xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12 | width="206.31815"
13 | height="72.428215"
14 | id="svg2"
15 | version="1.1"
16 | inkscape:version="0.48.4 r9939"
17 | sodipodi:docname="controlflow-loop.svg">
18 | <defs
19 | id="defs4">
20 | <marker
21 | inkscape:stockid="Arrow1Send"
22 | orient="auto"
23 | refY="0"
24 | refX="0"
25 | id="Arrow1Send"
26 | style="overflow:visible">
27 | <path
28 | id="path3774"
29 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
30 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
31 | transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
32 | inkscape:connector-curvature="0" />
33 | </marker>
34 | <marker
35 | inkscape:stockid="Arrow2Mend"
36 | orient="auto"
37 | refY="0"
38 | refX="0"
39 | id="Arrow2Mend"
40 | style="overflow:visible">
41 | <path
42 | id="path3786"
43 | style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
44 | d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
45 | transform="scale(-0.6,-0.6)"
46 | inkscape:connector-curvature="0" />
47 | </marker>
48 | <marker
49 | inkscape:stockid="Arrow1Mend"
50 | orient="auto"
51 | refY="0"
52 | refX="0"
53 | id="Arrow1Mend"
54 | style="overflow:visible">
55 | <path
56 | id="path3768"
57 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
58 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
59 | transform="matrix(-0.4,0,0,-0.4,-4,0)"
60 | inkscape:connector-curvature="0" />
61 | </marker>
62 | <marker
63 | inkscape:stockid="Arrow1Lend"
64 | orient="auto"
65 | refY="0"
66 | refX="0"
67 | id="Arrow1Lend"
68 | style="overflow:visible">
69 | <path
70 | id="path3762"
71 | d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
72 | style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
73 | transform="matrix(-0.8,0,0,-0.8,-10,0)"
74 | inkscape:connector-curvature="0" />
75 | </marker>
76 | </defs>
77 | <sodipodi:namedview
78 | id="base"
79 | pagecolor="#ffffff"
80 | bordercolor="#666666"
81 | borderopacity="1.0"
82 | inkscape:pageopacity="0.0"
83 | inkscape:pageshadow="2"
84 | inkscape:zoom="2.8"
85 | inkscape:cx="30.225462"
86 | inkscape:cy="52.400366"
87 | inkscape:document-units="px"
88 | inkscape:current-layer="layer1"
89 | showgrid="false"
90 | showguides="true"
91 | inkscape:guide-bbox="true"
92 | inkscape:window-width="1600"
93 | inkscape:window-height="875"
94 | inkscape:window-x="0"
95 | inkscape:window-y="25"
96 | inkscape:window-maximized="0"
97 | fit-margin-top="0"
98 | fit-margin-left="0"
99 | fit-margin-right="0"
100 | fit-margin-bottom="0" />
101 | <metadata
102 | id="metadata7">
103 | <rdf:RDF>
104 | <cc:Work
105 | rdf:about="">
106 | <dc:format>image/svg+xml</dc:format>
107 | <dc:type
108 | rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
109 | <dc:title />
110 | </cc:Work>
111 | </rdf:RDF>
112 | </metadata>
113 | <g
114 | inkscape:label="Layer 1"
115 | inkscape:groupmode="layer"
116 | id="layer1"
117 | transform="translate(-376.5106,-433.43911)">
118 | <path
119 | sodipodi:nodetypes="csc"
120 | inkscape:connector-curvature="0"
121 | id="path5161"
122 | d="m 478.22234,451.00514 c 29.28572,23.75 27.61731,51.59627 -8.71166,51.57646 -36.44966,-0.0199 -18.10635,-25.27225 -9.3957,-39.5054"
123 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)" />
124 | <path
125 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)"
126 | d="m 379.43917,445.98075 73.1512,-1.01015"
127 | id="path3003"
128 | inkscape:connector-curvature="0"
129 | sodipodi:nodetypes="cc" />
130 | <path
131 | sodipodi:nodetypes="cc"
132 | inkscape:connector-curvature="0"
133 | id="path3005"
134 | d="m 482.59676,443.96045 87.76125,-1.01015"
135 | style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-end:url(#Arrow1Send)" />
136 | <path
137 | transform="matrix(0,-1,1,0,422.09693,518.66704)"
138 | d="m 80.307123,50.755318 c 0,3.347351 -2.713564,6.060915 -6.060915,6.060915 -3.347351,0 -6.060915,-2.713564 -6.060915,-6.060915 0,-3.347351 2.713564,-6.060915 6.060915,-6.060915 3.347351,0 6.060915,2.713564 6.060915,6.060915 z"
139 | sodipodi:ry="6.060915"
140 | sodipodi:rx="6.060915"
141 | sodipodi:cy="50.755318"
142 | sodipodi:cx="74.246208"
143 | id="path3004"
144 | style="fill:#ff0000;fill-opacity:1;stroke:none"
145 | sodipodi:type="arc" />
146 | </g>
147 | </svg>
148 |
--------------------------------------------------------------------------------
/img/20-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/20-0.jpg
--------------------------------------------------------------------------------
/img/21-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/21-0.jpg
--------------------------------------------------------------------------------
/img/21-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/21-1.png
--------------------------------------------------------------------------------
/img/3-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/3-0.jpg
--------------------------------------------------------------------------------
/img/4-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/4-0.jpg
--------------------------------------------------------------------------------
/img/4-1.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="505" height="345" viewBox="-2 -2 505 345"><defs>
3 | <g id="squirrel">
4 | <path d="M 30 0 C 13 0 0 14 0 31 C 0 41 5 50 13 55 C 13 55 13 55 13 54 C 13 49 17 44 22 44 C 22 44 24 44 24 45 C 26 45 29 47 30 51 C 30 55 30 60 28 63 L 28 63 C 28 64 26 65 26 67 C 26 69 25 71 25 72 C 25 73 25 73 25 73 C 25 73 25 73 25 73 C 24 85 29 96 39 99 C 42 100 43 100 46 99 C 38 94 36 83 39 74 C 42 69 46 65 50 60 C 54 56 57 50 59 44 C 59 40 61 36 61 32 C 61 32 61 32 61 32 C 61 32 61 31 61 31 C 61 14 47 0 30 0 z" fill="#ea4" stroke="none"></path>
5 | <path d="M 74 14 C 70 17 67 19 64 23 C 64 23 64 23 64 23 C 64 24 64 24 64 26 C 62 32 68 40 76 41 C 86 44 93 40 96 33 C 95 29 91 26 84 23 C 82 22 79 22 78 21 L 74 14 z M 79 26 C 80 26 82 27 82 28 C 82 29 80 31 79 31 C 78 31 76 29 76 28 C 76 27 78 26 79 26 z" fill="#ea4" stroke="none"></path>
6 | <path d="M 68 41 C 68 41 68 41 68 41 L 68 41 L 68 41 C 64 46 57 56 43 71 C 43 72 42 73 42 74 C 39 81 39 88 43 94 C 43 94 45 94 45 95 C 45 95 45 95 45 95 C 46 95 46 95 46 95 C 46 95 46 95 46 95 C 46 96 47 96 47 96 C 49 97 50 97 50 99 C 53 99 55 100 57 100 L 57 100 L 96 100 C 96 100 96 100 96 100 C 99 100 100 97 100 95 C 100 94 99 91 96 91 L 96 91 L 79 91 L 78 91 L 75 91 C 75 91 75 91 75 91 C 75 91 76 91 76 90 C 76 90 78 90 78 90 C 78 90 78 90 78 90 C 78 88 78 88 78 88 C 79 88 79 88 79 88 C 79 88 79 88 79 88 C 84 83 86 77 82 73 C 79 71 76 69 74 68 C 72 68 72 68 71 68 C 71 68 71 68 70 68 C 70 68 70 68 70 68 C 70 68 68 68 68 68 C 68 68 68 68 68 68 C 68 68 68 68 68 68 C 67 68 67 68 67 68 C 67 68 67 68 67 68 C 67 68 66 68 66 68 C 66 68 66 68 66 68 C 64 68 64 69 64 69 C 63 69 63 69 62 69 C 62 69 62 69 62 69 C 61 71 61 71 61 71 C 59 71 59 71 59 72 C 59 72 59 72 59 72 C 58 72 58 72 58 72 C 58 72 58 72 58 72 C 57 73 57 73 57 73 C 57 73 57 73 57 73 C 57 73 57 73 57 73 C 55 74 55 74 55 74 C 55 74 55 74 55 74 C 55 74 55 76 55 76 C 54 76 54 76 54 77 C 54 77 54 77 54 77 L 51 76 C 51 74 53 74 53 73 C 54 72 55 71 57 69 C 61 67 64 65 70 65 C 70 65 71 65 71 65 C 72 65 74 65 74 67 C 74 65 75 65 75 64 C 76 60 79 58 82 56 C 82 56 82 56 82 56 C 83 55 84 55 86 55 L 88 55 C 88 56 91 59 93 59 C 96 59 97 56 97 54 C 97 51 96 49 93 49 L 93 49 L 79 49 L 78 45 C 75 44 71 42 68 41 z" fill="#ea4" stroke="none"></path>
7 | </g>
8 | <g id="pizza">
9 | <path d="M 4 96 L 74 38 A 92 92 0 0 0 4 4 Z" stroke="#b44" stroke-width="8" fill="none" stroke-linejoin="round"></path>
10 | <circle cx="20" cy="20" r="10" fill="#b44"></circle>
11 | <circle cx="40" cy="30" r="9" fill="#b44"></circle>
12 | <circle cx="15" cy="66" r="11" fill="#b44"></circle>
13 | <circle cx="12" cy="36" r="10" fill="#b44"></circle>
14 | <circle cx="37" cy="51" r="11" fill="#b44"></circle>
15 | <circle cx="62" cy="34" r="8" fill="#b44"></circle>
16 | </g>
17 | </defs>
18 | <g><g><path d="M 250 0 L 250 340" width="500" height="340" stroke-width="2" stroke="black"></path><path d="M 0 170 L 500 170" width="500" height="340" stroke-width="2" stroke="black"></path><rect x="0" y="0" width="500" height="340" stroke-width="2" stroke="black" fill="none"></rect></g><use x="150" y="20" opacity="0.3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pizza"></use><use x="20" y="20" opacity="0.3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#squirrel"></use><text x="20" y="156" font-family="Georgia" font-size="17">No squirrel, no pizza</text><text x="199" y="153" font-family="Georgia" font-size="31">76</text><use x="150" y="190" opacity="0.3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pizza"></use><use x="20" y="190" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#squirrel"></use><text x="20" y="326" font-family="Georgia" font-size="17">Squirrel, no pizza</text><text x="214.5" y="323" font-family="Georgia" font-size="31">4</text><use x="400" y="20" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pizza"></use><use x="270" y="20" opacity="0.3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#squirrel"></use><text x="270" y="156" font-family="Georgia" font-size="17">No squirrel, pizza</text><text x="464.5" y="153" font-family="Georgia" font-size="31">9</text><use x="400" y="190" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#pizza"></use><use x="270" y="190" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#squirrel"></use><text x="270" y="326" font-family="Georgia" font-size="17">Squirrel, pizza</text><text x="464.5" y="323" font-family="Georgia" font-size="31">1</text></g></svg>
--------------------------------------------------------------------------------
/img/4-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/4-2.jpg
--------------------------------------------------------------------------------
/img/4-3.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="393" height="76" viewBox="-2 -2 393 76"><style type="text/css">
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | .objtext { font-family: "PT Mono"; font-size: 14px; stroke: none; }
10 | .objbox { border-radius: 2px; fill: white; stroke: black }
11 | .sep { stroke: #666 }
12 | </style>
13 | <g><g><rect x="0.5" y="0.5" width="104" height="51" class="objbox" rx="2" ry="2"></rect><text x="10" y="20" class="objtext">value: 1</text><text x="10" y="40" class="objtext">rest:</text></g><g><rect x="134.5" y="10.5" width="104" height="51" class="objbox" rx="2" ry="2"></rect><text x="144.5" y="30.5" class="objtext">value: 2</text><text x="144.5" y="50.5" class="objtext">rest:</text></g><path d="M 58.5 36.5 L 134.5 36.5" class="sep"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 102, 102)" transform="translate(134.5 36.5) rotate(90) scale(1)"></path><g><rect x="268.5" y="20.5" width="120" height="51" class="objbox" rx="2" ry="2"></rect><text x="278.5" y="40.5" class="objtext">value: 3</text><text x="278.5" y="60.5" class="objtext">rest: null</text></g><path d="M 192.5 47.5 L 268.5 47.5" class="sep"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 102, 102)" transform="translate(268.5 47.5) rotate(90) scale(1)"></path></g></svg>
14 |
--------------------------------------------------------------------------------
/img/5-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/5-0.jpg
--------------------------------------------------------------------------------
/img/5-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/5-1.png
--------------------------------------------------------------------------------
/img/6-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/6-0.jpg
--------------------------------------------------------------------------------
/img/6-1.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" width="621" height="274" viewBox="-4 -82 621 274"><style>
3 | @font-face {
4 | font-family: 'PT Mono';
5 | font-style: normal;
6 | font-weight: 400;
7 | src: local('PT Mono'), local('PTMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptmono/v1/jmle3kzCPnW8O7_gZGRDlQ.woff) format('woff');
8 | }
9 | .objtext { font-family: "PT Mono"; font-size: 14px; stroke: none; }
10 | .objbox { border-radius: 2px; fill: white; stroke: black }
11 | .sep { stroke: #666 }
12 | </style>
13 | <g><g><rect x="210.5" y="133.5" width="202" height="55" class="objbox"></rect><text x="221.5" y="154.5" class="objtext">toString: <function></text><text x="221.5" y="176.5" class="objtext">...</text></g><g><rect x="121.5" y="83.5" width="178" height="55" class="objbox"></rect><text x="132.5" y="104.5" class="objtext">teeth: "small"</text><text x="132.5" y="126.5" class="objtext">speak: <function></text></g><g><rect x="0.5" y="0.5" width="242" height="88" class="objbox"></rect><text x="11" y="21" class="objtext">killerRabbit</text><text x="11" y="54" class="objtext">teeth: "long, sharp, ..."</text><text x="11" y="76" class="objtext">type: "killer"</text><path d="M 0.5 33.5 L 242.5 33.5" class="sep"></path></g><g><rect x="282.5" y="-79.5" width="114" height="66" class="objbox"></rect><text x="293.5" y="-58.5" class="objtext">Rabbit</text><text x="293.5" y="-25.5" class="objtext">prototype</text><path d="M 282.5 -46.5 L 396.5 -46.5" class="sep"></path></g><path d="M 329.5 -19.5 L 259.5 83.5" class="sep"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 102, 102)" transform="translate(259.5 83.5) rotate(214.20048413026853) scale(1)"></path><g><rect x="426.5" y="-9.5" width="186" height="110" class="objbox"></rect><text x="437.5" y="11.5" class="objtext">Object</text><text x="437.5" y="44.5" class="objtext">create: <function></text><text x="437.5" y="66.5" class="objtext">prototype</text><text x="437.5" y="88.5" class="objtext">...</text><path d="M 426.5 23.5 L 612.5 23.5" class="sep"></path></g><path d="M 432.5 70.5 L 331.5 133.5" class="sep"></path><path d="M 0 0 L 3 8 L 0 7 L -3 8 Z" stroke="none" fill="rgb(102, 102, 102)" transform="translate(331.5 133.5) rotate(238.0456370629486) scale(1)"></path></g></svg>
14 |
--------------------------------------------------------------------------------
/img/7-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/7-0.jpg
--------------------------------------------------------------------------------
/img/7-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/7-1.png
--------------------------------------------------------------------------------
/img/8-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/8-0.jpg
--------------------------------------------------------------------------------
/img/9-0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/9-0.jpg
--------------------------------------------------------------------------------
/img/9-1.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg
3 | xmlns:svg="http://www.w3.org/2000/svg"
4 | xmlns="http://www.w3.org/2000/svg"
5 | height="166.23486"
6 | version="1.1"
7 | width="618.75934">
8 | <path
9 | d="m 502.86787,89.225694 h 13.16396"
10 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
11 | id="path4"/>
12 | <path
13 | d="m 405.45455,89.225694 h 13.16396"
14 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
15 | id="path6"/>
16 | <path
17 | d="M 234.32304,89.225694 H 247.487"
18 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
19 | id="path8"/>
20 | <path
21 | d="m 193.51476,89.225694 h 13.16396"
22 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
23 | id="path10"/>
24 | <path
25 | d="m 110.5818,89.225694 h 13.16396"
26 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
27 | id="path12"/>
28 | <path
29 | d="m 418.61851,89.225694 q 13.16396,0 13.16396,-13.16396 v -3.290991 q 0,-13.163962 13.16396,-13.163962 h 31.59351 q 13.16396,0 13.16396,13.163962 v 3.290991 q 0,13.16396 13.16397,13.16396"
30 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
31 | id="path14"/>
32 | <path
33 | d="M 502.86787,89.225694 H 476.53994"
34 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
35 | id="path16"/>
36 | <path
37 | d="m 418.61851,89.225694 h 26.32792"
38 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
39 | id="path18"/>
40 | <path
41 | d="M 405.45455,89.225694 H 392.29059"
42 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
43 | id="path20"/>
44 | <path
45 | d="m 247.487,89.225694 h 13.16396"
46 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
47 | id="path22"/>
48 | <path
49 | d="m 392.29059,89.225694 q -13.16397,0 -13.16397,13.163956 v 19.74595 q 0,13.16396 -13.16396,13.16396 h 0"
50 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
51 | id="path24"/>
52 | <path
53 | d="m 260.65096,89.225694 q 13.16397,0 13.16397,13.163956 v 19.74595 q 0,13.16396 13.16396,13.16396 h 0"
54 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
55 | id="path26"/>
56 | <path
57 | d="m 392.29059,89.225694 c -13.16397,0 -13.16397,0 -39.49189,0"
58 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
59 | id="path28"/>
60 | <path
61 | d="m 260.65096,89.225694 c 13.16397,0 13.16397,0 39.49189,0"
62 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
63 | id="path30"/>
64 | <path
65 | d="m 392.29059,89.225694 q -13.16397,0 -13.16397,-13.16396 V 56.31579 q 0,-13.163962 -13.16396,-13.163962 h -16.45495"
66 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
67 | id="path32"/>
68 | <path
69 | d="m 260.65096,89.225694 q 13.16397,0 13.16397,-13.16396 V 56.31579 q 0,-13.163962 13.16396,-13.163962 h 16.45495"
70 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
71 | id="path34"/>
72 | <path
73 | d="m 180.3508,89.225694 q 13.16396,0 13.16396,13.163956 v 3.29099 q 0,13.16397 -13.16396,13.16397 h -43.44108 q -13.16396,0 -13.16396,-13.16397 v -3.29099 q 0,-13.163956 13.16396,-13.163956"
74 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
75 | id="path36"/>
76 | <path
77 | d="M 193.51476,89.225694 H 180.3508"
78 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
79 | id="path38"/>
80 | <path
81 | d="m 123.74576,89.225694 h 13.16396"
82 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
83 | id="path40"/>
84 | <desc
85 | id="desc42">Created with Raphaël 2.1.0</desc>
86 | <defs
87 | id="defs44" />
88 | <rect
89 | x="206.67871"
90 | y="72.770744"
91 | width="27.64432"
92 | height="32.909904"
93 | r="0"
94 | rx="3.9491887"
95 | ry="3.9491887"
96 | style="fill:#dae9e5;stroke:#dae9e5;stroke-width:1.31639624"
97 | id="rect46" />
98 | <text
99 | x="220.50089"
100 | y="89.225693"
101 | font="10px "Arial""
102 | style="font-size:15.79675484px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
103 | font-size="12px"
104 | id="text48">
105 | <tspan
106 | dy="5.9237828"
107 | id="tspan50">" "</tspan>
108 | </text>
109 | <rect
110 | x="21.562796"
111 | y="72.66703"
112 | width="89.122711"
113 | height="33.117336"
114 | r="0"
115 | rx="2.7850847"
116 | ry="3.974081"
117 | style="fill:#bada55;stroke:#bada55;stroke-width:1.10896111"
118 | id="rect52" />
119 | <text
120 | x="47.394775"
121 | y="89.225693"
122 | font="10px "Arial""
123 | style="font-size:15.79675484px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
124 | font-size="12px"
125 | id="text54">
126 | <tspan
127 | id="tspan56"></tspan>
128 | </text>
129 | <text
130 | x="66.728333"
131 | y="94.361168"
132 | font="10px "Arial""
133 | style="font-size:15.79675484px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
134 | font-size="12px"
135 | id="text3087">
136 | <tspan
137 | id="tspan3089">boundary</tspan>
138 | </text>
139 | <rect
140 | x="515.90363"
141 | y="72.642578"
142 | width="81.317352"
143 | height="33.166233"
144 | r="0"
145 | rx="2.5411673"
146 | ry="3.979948"
147 | style="fill:#bada55;stroke:#bada55;stroke-width:1.06006885"
148 | id="rect58" />
149 | <text
150 | x="556.56232"
151 | y="94.663254"
152 | font="10px "Arial""
153 | style="font-size:15.79675484px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
154 | font-size="12px"
155 | id="text60">
156 | <tspan
157 | id="tspan62">boundary</tspan>
158 | </text>
159 | <rect
160 | x="247.487"
161 | y="13.532914"
162 | width="157.96754"
163 | height="151.38556"
164 | r="0"
165 | rx="3.9491887"
166 | ry="3.9491887"
167 | style="fill:none;stroke:#a0a0a0;stroke-width:2.63279247;stroke-dasharray:7.89837727, 2.63279242"
168 | id="rect64" />
169 | <text
170 | x="276.44772"
171 | y="4.9763379"
172 | font="10px "Arial""
173 | style="font-size:13.16396236px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
174 | font-size="10px"
175 | id="text66">
176 | <tspan
177 | dy="4.6073866"
178 | id="tspan68">Group #1</tspan>
179 | </text>
180 | <rect
181 | x="286.97888"
182 | y="118.8446"
183 | width="78.983772"
184 | height="32.909904"
185 | r="0"
186 | rx="3.9491887"
187 | ry="3.9491887"
188 | style="fill:#dae9e5;stroke:#dae9e5;stroke-width:1.31639624"
189 | id="rect70" />
190 | <text
191 | x="326.47076"
192 | y="135.29956"
193 | font="10px "Arial""
194 | style="font-size:15.79675484px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
195 | font-size="12px"
196 | id="text72">
197 | <tspan
198 | dy="5.9237828"
199 | id="tspan74">"chicken"</tspan>
200 | </text>
201 | <rect
202 | x="300.14285"
203 | y="72.770744"
204 | width="52.655849"
205 | height="32.909904"
206 | r="0"
207 | rx="3.9491887"
208 | ry="3.9491887"
209 | style="fill:#dae9e5;stroke:#dae9e5;stroke-width:1.31639624"
210 | id="rect76" />
211 | <text
212 | x="326.47076"
213 | y="89.225693"
214 | font="10px "Arial""
215 | style="font-size:15.79675484px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
216 | font-size="12px"
217 | id="text78">
218 | <tspan
219 | dy="5.9237828"
220 | id="tspan80">"cow"</tspan>
221 | </text>
222 | <rect
223 | x="303.43384"
224 | y="26.696877"
225 | width="46.073868"
226 | height="32.909904"
227 | r="0"
228 | rx="3.9491887"
229 | ry="3.9491887"
230 | style="fill:#dae9e5;stroke:#dae9e5;stroke-width:1.31639624"
231 | id="rect82" />
232 | <text
233 | x="326.47076"
234 | y="43.151829"
235 | font="10px "Arial""
236 | style="font-size:15.79675484px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
237 | font-size="12px"
238 | id="text84">
239 | <tspan
240 | dy="5.9237828"
241 | id="tspan86">"pig"</tspan>
242 | </text>
243 | <rect
244 | x="136.90971"
245 | y="72.770744"
246 | width="43.441074"
247 | height="32.909904"
248 | r="0"
249 | rx="3.9491887"
250 | ry="3.9491887"
251 | style="fill:#bada55;stroke:#bada55;stroke-width:1.31639624"
252 | id="rect88" />
253 | <text
254 | x="158.63025"
255 | y="89.225693"
256 | font="10px "Arial""
257 | style="font-size:15.79675484px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
258 | font-size="12px"
259 | id="text90">
260 | <tspan
261 | dy="5.9237828"
262 | id="tspan92">digit</tspan>
263 | </text>
264 | <rect
265 | x="444.94644"
266 | y="72.770744"
267 | width="31.59351"
268 | height="32.909904"
269 | r="0"
270 | rx="3.9491887"
271 | ry="3.9491887"
272 | style="fill:#dae9e5;stroke:#dae9e5;stroke-width:1.31639624"
273 | id="rect94" />
274 | <text
275 | x="460.74319"
276 | y="89.225693"
277 | font="10px "Arial""
278 | style="font-size:15.79675484px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
279 | font-size="12px"
280 | id="text96">
281 | <tspan
282 | dy="5.9237828"
283 | id="tspan98">"s"</tspan>
284 | </text>
285 | <path
286 | d="M 7.8983762,89.225694 H 21.062338"
287 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
288 | id="path100"/>
289 | <circle
290 | cx="10"
291 | cy="80.5"
292 | r="5"
293 | style="fill:#6b6659;stroke:#000000;stroke-width:2"
294 | id="circle102"
295 | transform="matrix(1.3163962,0,0,1.3163962,-5.2655848,-16.744199)" />
296 | <path
297 | d="M 610.86099,88.62152 H 597.69703"
298 | style="fill:none;stroke:#000000;stroke-width:2.63279247"
299 | id="path104"/>
300 | <circle
301 | cx="530"
302 | cy="80.5"
303 | r="5"
304 | style="fill:#6b6659;stroke:#000000;stroke-width:2"
305 | id="circle106"
306 | transform="matrix(1.3163962,0,0,1.3163962,-86.82901,-17.348373)" />
307 | </svg>
308 |
--------------------------------------------------------------------------------
/img/9-2.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" version="1.1" width="578" height="342">
3 | <defs>
4 | <style type="text/css">svg {
5 | background-color: #fff; }
6 |
7 | .root text,
8 | .root tspan {
9 | font: 12px Arial; }
10 |
11 | .root path {
12 | fill-opacity: 0;
13 | stroke-width: 2px;
14 | stroke: #000; }
15 |
16 | .root circle {
17 | fill: #6b6659;
18 | stroke-width: 2px;
19 | stroke: #000; }
20 |
21 | .anchor text, .any-character text {
22 | fill: #fff; }
23 |
24 | .anchor rect, .any-character rect {
25 | fill: #6b6659; }
26 |
27 | .escape text, .charset-escape text, .literal text {
28 | fill: #000; }
29 |
30 | .escape rect, .charset-escape rect {
31 | fill: #bada55; }
32 |
33 | .literal rect {
34 | fill: #dae9e5; }
35 |
36 | .charset .charset-box {
37 | fill: #cbcbba; }
38 |
39 | .subexp .subexp-label tspan,
40 | .charset .charset-label tspan,
41 | .match-fragment .repeat-label tspan {
42 | font-size: 10px; }
43 |
44 | .repeat-label {
45 | cursor: help; }
46 |
47 | .subexp .subexp-label tspan,
48 | .charset .charset-label tspan {
49 | dominant-baseline: text-after-edge; }
50 |
51 | .subexp .subexp-box {
52 | stroke: #908c83;
53 | stroke-dasharray: 6,2;
54 | stroke-width: 2px;
55 | fill-opacity: 0; }
56 |
57 | .quote {
58 | fill: #908c83; }
59 | </style>
60 | </defs>
61 | <metadata>
62 | <rdf:rdf>
63 | <cc:license rdf:about="http://creativecommons.org/licenses/by/3.0/">
64 | <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"></cc:permits>
65 | <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"></cc:permits>
66 | <cc:requires rdf:resource="http://creativecommons.org/ns#Notice"></cc:requires>
67 | <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution"></cc:requires>
68 | <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"></cc:permits>
69 | </cc:license>
70 | </rdf:rdf>
71 | </metadata>
72 | <desc>Created with Snap</desc><g class="root" transform="matrix(1.3,0,0,1.3,15,10)"><g class="regexp match" transform="matrix(1,0,0,1,10,0)"><path d="M92,127H112M282,127H302"></path><g class="match-fragment escape" transform="matrix(1,0,0,1,0,115)"><g class="label"><rect width="92" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan>word boundary</tspan></text></g></g><g class="match-fragment subexp" transform="matrix(1,0,0,1,102,0)"><rect class="subexp-box" rx="3" ry="3" transform="matrix(1,0,0,1,0,11)" width="190" height="232"></rect><text x="0" y="0" class="subexp-label" transform="matrix(1,0,0,1,0,11)"><tspan>group #1</tspan></text><g class="regexp" transform="matrix(1,0,0,1,10,21)"><path d="M10,52.5q0,-10 10,-10M160,52.5q0,-10 -10,-10M10,121.5q0,10 10,10M160,121.5q0,10 -10,10M10,180q0,10 10,10M160,180q0,10 -10,10M0,106q10,0 10,-10V52.5M170,106q-10,0 -10,-10V52.5M0,106q10,0 10,10V180M170,106q-10,0 -10,10V180"></path><g class="regexp-matches" transform="matrix(1,0,0,1,20,0)"><path d="M0,42.5h27.5M112.5,42.5H130M0,131.5h10M130,131.5H130M0,190h46M79,190H130"></path><g class="match" transform="matrix(1,0,0,1,17.5,0)"><path d="M45,42.5H70"></path><g class="match-fragment" transform="matrix(1,0,0,1,0,0)"><path d="M10,42.5q-10,0 -10,10v21.5q0,10 10,10h35q10,0 10,-10v-21.5q0,-10 -10,-10M55,57.5l5,-5m-5,5l-5,-5"></path><g class="charset" transform="matrix(1,0,0,1,10,0)"><rect class="charset-box" rx="3" ry="3" transform="matrix(1,0,0,1,0,11)" width="35" height="63"></rect><text x="0" y="0" class="charset-label" transform="matrix(1,0,0,1,0,11)"><tspan>One of:</tspan></text><g transform="matrix(1,0,0,1,5,16)"><g class="literal" transform="matrix(1,0,0,1,0,0)"><g class="label"><rect width="25" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan class="quote">“</tspan><tspan>0</tspan><tspan class="quote">”</tspan></text></g></g><g class="literal" transform="matrix(1,0,0,1,0,29)"><g class="label"><rect width="25" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan class="quote">“</tspan><tspan>1</tspan><tspan class="quote">”</tspan></text></g></g></g></g></g><g class="match-fragment literal" transform="matrix(1,0,0,1,70,30.5)"><g class="label"><rect width="25" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan class="quote">“</tspan><tspan>b</tspan><tspan class="quote">”</tspan></text></g></g></g><g class="match" transform="matrix(1,0,0,1,0,89)"><path d="M80,42.5H105"></path><g class="match-fragment" transform="matrix(1,0,0,1,0,0)"><path d="M10,42.5q-10,0 -10,10v21.5q0,10 10,10h70q10,0 10,-10v-21.5q0,-10 -10,-10M90,57.5l5,-5m-5,5l-5,-5"></path><g class="charset" transform="matrix(1,0,0,1,10,0)"><rect class="charset-box" rx="3" ry="3" transform="matrix(1,0,0,1,0,11)" width="70" height="63"></rect><text x="0" y="0" class="charset-label" transform="matrix(1,0,0,1,0,11)"><tspan>One of:</tspan></text><g transform="matrix(1,0,0,1,5,16)"><g class="charset-escape" transform="matrix(1,0,0,1,13.5,0)"><g class="label"><rect width="33" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan>digit</tspan></text></g></g><g class="charset-range" transform="matrix(1,0,0,1,0,29)"><text x="0" y="0" transform="matrix(1,0,0,1,30,16)">-</text><g class="literal" transform="matrix(1,0,0,1,0,0)"><g class="label"><rect width="25" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan class="quote">“</tspan><tspan>a</tspan><tspan class="quote">”</tspan></text></g></g><g class="literal" transform="matrix(1,0,0,1,39,0)"><g class="label"><rect width="21" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan class="quote">“</tspan><tspan>f</tspan><tspan class="quote">”</tspan></text></g></g></g></g></g></g><g class="match-fragment literal" transform="matrix(1,0,0,1,105,30.5)"><g class="label"><rect width="25" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan class="quote">“</tspan><tspan>h</tspan><tspan class="quote">”</tspan></text></g></g></g><g class="match match-fragment" transform="matrix(1,0,0,1,36,178)"><path d="M10,12q-10,0 -10,10v2q0,10 10,10h33q10,0 10,-10v-2q0,-10 -10,-10M53,27l5,-5m-5,5l-5,-5"></path><g class="escape" transform="matrix(1,0,0,1,10,0)"><g class="label"><rect width="33" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan>digit</tspan></text></g></g></g></g></g></g><g class="match-fragment escape" transform="matrix(1,0,0,1,302,115)"><g class="label"><rect width="92" height="24" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,17)"><tspan>word boundary</tspan></text></g></g></g><path d="M10,127H0M404,127H414"></path><circle cx="0" cy="127" r="5"></circle><circle cx="414" cy="127" r="5"></circle></g></svg>
73 |
--------------------------------------------------------------------------------
/img/9-3.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg
3 | xmlns:svg="http://www.w3.org/2000/svg"
4 | xmlns="http://www.w3.org/2000/svg"
5 | height="180.30476"
6 | version="1.1"
7 | width="217.52544">
8 | <path
9 | d="m 149.04519,91.683302 h 13.4275"
10 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
11 | id="path4"/>
12 | <path
13 | d="m 135.6177,91.683302 q 13.42749,0 13.42749,13.427498 v 60.42373 q 0,13.42749 -13.42749,13.42749 H 34.911488 q -13.427496,0 -13.427496,-13.42749 V 105.1108 q 0,-13.427498 13.427496,-13.427498"
14 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
15 | id="path6"/>
16 | <path
17 | d="M 149.04519,91.683302 H 135.6177"
18 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
19 | id="path8"/>
20 | <path
21 | d="M 21.483992,91.683302 H 34.911488"
22 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
23 | id="path10"/>
24 | <path
25 | d="M 135.6177,91.683302 H 122.1902"
26 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
27 | id="path12"/>
28 | <path
29 | d="M 34.911488,91.683302 H 48.338983"
30 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
31 | id="path14"/>
32 | <path
33 | d="m 108.76272,91.683302 q 13.42748,0 13.42748,13.427498 v 33.56873 q 0,13.4275 -13.42748,13.4275 H 61.766478 q -13.427495,0 -13.427495,-13.4275 V 105.1108 q 0,-13.427498 13.427495,-13.427498"
34 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
35 | id="path16"/>
36 | <path
37 | d="M 122.1902,91.683302 H 108.76272"
38 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
39 | id="path18"/>
40 | <path
41 | d="M 48.338983,91.683302 H 61.766478"
42 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
43 | id="path20"/>
44 | <desc
45 | id="desc22">Created with Raphaël 2.1.0</desc>
46 | <defs
47 | id="defs24" />
48 | <rect
49 | x="162.4727"
50 | y="74.898933"
51 | width="33.568737"
52 | height="33.568737"
53 | r="0"
54 | rx="4.0282488"
55 | ry="4.0282488"
56 | style="fill:#dae9e5;stroke:#dae9e5;stroke-width:1.3427496"
57 | id="rect26" />
58 | <text
59 | x="179.25706"
60 | y="91.683304"
61 | font="10px "Arial""
62 | style="font-size:16.11299515px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
63 | font-size="12px"
64 | id="text28">
65 | <tspan
66 | dy="6.0423727"
67 | id="tspan30">"b"</tspan>
68 | </text>
69 | <rect
70 | x="34.911488"
71 | y="13.803831"
72 | width="100.70621"
73 | height="151.7307"
74 | r="0"
75 | rx="4.0282488"
76 | ry="4.0282488"
77 | style="fill:none;stroke:#a0a0a0;stroke-width:2.68549919;stroke-dasharray:8.05649719, 2.68549906"
78 | id="rect32" />
79 | <text
80 | x="64.451981"
81 | y="5.0759606"
82 | font="10px "Arial""
83 | style="font-size:13.427495px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
84 | font-size="10px"
85 | id="text34">
86 | <tspan
87 | dy="4.6996231"
88 | id="tspan36">Group #1</tspan>
89 | </text>
90 | <rect
91 | x="61.766479"
92 | y="44.687069"
93 | width="46.996235"
94 | height="93.99247"
95 | r="0"
96 | rx="4.0282488"
97 | ry="4.0282488"
98 | style="fill:#cbcbba;stroke:#cbcbba;stroke-width:1.3427496"
99 | id="rect38" />
100 | <text
101 | x="85.264595"
102 | y="35.959198"
103 | font="10px "Arial""
104 | style="font-size:13.427495px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
105 | font-size="10px"
106 | id="text40">
107 | <tspan
108 | dy="4.6996231"
109 | id="tspan42">One of:</tspan>
110 | </text>
111 | <rect
112 | x="68.480232"
113 | y="98.397057"
114 | width="33.568737"
115 | height="33.568737"
116 | r="0"
117 | rx="4.0282488"
118 | ry="4.0282488"
119 | style="fill:#dae9e5;stroke:#dae9e5;stroke-width:1.3427496"
120 | id="rect44" />
121 | <text
122 | x="85.264595"
123 | y="115.18143"
124 | font="10px "Arial""
125 | style="font-size:16.11299515px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
126 | font-size="12px"
127 | id="text46">
128 | <tspan
129 | dy="6.0423727"
130 | id="tspan48">"1"</tspan>
131 | </text>
132 | <rect
133 | x="68.480232"
134 | y="51.400818"
135 | width="33.568737"
136 | height="33.568737"
137 | r="0"
138 | rx="4.0282488"
139 | ry="4.0282488"
140 | style="fill:#dae9e5;stroke:#dae9e5;stroke-width:1.3427496"
141 | id="rect50" />
142 | <text
143 | x="85.264595"
144 | y="68.185188"
145 | font="10px "Arial""
146 | style="font-size:16.11299515px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;text-anchor:middle;fill:#000000;stroke:none;font-family:Arial"
147 | font-size="12px"
148 | id="text52">
149 | <tspan
150 | dy="6.0423727"
151 | id="tspan54">"0"</tspan>
152 | </text>
153 | <path
154 | d="M 8.0564968,91.683302 H 21.483992"
155 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
156 | id="path56"/>
157 | <circle
158 | cx="10"
159 | cy="81"
160 | r="5"
161 | style="fill:#6b6659;stroke:#000000;stroke-width:2"
162 | id="circle58"
163 | transform="matrix(1.3427496,0,0,1.3427496,-5.3709984,-17.079408)" />
164 | <path
165 | d="M 209.46892,91.683302 H 196.04143"
166 | style="fill:none;stroke:#000000;stroke-width:2.68549919"
167 | id="path60"/>
168 | <circle
169 | cx="160"
170 | cy="81"
171 | r="5"
172 | style="fill:#6b6659;stroke:#000000;stroke-width:2"
173 | id="circle62"
174 | transform="matrix(1.3427496,0,0,1.3427496,-5.3709984,-17.079408)" />
175 | </svg>
176 |
--------------------------------------------------------------------------------
/img/qr_alipay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apachecn/eloquent-js-3e-zh/12ed9090d2ddb50e23255e1a3790e5fdb849979b/img/qr_alipay.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <!-- index.html -->
2 |
3 | <!DOCTYPE html>
4 | <html>
5 | <head>
6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 | <meta name="viewport" content="width=device-width,initial-scale=1">
8 | <meta charset="UTF-8">
9 | <link rel="stylesheet" href="asset/vue.css">
10 | <link rel="stylesheet" href="asset/style.css">
11 | <link rel="stylesheet" href="asset/prism-darcula.css">
12 |
13 | <!-- google ads -->
14 | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
15 |
16 | <!-- google webmaster -->
17 | <meta name="google-site-verification" content="pyo9N70ZWyh8JB43bIu633mhxesJ1IcwWCZlM3jUfFo" />
18 | </head>
19 | <body>
20 | <div id="app">now loading...</div>
21 | <script>
22 | window.$docsify = {
23 | loadSidebar: 'SUMMARY.md',
24 | name: 'JavaScript 编程精解中文第三版',
25 | auto2top: true,
26 | themeColor: '#DAA520',
27 | repo: 'apachecn/eloquent-js-3e-zh',
28 | plugins: [window.docsPlugin],
29 | bdStatId: '38525fdac4b5d4403900b943d4e7dd91',
30 | cnzzId: '1275211409',
31 | search: {
32 | paths: 'auto',
33 | placeholder: '搜索',
34 | noData: '没有结果',
35 | },
36 | copyCode: {
37 | buttonText: '复制',
38 | errorText: 'Error',
39 | successText: 'OK!',
40 | },
41 | }
42 | </script>
43 |
44 | <script src="asset/docsify.min.js"></script>
45 | <script src="asset/search.min.js"></script>
46 | <script src="asset/prism-javascript.min.js"></script>
47 | <script>Prism.languages.py = Prism.languages.python</script>
48 | <script src="asset/docsify-copy-code.min.js"></script>
49 | <script src="asset/docsify-baidu-push.js"></script>
50 | <script src="asset/docsify-baidu-stat.js"></script>
51 | <script src="asset/docsify-cnzz.js"></script>
52 | <script src="asset/docsify-apachecn-footer.js"></script>
53 | <script src="asset/docsify-clicker.js"></script>
54 | </body>
55 | </html>
56 |
--------------------------------------------------------------------------------
/styles/ebook.css:
--------------------------------------------------------------------------------
1 | /* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
2 | /* Author: Nicolas Hery - http://nicolashery.com */
3 | /* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
4 | /* Source: https://github.com/nicolahery/markdownpad-github */
5 |
6 | /* RESET
7 | =============================================================================*/
8 |
9 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
10 | margin: 0;
11 | padding: 0;
12 | border: 0;
13 | }
14 |
15 | /* BODY
16 | =============================================================================*/
17 |
18 | body {
19 | font-family: Helvetica, arial, freesans, clean, sans-serif;
20 | font-size: 14px;
21 | line-height: 1.6;
22 | color: #333;
23 | background-color: #fff;
24 | padding: 20px;
25 | max-width: 960px;
26 | margin: 0 auto;
27 | }
28 |
29 | body>*:first-child {
30 | margin-top: 0 !important;
31 | }
32 |
33 | body>*:last-child {
34 | margin-bottom: 0 !important;
35 | }
36 |
37 | /* BLOCKS
38 | =============================================================================*/
39 |
40 | p, blockquote, ul, ol, dl, table, pre {
41 | margin: 15px 0;
42 | }
43 |
44 | /* HEADERS
45 | =============================================================================*/
46 |
47 | h1, h2, h3, h4, h5, h6 {
48 | margin: 20px 0 10px;
49 | padding: 0;
50 | font-weight: bold;
51 | -webkit-font-smoothing: antialiased;
52 | }
53 |
54 | h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
55 | font-size: inherit;
56 | }
57 |
58 | h1 {
59 | font-size: 24px;
60 | border-bottom: 1px solid #ccc;
61 | color: #000;
62 | }
63 |
64 | h2 {
65 | font-size: 18px;
66 | color: #000;
67 | }
68 |
69 | h3 {
70 | font-size: 14px;
71 | }
72 |
73 | h4 {
74 | font-size: 14px;
75 | }
76 |
77 | h5 {
78 | font-size: 14px;
79 | }
80 |
81 | h6 {
82 | color: #777;
83 | font-size: 14px;
84 | }
85 |
86 | body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
87 | margin-top: 0;
88 | padding-top: 0;
89 | }
90 |
91 | a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
92 | margin-top: 0;
93 | padding-top: 0;
94 | }
95 |
96 | h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
97 | margin-top: 10px;
98 | }
99 |
100 | /* LINKS
101 | =============================================================================*/
102 |
103 | a {
104 | color: #4183C4;
105 | text-decoration: none;
106 | }
107 |
108 | a:hover {
109 | text-decoration: underline;
110 | }
111 |
112 | /* LISTS
113 | =============================================================================*/
114 |
115 | ul, ol {
116 | padding-left: 30px;
117 | }
118 |
119 | ul li > :first-child,
120 | ol li > :first-child,
121 | ul li ul:first-of-type,
122 | ol li ol:first-of-type,
123 | ul li ol:first-of-type,
124 | ol li ul:first-of-type {
125 | margin-top: 0px;
126 | }
127 |
128 | ul ul, ul ol, ol ol, ol ul {
129 | margin-bottom: 0;
130 | }
131 |
132 | dl {
133 | padding: 0;
134 | }
135 |
136 | dl dt {
137 | font-size: 14px;
138 | font-weight: bold;
139 | font-style: italic;
140 | padding: 0;
141 | margin: 15px 0 5px;
142 | }
143 |
144 | dl dt:first-child {
145 | padding: 0;
146 | }
147 |
148 | dl dt>:first-child {
149 | margin-top: 0px;
150 | }
151 |
152 | dl dt>:last-child {
153 | margin-bottom: 0px;
154 | }
155 |
156 | dl dd {
157 | margin: 0 0 15px;
158 | padding: 0 15px;
159 | }
160 |
161 | dl dd>:first-child {
162 | margin-top: 0px;
163 | }
164 |
165 | dl dd>:last-child {
166 | margin-bottom: 0px;
167 | }
168 |
169 | /* CODE
170 | =============================================================================*/
171 |
172 | pre, code, tt {
173 | font-size: 12px;
174 | font-family: Consolas, "Liberation Mono", Courier, monospace;
175 | }
176 |
177 | code, tt {
178 | margin: 0 0px;
179 | padding: 0px 0px;
180 | white-space: nowrap;
181 | border: 1px solid #eaeaea;
182 | background-color: #f8f8f8;
183 | border-radius: 3px;
184 | }
185 |
186 | pre>code {
187 | margin: 0;
188 | padding: 0;
189 | white-space: pre;
190 | border: none;
191 | background: transparent;
192 | }
193 |
194 | pre {
195 | background-color: #f8f8f8;
196 | border: 1px solid #ccc;
197 | font-size: 13px;
198 | line-height: 19px;
199 | overflow: auto;
200 | padding: 6px 10px;
201 | border-radius: 3px;
202 | }
203 |
204 | pre code, pre tt {
205 | background-color: transparent;
206 | border: none;
207 | }
208 |
209 | kbd {
210 | -moz-border-bottom-colors: none;
211 | -moz-border-left-colors: none;
212 | -moz-border-right-colors: none;
213 | -moz-border-top-colors: none;
214 | background-color: #DDDDDD;
215 | background-image: linear-gradient(#F1F1F1, #DDDDDD);
216 | background-repeat: repeat-x;
217 | border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
218 | border-image: none;
219 | border-radius: 2px 2px 2px 2px;
220 | border-style: solid;
221 | border-width: 1px;
222 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
223 | line-height: 10px;
224 | padding: 1px 4px;
225 | }
226 |
227 | /* QUOTES
228 | =============================================================================*/
229 |
230 | blockquote {
231 | border-left: 4px solid #DDD;
232 | padding: 0 15px;
233 | color: #777;
234 | }
235 |
236 | blockquote>:first-child {
237 | margin-top: 0px;
238 | }
239 |
240 | blockquote>:last-child {
241 | margin-bottom: 0px;
242 | }
243 |
244 | /* HORIZONTAL RULES
245 | =============================================================================*/
246 |
247 | hr {
248 | clear: both;
249 | margin: 15px 0;
250 | height: 0px;
251 | overflow: hidden;
252 | border: none;
253 | background: transparent;
254 | border-bottom: 4px solid #ddd;
255 | padding: 0;
256 | }
257 |
258 | /* TABLES
259 | =============================================================================*/
260 |
261 | table th {
262 | font-weight: bold;
263 | }
264 |
265 | table th, table td {
266 | border: 1px solid #ccc;
267 | padding: 6px 13px;
268 | }
269 |
270 | table tr {
271 | border-top: 1px solid #ccc;
272 | background-color: #fff;
273 | }
274 |
275 | table tr:nth-child(2n) {
276 | background-color: #f8f8f8;
277 | }
278 |
279 | /* IMAGES
280 | =============================================================================*/
281 |
282 | img {
283 | max-width: 100%
284 | }
--------------------------------------------------------------------------------
/update.sh:
--------------------------------------------------------------------------------
1 | git add -A
2 | git commit -am "$(date "+%Y-%m-%d %H:%M:%S")"
3 | git push
--------------------------------------------------------------------------------