原书链接Learning JavaScript Design Patterns
水平有限很多地方不通顺,错翻漏翻欢迎交流。
什么是模式?
模式是一种可普遍应用于软件设计——对我们前端人员来讲就是JavaScript网络应用程序的可重用方案。或者说是一种可用于解决很多不同情况的模板。
所以理解模式对我们来说究竟有什么好处呢?设计模式主要有三点优势:
模式是成熟的解决方案: 它使用成熟的技术为软件开发中问题提供了可靠的方法,这些技术反映了为模式定义的开发的经验和见解。
模式易于重用: 模式通常反映了一个很好的可适应我们本身需求的方法。这个特征使得它鲁棒性很好。
模式有很好的表现力: 模式通常都有一个解决方案的关键词用法和语法结构,通过它我们可以让大型的解决方案表现得更优雅。
模式并不就是一个具体的解决方案。我们要记住模式的角色仅仅就是给我们提供一个解决方案体系。模式并不能解决所有的设计问题,也不能取代一个好的设计师,但它确实能成为设计师的好帮手。接下来我们来讨论一下模式的其他一些优势。
模式可以防患于未然: 当我们的代码是建立在成熟的模式上时,我们可以花更少的时间考虑我们的代码结构,而把更多的时间放在我们的总的解决方案的质量上。这是由于模式总是鼓励我们以结构化和组织化的方式来编写代码,很好地避免了一些未来重构代码的需求。
模式可以提供文档化的通用解决方案,不会被某个单独问题所限制: 这种通用化的方式意味着我们不需要被应用(通常是编程语言的不同)所限制,设计模式仍然可以改善我们代码的结构。
特定的模式确实可以避免重复来减少代码量: 通过鼓励开发者在容易减少代码重复区域更加警惕(比如用一个通用函数来取代减少执行函数)。这也就是我们所说的让代码更加‘DRY’。
模式添加到开发者的字典中可以让他们交流更加方便
频繁被使用的模式可以随着开发者在社区中交流得到改善: 在某些情况这可以引领一种全新的设计模式,并让它更好地适应更多的具体情况。这可以保持基于模式的解决方案保持健壮性,甚至超过点对点的解决方案。
我们已经天天在用模式了
为了理解模式究竟多吊,我们来回顾一个jQuery
已经帮我们解决的元素选择的问题。
假设我们有个script
,在DOM中为每个找到的class
为”foo”的元素添加一个计数器。效率最高的查询方法是什么?来看看下面几种解决方案:
选择页面中的所有DOM元素并存储他们的引用,然后通过正则表达式(或者其他的方法)来过滤只存储那些
class
为"foo"
的元素。使用本地浏览器的方法比如
querySelectorAll()
来选择所有class
为"foo"
的元素。使用原生方法比如
getElementsByClassName()
来类似地选择所需集合。
所以这仨哪个快呢?事实上是<3>,它是其他俩的8-10倍。但是天不遂人愿,<3>在IE9以下是没用的,一次在<2>和<3>都不支持的环境下只能使用<1>了。
然而使用jQuery的开发者就不用愁了,因为它为我们这些使用外观模式的把选择器抽象出来了。我们后面会提到,这种模式为以后一些潜在的负载代码提供了一些抽象接口(比如$el.css()
, $el.animate()
)。这意味这我们不需要花太多的时间在实现细节上了。
jQuery还自动地根据我们的浏览器来挑选选择器方法。
我们可能都熟悉jQuery的$("selector")
,同样是选择HTML元素,它比起getElementById()
, getElementsByClassName()
, getElementByTagName()
等方法来说方便多了。
我们知道querySelectorAll()
也试图做同样的事,比较一下使用jQuery的模式VS我们自己来选择。后者毫无竞争力(?)。抽象使用模式有现实价值。
在本书的后面我们将继续讨论更多的设计模式。