框架更新这么快，到底怎么学？

现在前端发展越来越快，前端科技树越点越深，TC39 委员会在不断审议着各种提案，ECMAScript 标准每年推出新的语言规范，浏览器的版本在不断迭代推进新的技术方案，新的业务落地场景在不断兴起….

1. 前端浪潮

底层依赖不断变化，随之而来的是不断变化着的上层框架。一些框架或因设计思想落后，或因功能被原生实现，或因出现了更好的替代品等种种原因衰落了，比如 jQuery、Prototype、Backbone、Ember、Underscore 等等。而新的框架应时运而生，因为解决了当时的痛点，而得到广泛应用，技术就这样代代更迭，推陈出新。

不是单反不好用，而是手机太方便。不是 F14 雄猫不先进，而是现代空军更需要多用途战机。不是亚洲四小龙不厉害，而是中国大陆崛起了。互联网技术的汪洋大海潮起潮落，一代代霸主显赫一时，又低调落幕，被渐渐遗忘。这一切恍如隔世，却又蕴含着某种必然。

前端开发者们就像非洲大草原上断地迁徙的野牛群，如果个体落后于大部队，就会落入狮群之口，为了赶上大部队，我们必须跑得很快，没有终点。前端技术的不断更迭，就像狮群在我们后面紧追不舍，逼迫我们不断学习新技术、新工具、新框架。

2. 以不变应万变

但是，在这多变的世间，我们要寻找一点永恒。正如之前引起大家广泛讨论的文章 <停止学习框架> 所说：

• 用的编程语言虽然不一样，但是设计方法是类似的；

• 用的框架虽然是不一样的，但是设计模式是类似的；

框架经常变，但不变的是框架的设计。如果不掌握设计模式，只学习框架的用法，就是缘木求鱼、刻舟求剑，明年换了新的框架，又要重新学习，事倍功半。学习设计模式让我们掌握多变的框架背后不变的部分，掌握框架的本质，毕竟万变不离其宗，从而在学习工作中事半功倍。

掌握设计模式，就掌握了框架的设计思想，就可以学习众多前辈们在长期生产过程中经验的积累，吸收他们的优秀设计理念，掌握他们解决特定问题的解决办法，让我们的软件设计能力得到快速提升，从而指导我们编写一段健壮的代码、一个复杂的需求、一个可维护性高的系统、一个优秀的软件架构。

设计模式是我们迈向高级前端开发者的必经之路，也是是软件设计的基础，想有更长远的发展，必须夯实这座地基。JavaScript 的作用从一开始简单的表单验证，发展到如今大前端，复杂的业务场景对前端开发者们提出了更高的设计要求，而不仅仅是简单的实现功能需求。

设计模式在面试中出现的频率也越来越高，特别是三年或者以上的前端面试，特别看重软件的设计能力。另外，如果你希望成为项目的技术负责人，那么软件的设计、分层能力则是成为合格负责人的基本要求。

前端开发者们在深入使用各种框架和工具库后，肯定会遇到通过搜索引擎和官方文档解决不了的各种问题，这时你会尝试阅读源码，在源码里你就会发现各种优美的 JavaScript 用法，这些用法很多就来自于设计模式。

慕课网专栏《JavaScript 设计模式精讲》是慕课联合讲师 SHERlocked93，本科和研究生毕业于北京理工大学，开源社区活跃贡献者，擅长 Vue 技术栈，运营有技术公众号「前端下午茶」。现在在国内一家大型国企担任团队前端负责人，主要负责前端技术预研、工程框架搭建、基础设施建设等工作。

专栏在章节中会穿插介绍一些源码中、实战中经常出现的设计模式，帮助加深理解。

本专栏将由浅入深，从 JavaScript 的基础开始，到传统设计模式在 JavaScript 中的实现，最后讲解一些除了传统设计模式之外，常用在前端的其他设计模式。专栏共 29 篇文章，分为四个部分：

基础篇

在系统学习各设计模式之前，还需要先了解一下 JavaScript 设计模式学习离不开的前置知识，比如 this、闭包与高阶函数等相关知识，然后是面向对象风格相关的继承等知识，这些都是学习设计模式的铺垫。

创建型模式

创建型模式关注如何创建对象，主要特点是将对象的创建和使用分离。一般抽象了对象实例化的过程，用来帮助创建对象的实例。主要包括单例模式、工厂模式、抽象工厂模式、建造者模式。

结构型模式

结构型模式关注如何将对象按某种布局组成更大的结构。主要包括代理模式、享元模式、适配器模式、装饰者模式、外观模式、组合模式、桥接模式。

行为型模式

行为型模式关注对象之间的通信，描述对象之间怎样相互协作，以及怎样分配职责。主要包括发布-订阅模式、策略模式、状态模式、模板方法模式、迭代器模式、命令模式、职责链模式、中介者模式。

一些其他模式

一些其他的模式比如 MVC、MVP、MVVM，和模块模式、链模式、中间件等。

3. 文章结构

每篇设计模式的文章都大致包括下面几个部分：

1. 引入：设计模式不是孤立于现实世界凭空想出来的，事实上所有的设计模式都可以在现实生活中找到对应，因此将会从一个生活中具体场景引入该设计模式，以加深理解；

2. 实现：基于上面具体场景的适当讲解，代码实现，以及可能的优化和优化过程；

3. 分析：包括该模式的结构图和关键点，该设计模式的优缺点，什么情况下可以使用该模式，什么情况下应尽量避免使用该模式，实际项目或源码中遇到的设计模式实例（如果有的话）；

4. 总结：和其他模式之间的联系与区别；

不论你是基础知识薄弱，或者是单纯想要提升自己，这个专栏都适合你。购买二维码：

添加成功附赠前端资料包一份～