(译)《学习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我们自己来选择。后者毫无竞争力(?)。抽象使用模式有现实价值。

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

    原文作者:设计模式
    原文地址: https://segmentfault.com/a/1190000005075144
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞