JavaScript 设计模式核⼼原理与应⽤实践 之 开篇:前端工程师的成长论

能够决定一个前端工程师的本质的,不是那些瞬息万变的技术点,而是那些不变的东西。

所谓“不变的东西”,说的就是这种驾驭技术的能力。

具体来说,它分为以下三个层次:

  • 能用健壮的代码去解决具体的问题;
  • 能用抽象的思维去应对复杂的系统;
  • 能用工程化的思想去规划更大规模的业务。

这三种能力在你的成长过程中是层层递进的关系,而后两种能力可以说是对架构师的要求。事实上,在我入行以来接触过的工程师里,能做到第一点,并且把它做到扎实、做到娴熟的人,已经堪称同辈楷模。

前端工程师,首先是软件工程师

很多人缺乏的并不是这种高瞻远瞩的激情,而是我们前面提到的“不变能力”中最基本的那一点——用健壮的代码去解决具体的问题的能力。

所以说,想做靠谱开发,先掌握设计模式。

1. 设计模式的“道”与“术”

1.1 设计模式,究竟有着怎样的力量?

每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心。这样,你就能一次又一次地使用该方案而不必做重复劳动。 —— Christopher Alexander

1.2 SOLID设计原则

"SOLID" 是由罗伯特·C·马丁在 21 世纪早期引入的记忆术首字母缩略字,指代了面向对象编程和面向对象设计的五个基本原则。

设计原则是设计模式的指导理论,它可以帮助我们规避不良的软件设计。SOLID 指代的五个基本原则分别是:

  • 单一功能原则(Single Responsibility Principle)
  • 开放封闭原则(Opened Closed Principle)
  • 里式替换原则(Liskov Substitution Principle)
  • 接口隔离原则(Interface Segregation Principle)
  • 依赖反转原则(Dependency Inversion Principle)

在 JavaScript 设计模式中,主要用到的设计模式基本都围绕“单一功能”和“开放封闭”这两个原则来展开。

1.3 设计模式的核心思想——封装变化

设计模式出现的背景,是软件设计的复杂度日益飙升。软件设计越来越复杂的“罪魁祸首”,就是变化。

这一点相信大家不难理解——如果说我们写一个业务,这个业务是一潭死水,初始版本是 1.0,100 年后还是 1.0,不接受任何迭代和优化,那么这个业务几乎可以随便写。反正只要实现功能就行了,完全不需要考虑可维护性、可扩展性。

但在实际开发中,不发生变化的代码可以说是不存在的。我们能做的只有将这个变化造成的影响最小化 —— 将变与不变分离,确保变化的部分灵活、不变的部分稳定。

这个过程,就叫“封装变化”;这样的代码,就是我们所谓的“健壮”的代码,它可以经得起变化的考验。而设计模式出现的意义,就是帮我们写出这样的代码。

1.4 设计模式的“术”

所谓“术”,其实就是指二十年前 GOF 提出的最经典的23种设计模式。二十年前,四位程序员前辈(Erich Gamma, Richard Helm, Ralph Johnson & John Vlissides)通过编写《设计模式:可复用面向对象软件的基础》这本书,阐述了设计模式领域的开创性成果。在这本书中,将23种设计模式按照“创建型”、“行为型”和“结构型”进行划分:

前面我们说过,设计模式的核心思想,就是“封装变化”。确实如此,无论是创建型、结构型还是行为型,这些具体的设计模式都是在用自己的方式去封装不同类型的变化 —— 创建型模式封装了创建对象过程中的变化,比如下节的工厂模式,它做的事情就是将创建对象的过程抽离;结构型模式封装的是对象之间组合方式的变化,目的在于灵活地表达对象间的配合与依赖关系;而行为型模式则将是对象千变万化的行为进行抽离,确保我们能够更安全、更方便地对行为进行更改。

封装变化,封装的正是软件中那些不稳定的要素,它是一种防患于未然的行为 —— 提前抽离了变化,就为后续的拓展提供了无限的可能性,如此,我们才能做到在变化到来的时候从容不迫。

1.5 从 Java/C++ 到 JavaScript 的迁移

设计模式迁移到 JavaScript,不仅仅是从一类语言到另一类语言这么简单。强类型语言不仅和 JavaScript 之间存在着基本语法的差异,还存在着应用场景的差异。设计模式的“前端化”,正是我们后续十余个章节要做的事情。在这个过程中,场景是基础,代码是辅助,逻辑是主角。

JavaScript 设计模式核⼼原理与应⽤实践 之 开篇:前端工程师的成长论相关推荐

  1. JavaScript 设计模式核⼼原理与应⽤实践 之 创建型:工厂模式·简单工厂——区分“变与不变”

    JavaScript 设计模式核⼼原理与应⽤实践 之 创建型:工厂模式·简单工厂--区分"变与不变" 先来说说构造器 在介绍工厂模式之前,为了辅助大家的理解,我想先在这儿给大家介绍 ...

  2. JavaScript 设计模式核⼼原理与应⽤实践 之 创建型:工厂模式·抽象工厂——理解“开放封闭”

    JavaScript 设计模式核⼼原理与应⽤实践 之 创建型:工厂模式·抽象工厂--理解"开放封闭" 一个不简单的简单工厂引发的命案 在实际的业务中,我们往往面对的复杂度并非数个类 ...

  3. JavaScript 设计模式核⼼原理与应⽤实践之单例模式——Vuex的数据管理哲学

    JavaScript 设计模式核⼼原理与应⽤实践之单例模式--Vuex的数据管理哲学 保证一个类仅有一个实例,并提供一个访问它的全局访问点,这样的模式就叫做单例模式. 单例模式的实现思路 思考这样一个 ...

  4. JavaScript 设计模式核⼼原理与应⽤实践 之 结构型设计模式

    JavaScript 设计模式核⼼原理与应⽤实践 之 结构型设计模式 结构型:装饰器模式--对象装上它,就像开了挂 装饰器模式,又名装饰者模式.它的定义是"在不改变原对象的基础上,通过对其进 ...

  5. JavaScript 设计模式核⼼原理与应⽤实践 之 行为型:策略模式——重构小能手,拆分“胖逻辑”

    JavaScript 设计模式核⼼原理与应⽤实践 之 行为型:策略模式--重构小能手,拆分"胖逻辑" 行为型:策略模式--重构小能手,拆分"胖逻辑" 策略模式和 ...

  6. 疯狂html5+css3+javascript讲义 pdf_成为一名优秀的HTML5前端工程师需要掌握哪些技能?...

    在招聘网站上搜索可以发现,优秀的HTML5前端工程师薪资轻松可以过万,成为企业争抢的对象,那么想成为一名优秀的HTML5前端工程师需要学习哪些内容呢? 一般来说,HTML5学习内容主要有以下三大板块: ...

  7. javascript 设计模式之观察者模式

    什么是观察者模式 观察者模式 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个目标对象,当这个目标对象的状态发生变化时,会通知所有观察者对象,使它们能够自动更新. -- Graph ...

  8. 修炼内功之JavaScript设计模式(二)

    微信搜索[前端食堂]你的前端食堂,记得按时吃饭. 本文已收录在前端食堂 Github https://github.com/Geekhyt/front-end-canteen,感谢Star. 有人问我 ...

  9. 再起航,我的学习笔记之JavaScript设计模式23(中介者模式)

    中介者模式 概念介绍 中介者模式(Mediator):通过中介者对象封装一系列对象之间的交互,使对象之间不再相互引用降低他们之间的耦合,有时中介者对象也可以改变对象之间的交互. 创建一个中介 中介者模 ...

最新文章

  1. 为什么 JSP 还没有被淘汰?
  2. java学习与总结:线程池
  3. python背景颜色词云图_python中实现词云图
  4. 系统检测到您正在使用网页抓取工具_【安全】58反抓取简介
  5. Oracle 11g 内存结构
  6. asp.net DataGridTree表格树控件 下拉树 DropTree c# .net
  7. USB 3.1 与 Type-C 接口有什么关系呢
  8. linux 运行iso镜像文件,linux可以加载iso镜像文件到启动项吗
  9. 3. 线性表的链式结构
  10. Ice_cream’s world III(prime)
  11. Android基础:Android布局
  12. php的cmf框架哪个比较好,不要用这个CMF ThinkCMF内容管理框架,做最简约的ThinkPHP开源软件...
  13. 74HC595级联电路编程篇(四)
  14. 树莓派介绍树莓派3代B+型开发板
  15. 学会自我管理有哪些好处?自我管理包括哪些内容?
  16. [附源码]Python计算机毕业设计Django的高校资源共享平台
  17. 2022年38女神节大促美妆、珠宝、母婴、保健电商数据回顾
  18. 7-106 sdut-C语言实验——模拟计算器
  19. BasicSRSuper-resolution——Video2video
  20. 2021-06-06 SpringBoot 入门(五)组件添加(三) @Conditional条件装配

热门文章

  1. 20个非常棒的Jquery实用工具 [转]
  2. 用户控件事件使用delegate
  3. JQuery实现的Table表头固定展示效果
  4. flex gallery / 产品展示
  5. 生产者消费者之阻塞队列版本
  6. Linux中修改环境变量及生效方法
  7. 机器学习速成课程 | 练习 | Google Development——编程练习:使用神经网络对手写数字进行分类
  8. Linux(debian 7)错误集锦(一)之开机显示 a start job is running for dev-disk 解决办法
  9. oracle取某时间段的数据
  10. 【Pandas】dataframe 设置完全显示所有列