(译)《学习JavaScript设计模式》（一）

原书链接Learning JavaScript Design Patterns
水平有限很多地方不通顺，错翻漏翻欢迎交流。

什么是模式？

模式是一种可普遍应用于软件设计——对我们前端人员来讲就是JavaScript网络应用程序的可重用方案。或者说是一种可用于解决很多不同情况的模板。

所以理解模式对我们来说究竟有什么好处呢？设计模式主要有三点优势：

1. 模式是成熟的解决方案： 它使用成熟的技术为软件开发中问题提供了可靠的方法，这些技术反映了为模式定义的开发的经验和见解。

2. 模式易于重用： 模式通常反映了一个很好的可适应我们本身需求的方法。这个特征使得它鲁棒性很好。

3. 模式有很好的表现力： 模式通常都有一个解决方案的关键词用法和语法结构，通过它我们可以让大型的解决方案表现得更优雅。

模式并不就是一个具体的解决方案。我们要记住模式的角色仅仅就是给我们提供一个解决方案体系。模式并不能解决所有的设计问题，也不能取代一个好的设计师，但它确实能成为设计师的好帮手。接下来我们来讨论一下模式的其他一些优势。

• 模式可以防患于未然： 当我们的代码是建立在成熟的模式上时，我们可以花更少的时间考虑我们的代码结构，而把更多的时间放在我们的总的解决方案的质量上。这是由于模式总是鼓励我们以结构化和组织化的方式来编写代码，很好地避免了一些未来重构代码的需求。

• 模式可以提供文档化的通用解决方案，不会被某个单独问题所限制： 这种通用化的方式意味着我们不需要被应用（通常是编程语言的不同）所限制，设计模式仍然可以改善我们代码的结构。

• 特定的模式确实可以避免重复来减少代码量： 通过鼓励开发者在容易减少代码重复区域更加警惕（比如用一个通用函数来取代减少执行函数）。这也就是我们所说的让代码更加'DRY'。

• 模式添加到开发者的字典中可以让他们交流更加方便

• 频繁被使用的模式可以随着开发者在社区中交流得到改善： 在某些情况这可以引领一种全新的设计模式，并让它更好地适应更多的具体情况。这可以保持基于模式的解决方案保持健壮性，甚至超过点对点的解决方案。

我们已经天天在用模式了

为了理解模式究竟多吊，我们来回顾一个jQuery已经帮我们解决的元素选择的问题。

假设我们有个script，在DOM中为每个找到的class为"foo"的元素添加一个计数器。效率最高的查询方法是什么？来看看下面几种解决方案：

1. 选择页面中的所有DOM元素并存储他们的引用，然后通过正则表达式（或者其他的方法）来过滤只存储那些class为"foo"的元素。

2. 使用本地浏览器的方法比如querySelectorAll()来选择所有class为"foo"的元素。

3. 使用原生方法比如getElementsByClassName()来类似地选择所需集合。

所以这仨哪个快呢？事实上是<3>，它是其他俩的8-10倍。但是天不遂人愿，<3>在IE9以下是没用的，一次在<2>和<3>都不支持的环境下只能使用<1>了。

然而使用jQuery的开发者就不用愁了，因为它为我们这些使用外观模式的把选择器抽象出来了。我们后面会提到，这种模式为以后一些潜在的负载代码提供了一些抽象接口(比如$el.css(), $el.animate())。这意味这我们不需要花太多的时间在实现细节上了。

jQuery还自动地根据我们的浏览器来挑选选择器方法。

我们可能都熟悉jQuery的$("selector")，同样是选择HTML元素，它比起getElementById(), getElementsByClassName(), getElementByTagName()等方法来说方便多了。

我们知道querySelectorAll()也试图做同样的事，比较一下使用jQuery的模式VS我们自己来选择。后者毫无竞争力(?)。抽象使用模式有现实价值。

在本书的后面我们将继续讨论更多的设计模式。