学好JavaScript设计模式，一文足矣！ _JavaScript

相信大家在平时的开发中或多或少听说的听说过各种设计模式，有非常常见的，比如：观察者模式，工厂模式，装饰器模式等等，熟练掌握设计模式不仅仅对我们技术提升有巨大的帮助，而且更有利于编程思维的提升，而且如果我们能够熟练的将各种设计模式应用到实际的开发中，对代码的易读和维护都能够起到积极的作用。

文章插图

设计原则Tips:在学习设计模式的时候，尽量分开去学，即先学习设计，然后再去学模式，这样的话，对于之后的理解更加容易一些，什么设计呢，其实就是指设计原则，而模式这里指的就是就是我们要讲的设计模式。现在共有5大设计原则，不管是哪种设计模式，都是遵循设计原则的。下面来分别介绍这5大设计原则。
1.单一职责原则
单一职责原则原则就是每个程序只负责做好一件事情，如果功能过于复杂就拆分开，每个部分保持独立。这个其实也符合我们当下流行框架Vue和React的组件化开发，把一个复杂的页面拆分成一些零散的组件，并且每个组件保持独立，同时也可在不同的页面当中实现复用。
2.开放封闭原则
开发封闭原则大白话的意思就是对扩展开放，对修改封闭。放到实际开发中如何去理解呢，我们日常的网站和App开发每周都有发不同的版本来增加需求，那么增加需求的时候，尽量要做到扩展新代码，而非修改已有代码，如果我们修改已有代码无疑增加了风险，因为本来原来的代码是没有问题的，加了新的代码之后必然会增加不可预知的风险，当然有的个别需求必须修改已有代码，这个另说。同时这个原则也是我们软件设计的终极目标。
3.李氏置换原则
子类能够覆盖父类，父类能出现的地方，子类就可以出现，这个原则其实在JAVA等语言当中是较为常见的，多用于继承，而JavaScript作为弱类型语言，继承使用其实是很少的，这里简单提一下。
4.接口独立原则
接口独立原则的含义是保持接口的单一独立，避免出现胖接口，JavaScript中是没有接口(typescript例外)，使用较少，它是有点类似于单一职责原则，这里更关注接口。
5.依赖倒置原则
依赖倒置原则的含义是面向接口编程，依赖于抽象而不依赖于具体，使用方只关注接口而不关注具体类的实现，同样这里也是JavaScript中使用较少(没有接口&弱类型)
设计模式设计模式分类

创建型

工厂模式(工厂方法模式、抽象工厂模式、建造者模式) 单例模式

组合型
适配器模式装饰器模式代理模式外观模式
行为型
观察者模式状态模式

下面我们就来一一结合开发当中的实例，来分析各个设计模式
工厂模式概念
工厂模式是由一个方法来确定是要创建哪个类的实例，在前端当中最为常见的工厂模式就是new操作的单独封装，当遇到new操作的时候，就要考虑是否该使用工厂模式。这里也可以结合生活中的例子去思考。当你去购买汉堡，直接点餐取餐，不会自己亲手做，商店要“封装”做汉堡的工作，做好直接给买者。也就是说通过提供原材料，最终得到是汉堡还是炸鸡，是由你自己决定的。
前端中实例
1. jQuery当中的$('')
jQuery当中的$('div'),这里的$选择器就是已经封装好的API，这里我们直接使用即可。下面简单实现一个JQuery的$操作符，帮助大家加深理解。
class jQuery { constructor(selector) {let slice = Array.prototype.slicelet dom = slice.call(document.querySelectorAll(selector))let len = dom ? dom.length : 0for(let i = 0;i < len; i++) {this[i] = dom[i]}this.length = lenthis.selector = selector || '' } append(node) {} html(data) {} //等等API}window.$ = function (selector) { return new jQuery(selector)}2. Vue异步组件
这个大家应该比较熟悉，而且官方文档讲的也非常详细，这里直接饮用官方文档的案例，在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如：
Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // 向 `resolve` 回调传递组件定义 resolve({ template: '<div>I am async!</div>' }) }, 1000)})