从 jQuery 中学习设计模式

从 jQuery 里学习设计模式

前言

jQuery 前些天陆续发布了 3.4.0open in new window 和 3.4.1open in new window 版本，修复了一些问题，提升了性能。得知 jQuery 仍然健在，仍在持续开发、进化，我很高兴，只是，我已经不怎么用 jQuery 了。

如今，不止是我，整个前端界会选择 jQuery 搭建新产品的人寥寥无几。一方面，MVVM 已经证明了架构方面的巨大优势；另一方面，大量优秀的设计被原生 JS 吸收，甚至连 jQuery 都放弃 Sizzle 改用原生选择器。但是，jQuery 十几年的积淀绝非 querySelector 就能取代。

入行晚的同学可能不知道，当年 jQuery 绝对是统治级的基础类库。我记得当时看到一个数字，99+% 的网站使用 jQuery，甚至超过当时如日中天的 Flash Player，后者是一个商业软件，有完整的公司和团队在努力推广，而前者，则是广大开发者用脚投票的结果。jQuery 的 Slogen 是：“write less, do more”，翻译成汉语就是：代码量更少，功能更强大。jQuery 也是如此践行的，使用它对所有开发者都有巨大帮助，以致于很多开发者离开它都没法工作了。使用 jQuery，开发者可以更聚焦于业务逻辑当中，因为：

  1. 少写很多兼容性判定代码
  2. 更加方便地操作 DOM
  3. 更加方便地管理事件
  4. 不用担心目标不存在导致出错
  5. 非常容易地创建和组织 DOM
  6. 创建大量可复用的组件

其实上面这些杀手级 feature，几乎都和设计模式有着莫大的关系：

  1. 使用工厂模式，解决一切创建 jQuery 实例的需求
  2. 使用适配器模式解决兼容性问题
  3. 使用外观模式方便的操作 DOM
  4. 使用组合模式，让我们不用担心找不到对象的问题
  5. 使用享元模式，降低组件的内存消耗

我想结合自身的开发经验，以大家都熟悉的 jQuery 为例，教大家理解和使用更多设计模式，尤其是那些曾帮助 jQuery 取得卓越成就的设计模式。这样，起码大家在面试时不至于只知道单例和观察者（哈哈）；当然，也能在今后的工作中更加无往不利。

本次分享大纲如下：

  1. 设计模式与面向对象
  2. 享元模式
  3. 外观模式
  4. 组合模式
  5. 工厂模式
  6. 适配器模式

面向读者

  1. 中级开发者，熟悉 jQuery，熟悉原生 JS
  2. 希望用设计模式武装自己

名词及约定

  1. 我假定所有读者都很熟悉 jQuery 的用法和 API，文中不再解释。
  2. 文中的“模式”和“设计模式”基本上都指“设计模式”。
  3. 所有模式的中文译名以《设计模式：可复用面向对象软件的基础》一书中为准。我会在章节开始处写明其英文名称。

其它约定：

  1. 为节省时间，范例代码中的 HTML 会以 pug 书写，这种语言很容易阅读，文中也用不到高级语法，应该问题不大。另外，如果你还在写原生 HTML 或 CSS，我建议你尽快切换到新语言。
  2. 范例代码以 ES6 为基础，也会使用 ES2017+ 新增语法，如果你对这些“新”语法不熟悉，附录里有一些资源方便你学习。

名词：

  1. 使用者：指用 jQuery 开发业务逻辑的人，也就是你我。
  2. 经典(版)：指《设计模式》中的内容

文中代码的目标环境：

  1. jQuery >= 3.4.1
  2. Node.js >= 10.15

作者介绍

大家好，我叫翟路佳，花名“肉山”，这个名字跟 Dota 没关系，从高中起伴随我到现在。

我热爱编程，喜欢学习，喜欢分享，从业十余年，投入的比较多，学习积累到的也比较多，对前端方方面面都有所了解，希望能与大家分享。

我兴趣爱好比较广泛，尤其喜欢旅游，欢迎大家相互交流。

我目前就职于 OpenResty Inc.，定居广州。

你可以在这里找到我：

或者通过 邮件 联系我。

限于个人能力、知识视野、文字技术不足，文中难免有疏漏差错，如果你有任何疑问，欢迎在任何时间通过任何形式向我提出，我一定尽快答复修改。

GitHub issueopen in new window。

再次感谢大家。