-
Notifications
You must be signed in to change notification settings - Fork 98
Expand file tree
/
Copy pathchapter1.html
More file actions
189 lines (116 loc) · 15.2 KB
/
chapter1.html
File metadata and controls
189 lines (116 loc) · 15.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="screen" href="http://a.tbcdn.cn/app/dp/s/screen.css" />
<style>
#bd {margin-left:20px;margin-right:20px;}
</style>
<title>wd-gallery - markdown</title>
</head>
<body>
<div id="bd">
<h1>第一章 概述</h1>
<p>JavaScript是一门Web开发语言。起初只是用来操作网页中为数不多的元素（比如图片和表单域），但谁也没想到这门语言的成长是如此迅速。除了适用于客户端浏览器编程，如今JavaScript程序可以运行于越来越多的平台之上。你可以用它来进行服务器端开发（使用.Net或Node.js）、桌面应用程序开发（运行于桌面操作系统）、以及应用程序扩展（Firefox插件或者Photoshop扩展）、移动终端应用和纯命令行的批处理脚本。</p>
<p>JavaScript同样是一门不寻常的语言。它没有类，许多场景中它使用函数作为一等对象。起初，许多开发者认为这门语言存在很多缺陷，但最近几年情况发生了微妙的变化。有意思的是，有一些老牌语言比如Java和PHP也已经开始添加诸如闭包和匿名函数等新特性，而闭包和匿名函数则是JavaScript程序员最愿意津津乐道的话题。</p>
<p>JavaScript十分灵活，可以用你所熟悉的其他任何编程语言的编程风格来写JavaScript程序。但最好的方式还是拥抱它所带来的变化、学习它所特有的编程模式。</p>
<h2>模式</h2>
<p>对 “模式”的广义解释是“反复发生的事件或对象的固定用法...可以用来作为重复使用的模板或模型”（http://en.wikipedia.org/wiki/Pattern）。</p>
<p>在软件开发领域，模式是指常见问题的通用解决方案。模式不是简单的代码复制和粘贴，而是一种最佳实践，一种高级抽象，是解决某一类问题的范本。</p>
<p>识别这些模式非常重要，因为：</p>
<ul>
<li>这些模式提供了经过论证的最佳实践，它可以帮助我们更好的编码，避免重复制造车轮。</li>
<li>这些模式提供了高一层的抽象，某个时间段内大脑只能处理一定复杂度的逻辑，因此当你处理更繁琐棘手的问题时，它会帮你理清头绪，你才不会被低级的琐事阻碍大脑思考，因为所有的细枝末节都可以被归类和切分成不同的块（模式）。</li>
<li>这些模式为开发者和团队提供了沟通的渠道，团队开发者之间往往是异地协作，不会有经常面对面的沟通机会。简单的代码编写技巧和技术问题处理方式的约定（代码注释）使得开发者之间的交流更加通畅。例如，“函数立即执行”用大白话表述成“你写好一个函数后，在函数的结束花括号的后面添加一对括号，这样能在定义函数结束后马上执行这个函数”（我的天）。</li>
</ul>
<p>本书将着重讨论下面这三种模式：</p>
<ul>
<li>设计模式（Design patterns）</li>
<li>编码模式（Coding patterns）</li>
<li>反模式（Antipatterns）</li>
</ul>
<p>设计模式最初的定义是来自于“GoF”（四人组，94年版“设计模式”的四个作者）的一本书，这本书在1994年出版，书名全称是“设计模式：可复用面向对象软件基础”。书中列举了一些重要的设计模式，比如单体、工厂、装饰者、观察者等等。但适用于JavaScript的设计模式并不多，尽管设计模式是脱离某种语言而存在的，但通常会以某种语言做范例来讲解设计模式，这些语言多是强类型语言，比如C++和Java。有时直接将其应用于弱类型的动态语言比如JavaScript又显得捉襟见肘。通常这些设计模式都是基于语言的强类型特性以及类的继承。而JavaScript则需要某种轻型的替代方案。本书在第七章将讨论基于 JavaScript实现的一些设计模式。</p>
<p>编码模式更有趣一些。它们是JavaScript特有的模式和最佳实践，它利用了这门语言独有的一些特性，比如对函数的灵活运用，JavaScript编码模式是本书所要讨论的重点内容。</p>
<p>本书中你会偶尔读到一点关于“反模式”的内容，顾名思义，反模式具有某些负作用甚至破坏性，书中会顺便一提。反模式并不是bug或代码错误，它只是一种处理问题的对策，只是这种对策带来的麻烦远超过他们解决的问题。在示例代码中我们会对反模式做明显的标注。</p>
<p><a name="a2"></a></p>
<h2>JavaScript：概念</h2>
<p>在正式的讨论之前，应当先理清楚JavaScript中的一些重要的概念，这些概念在后续章节中会经常碰到，我们先来快速过一下。</p>
<p><a name="a3"></a></p>
<h3>面向对象</h3>
<p>JavaScript 是一门面向对象的编程语言，对于那些仓促学习JavaScript并很快丢掉它的开发者来说，这的确有点让人感到意外。你所能接触到的任何JavaScript代码片段都可以作为对象。只有五类原始类型不是对象，它们是数字、字符串、布尔值、null和undefined，前三种类型都有与之对应的包装对象（下一章会讲到）。数字、字符串和布尔值可以轻易的转换为对象类型，可以通过手动转换，也可以利用JavaScript解析器进行自动转换。</p>
<p>函数也是对象，也可以拥有属性和方法。</p>
<p>在任何语言中，最简单的操作莫过于定义变量。那么，在JavaScript中定义变量的时候，其实也在和对象打交道。首先，变量自动变为一个被称作“活动对象”的内置对象的属性（如果是全局变量的话，就变为全局对象的属性）。第二，这个变量实际上也是“伪对象”，因为它有自己的属性（属性特性），用以表示变量是否可以被修改、删除或在for-in循环中枚举。这些特性并未在ECMAScript3中作规定，而ECMAScript5中提供了一组可以修改这些特性的方法。</p>
<p>那么，到底什么是对象？对象能作这么多事情，那它们一定非常特别。实际上，对象是及其简单的。对象只是很多属性的集合，一个名值对的列表（在其他语言中可能被称作关联数组），这些属性也可以是函数（函数对象），这种函数我们称为“方法”。</p>
<p>关于对象还需要了解，我们可以随时随地修改你创建的对象（当然，ECMAScript5中提供了可阻止这些修改的API）。得到一个对象后，你可以给他添加、删除或更新成员。如果你关心私有成员和访问控制，本书中我们也会讲到相关的编程模式。</p>
<p>最后一个需要注意的是，对象有两大类：</p>
<ul>
<li>本地对象（Native）：由ECMAScript标准规范定义的对象</li>
<li>宿主对象（Host）：由宿主环境创建的对象（比如浏览器环境）</li>
</ul>
<p>本地对象也可以被归类为内置对象（比如Array，Date）或自定义对象（var o = {}）。</p>
<p>宿主对象包含window和所有DOM对象。如果你想知道你是否在使用宿主对象，将你的代码迁移到一个非浏览器环境中运行一下，如果正常工作，那么你的代码只用到了本地对象。</p>
<p><a name="a4"></a></p>
<h3>无类</h3>
<p>在本书中的许多场合都会反复碰到这个概念。JavaScript中没有类，对于其他语言的编程老手来说这个观念非常新颖，需要反复的琢磨和重新学习才能理解JavaScript只能处理对象的观念。</p>
<p>没有类，你的代码变得更小巧，因为你不必使用类去创建对象，看一下Java风格的对象创建：</p>
<pre><code>// Java object creation
HelloOO hello_oo = new HelloOO();
</code></pre>
<p>为了创建一个简单的对象，同样一件事情却重复做了三遍，这让这段代码看起来很“重”。而大多数情况下，我们只想让我们的对象保持简单。</p>
<p>在JavaScript中，你需要一个对象，就随手创建一个空对象，然后开始给这个对象添加有趣的成员。你可以给它添加原始值、函数或其他对象作为这个对象属性。“空”对象并不是真正的空，对象中存在一些内置的属性，但并没有“自有属性”。在下一章里我们对此作详细讨论。</p>
<p>“GoF”的书中提到一条通用规则，“组合优于继承”，也就是说，如果你手头有创建这个对象所需的资源，更推荐直接将这些资源组装成你所需的对象，而不推荐先作分类再创建链式父子继承的方式来创建对象。在JavaScript中，这条规则非常容易遵守，因为JavaScript中没有类，而且对象组装无处不在。</p>
<p><a name="a5"></a></p>
<h3>原型</h3>
<p>JavaScript中的确有继承，尽管这只是一种代码重用的方式（本书有专门的一章来讨论代码重用）。继承可以有多种方式，最常用的方式就是利用原型。原型（prototype）是一个普通的对象，你所创建的每一个函数会自动带有prototype属性，这个属性指向一个空对象，这个空对象包含一个constructor属性，它指向你新建的函数而不是内置的Object()，除此之外它和通过对象直接量或Object()构造函数创建的对象没什么两样。你可以给它添加新的成员，这些成员可以被其他的对象继承，并当作其他对象的自有属性来使用。</p>
<p>我们会详细讨论JavaScript中的继承，现在只要记住：原型是一个对象（不是类或者其他什么特别的东西），每个函数都有一个prototype属性。</p>
<p><a name="a6"></a></p>
<h3>运行环境</h3>
<p>JavaScript程序需要一个运行环境。一个天然的运行环境就是浏览器，但这绝不是唯一的运行环境。本书所讨论的编程模式更多的和JavaScript语言核心（ECMAScript）相关，因此这些编程模式是环境无关的。有两个例外：</p>
<ul>
<li>第八章，这一章专门讲述浏览器相关的模式</li>
<li>其他一些展示模式的实际应用的例子</li>
</ul>
<p>运行环境会提供自己的宿主对象，这些宿主对象并未在ECMAScript标准中定义，它们的行为也是不可预知的。</p>
<p><a name="a7"></a></p>
<h2>ECMAScript 5</h2>
<p>JavaScript语言的核心部分（不包含DOM、BOM和外部宿主对象）是基于ECMAScript标准（简称为ES）来实现的。其中第三版是在1999年正式颁布的，目前大多数浏览器都实现了这个版本。第四版已经废弃了。第三版颁布后十年，2009年十二月，第五版才正式颁布。</p>
<p>第五版增加了新的内置对象、方法和属性，但最重要的增加内容是所谓的严格模式（strict mode），这个模式移除了某些语言特性，让程序变得简单且健壮。比如，with语句的使用已经争论了很多年，如今，在ECMAScript5严格模式中使用with则会报错，而在非严格模式中则是ok的。我们通过一个指令来激活严格模式，这个指令在旧版本的语言实现中被忽略。也就是说，严格模式是向下兼容的，因为在不支持严格模式的旧浏览器中也不会报错。</p>
<p>对于每一个作用域（包括函数作用域、全局作用域或在eval()参数字符串的开始部分），你可以使用这种代码来激活严格模式：</p>
<pre><code>function my() {
"use strict";
// rest of the function...
}
</code></pre>
<p>这样就激活了严格模式，函数的执行则会被限制在语言的严格子集的范围内。对于旧浏览器来说，这句话只是一个没有赋值给任何变量的字符串，因此不会报错。</p>
<p>按照语言的发展计划，未来将会只保留“严格模式”。因此，现在的ES5只是一个过渡版本，它鼓励开发者使用严格模式，而非强制。</p>
<p>本书不会讨论ES5新增特性相关的模式，因为在本书截稿时并没有任何浏览器实现了ES5，但本书的示例代码通过一些技巧鼓励开发者向新标准转变：</p>
<ul>
<li>确保所提供的示例代码在严格模式下不包错</li>
<li>避免使用并明确指出弃用的构造函数相关的属性和方法，比如arguments.callee</li>
<li>针对ES5中的内置模式比如Object.create()，在ES3中实现等价的模式</li>
</ul>
<p><a name="a8"></a></p>
<h2>JSLint</h2>
<p>JavaScript是一种解释型语言，它没有静态编译时的代码检查，所以很可能将带有简单类型错误的破碎的程序部署到线上，而且往往意识不到这些错误的存在。这时我们就需要JSLint的帮助。</p>
<p>JSLint（http://jslint.com ）是一个JavaScript代码质量检测工具，它的作者是 Douglas Crockford，JSLint会对代码作扫描，并针对潜在的问题报出警告。笔者强烈推荐你在执行代码前先通过JSlint作检查。作者给出了警告：这个工具可能“会让你不爽”，但仅仅是在开始使用它的时候不爽一下而已。你会很快从你的错误中吸取教训，并学习这些成为一名专业的JavaScript程序员应当必备的好习惯。让你的代码通过JSLint的检查，这会让你对自己的代码更加有自信，因为你不用再去担心代码中某个不起眼的地方丢失了逗号或者有某种难以察觉的语法错误。</p>
<p>当开始下一章的学习时，你将发现JSLint会被多次提到。本书中除了讲解反模式的示例代码外（有清楚的注释说明）、所有示例代码均通过了JSLint的检查（使用JSLint的默认设置）。</p>
<p><a name="a9"></a></p>
<h2>控制台工具</h2>
<p>console对象在本书中非常常见。这个对象并不是语言的一部分，而是运行环境的一部分，目前大多数浏览器也都实现了这个对象。比如在Firefox中，它是通过Firebug扩展引入进来的。Firebug控制台工具包含UI操作界面，可以让你快速输入并测试JavaScript代码片段，同样用它可以调试当前打开的页面（图1-1）。在这里强烈推荐使用它来辅助学习。在Webkit核心的浏览器（Safari和Chrome）也提供了类似的工具，可以监控页面情况，IE从版本8开始也提供了开发者工具。</p>
<p>本书中大多数代码都使用console对象来输出结果，而没有使用alert()或者刷新当前页面。因为用这种方法输出结果实在太简单了。</p>
<p>图 1-1 使用Firebug控制台工具</p>
<p><img src="http://img01.taobaocdn.com/tps/i1/T1AGmgXgxvXXXXXXXX-629-383.png" alt="console" /></p>
<p>我们经常使用log()方法，它将传入的参数在控制台输出，有时会用到dir()，用以将传入的对象属性枚举出来，这里是一个例子：</p>
<pre><code>console.log("test", 1, {}, [1,2,3]);
console.dir({one: 1, two: {three: 3}});
</code></pre>
<p>当你在控制台输入内容时，则不必使用console.log()。为了避免混乱，有些代码片段仍然使用console.log()作输出，并假设所有的代码片段都使用控制台来作检测：</p>
<pre><code>window.name === window['name']; // true
</code></pre>
<p>这和下面这种用法意思一样：</p>
<pre><code>console.log(window.name === window['name']);
</code></pre>
<p>这段代码在控制台中输出为true。</p>
</div>
</body>
</html>