MVCmvc其实是从后端mvc架构模式中演变而来的，在2005年之前，也就是ajax还没有出现在前端世界中的时候，页面的处理其实都是由后端一人完成，全栈大师，那会前端技术还是很简单的，后端一个人就能实现从数据库拿数据然后渲染成一个完整html页面返回给浏览器。但是就是这个过程耦合度很高，以至于不太好维护代码，于是采用了一种分层模式，将不同的代码分为不同的部分，也就是解耦处理，总共分为三层：模型层（Model）、视图层（View）、控制器层（Controller）。模型层就是数据库的模型，如果使用过面向对象的数据库框架，比如sequelize，他们将每一个数据库的表转换成一个对象，通过操作...

简介责任链模式：为了避免请求发送者与多个请求处理者耦合在一起，于是将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链；当有请求发生时，可将请求沿着这条链传递，直到有对象处理它为止。举个例子，小明因为感冒需要请假，此时它的需要请3天，但是他的小组长只有1天的允许权限，小组长的领导项目经理有2天的权限，而能允许3天的只有老板，但是小明是新员工，所以它只能一步步的问，直到问到老板才成功请到了假期。但是如果小明的公司更大，那么它的审批流程就可能会更加复杂，如果人事流通了，说不定还得重新问一遍，有没有什么办法能方便一点呢？于是就有了职责链模式，它可以理解为一个申请表单，只要有领导在职...

简介策略模式： 该模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式，它通过对算法进行封装，把使用算法的责任和算法的实现分割开来，并委派给不同的对象对这些算法进行管理。简单点来说就是，我现在有10个算法，可能会根据不同的状态使用不同的算法，一般的做法就是if else或者switch这种判断方式，这样的话就跟状态模式一样，后续新增的算法和状态判断又得套一层if判断，这样的话代码的可读性就下降，且维护起来比较麻烦。我们来看个代码例子：function calc(type: number, a: number, b: ...

简介状态模式：对有状态的对象，把复杂的“判断逻辑”提取到不同的状态对象中，允许状态对象在其内部状态发生改变时改变其行为。简单点来说，我们在平时开发的过程中，会遇到一个对象中会判断一个“状态”的不同，从而会使用不同的行为（函数之类的调用），常见的做法就是if else或者switch这种判断方式，当我们一个状态有多种形式时，可能会产生大量的if else语句，这就不好维护了，如果每次新增一种状态，就得改动一次该对象，显然不符合我们的开闭原则。而状态模式是将每种状态的处理都单独提取出来，然后通过源对象进行组合使用，状态对象会持有源对象，当状态A发生改变时，会调用持有的源对象的设置状态方法，将...

简介解释器模式：给分析对象定义一个语言，并定义该语言的文法表示，再设计一个解析器来解释语言中的句子。因为是自定义的语言，所以它的语法表示肯定是有一些相似的地方，比如必须使用空格分割这种要求，或者使用其他特殊的字符。在这个基础上我们才能进行下一步，而不是说随便写个句子就可以的。举个简单的例子：我们博客编辑文章语言是markdown，而文法就是md中的各种语法，比如## 我是2级标题；这个就表示h2标签，这个规则就是文法，我们需要创建一个解释器来解释语法，说白了就是我们需要将各种文法组成的句子转换成html标签。文法：用于描述语言的语法结构的形式规则解释器会将解释的语言生成一个抽象的语法树，...

简介备忘录模式：在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态，以便以后当需要时能将该对象恢复到原先保存的状态。该模式又叫快照模式。其实就是一种设计历史记录的方式，在ps中，每次操作的记录都会进行一次记录，用户可以自己选择需要回退到哪条记录，而备忘录模式，是一种能记录一个对象的内部状态，可以通过方法获取到之前保存的内部状态数据，从而进行恢复。这里面最复杂的就是需要设计好需要记录的状态数据，然后通过谁去保存，谁去控制保存的数据，谁去主动进行创建备忘录数据和读取备忘录数据。所以他会有三个角色：备忘录角色：专门存储内部状态数据的类，这个类的实例被管理者管理，被发起者...

简介中介者模式：定义一个中介对象来封装一系列对象之间的交互，使原有对象之间的耦合松散，且可以独立地改变它们之间的交互。中介者模式又叫调停模式，它是迪米特法则的典型应用。我们来举个例子：机场的飞机降落起飞，都是需要通过塔台进行调度的，如果没有塔台的调度，5架飞机之间需要相互通信确认，以免出现问题，但是如果这么做，一定会出现问题，我们可以看下他们此时的关系网络。每一架飞机都要和其他4架飞机进行沟通通讯，如果这个关系网放在代码上去实现，这是非常难看的，这代码神仙看了都得摇头。而中介者就是为了解决这种网状的关系，通过增加一个中介对象，大家都通过中介对象进行通信，从而将飞机1对4的情况转为1对1的...

简介观察者模式：指多个对象间存在一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式。而我们前端vue的响应式原理其实就是观察者模式的实现，只不过他是完全解耦的发布订阅者模式；和基础的观察者模式实现上会有不同，原理都是一样的。观察者模式是为了将重要的部分与辅助部分进行解耦，我们举个例子：在前端中，我们的滚动条距离就可以理解为一个重要部分，我们监听了scroll事件，并在回调函数中处理了一条特殊操作，比如根据滚动的距离操作header元素显隐。此时这个代码量很少，我们知道scroll事件是不建议监听太多的，...

简介迭代器模式：提供一个对象来顺序访问聚合对象中的一系列数据，而不暴露聚合对象的内部表示。简单来说就是再程序设计中，对于一些自定义的数据结构对象，比如链表啊，或者系统提供的数据结构对象，他们的遍历方法通常会写在数据结构的类中，也就是说数据和遍历的方法是写在同一个类里面。这种方式不利于程序的扩展，因为如果要改动遍历的方法，就必须改动源数据，这违背了开闭原则。既然遍历的方法不能写在数据类中，那么将遍历的方法让客户实现不就好了，但是同样也是不可取的，如果交由客户去写，第一是会暴露很多不必要的属性给客户，第二是增加了客户端的使用负担。而迭代器模式很好的解决了这个问题，在迭代器模式中有以下几个角色...

简介访问者模式：将作用于某种数据结构中的各元素的操作分离出来封装成独立的类，使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作，为数据结构中的每个元素提供多种访问方式。它将对数据的操作与数据结构进行分离，是行为类模式中最复杂的一种模式。有一点点抽象，前一句话的意思是指在写好一个类之后，这个类就基本上不需要改动了（只要需求不改），这其实就是为了解决类结构不变但操作处理逻辑易变的问题，把对数据的操作都封装到访问者类中，我们只需要调用不同的访问者，而无需改变改变结构类，实现了。简单来说就是将一些操作作为扩展分离出去， 这些扩展的功能可能现在没有，以后会有，我们无法知道以后的情况，于是...

简介命令模式是将一个请求封装为一个对象，使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通，这样方便将命令对象进行储存、传递、调用、增加与管理。举个简单的例子：我有一个饭店，共有五个厨师：A,B,C,D,E；每个厨师都会做不同的菜，但是我没有菜单，于是客人就必须知道我有几个厨师，他们分别会做什么菜，于是就会产生下面这些情况：客人1想吃青椒炒蛋，于是问了好几个厨师才知道C厨师会做，于是它通知C厨师做青椒炒蛋客人2想吃冒菜，于是他也问了好几个厨师，找到E厨师制作...更多你会发现客人与厨师耦合度非常之高，这显然不利于饭店的发展，然后我们想一下生活中的真实情况：每个饭店都...

简介模板方法模式：定义一个操作中的算法骨骼，而将算法的一些步骤延迟到子类中去，使得子类可以不改变整体算法结构的情况下重新定义该算法的某些特定步骤。简单点来说就是将重要的步骤顺序的处理交由父类来做，然后父类是一个抽象的类，它申明了每个步骤的抽象，由子类去进行每个步骤的具体实现。这样父类定好了一个整体的骨骼，具体步骤实现交给子类，每当需要改动时只需要更换不同的子类就可以了，符合开闭原则。代码实现//抽象父类 abstract class A { //抽象方法 public abstract step1(): void; //抽象方法 public abstract step...

简介代理模式指：由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时，访问对象不适合或者不能直接引用目标对象，代理对象作为访问对象和目标对象之间的中介。更直白的说，代理模式更注重的是对源对象的控制访问（中介和保护），虽然我们可以在代理对象上扩展源对象没有的属性，但是如果要增强原有的功能其实还需要和其他模式进行组合使用，比如装饰器模式。角色：抽象角色：用于源对象与代理对象的依赖抽象源对象：真实的业务对象，是代理类所要代表的真实对象代理类：通过抽象角色规范，提供与源对象相同的接口，内部含有对源对象的引用，通过它可以进行扩展和控制代码实现//抽象 interface AInterfa...

简介享元模式是运用共享技术来有效地支持大量细粒度对象的复用。它通过共享已经存在的对象来大幅度减少需要创建的对象数量、避免大量相似类的开销，从而提高系统资源的利用率。举个例子：我们有一个服装工厂，它有男装和女装衣服各100套，为了销售，需要模特来帮忙拍照做成广告照片，正常情况下我们可能会这么写。class Model { private gender: string; //性别 private clothes: number; //衣服 constructor(gender: string, clothes: number) { this.gender = gende...

简介外观模式：是一种通过为多个复杂的子系统提供一个一致的接口，而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口，外部应用程序不用关心内部子系统的具体细节，这样会大大降低应用程序的复杂度，提高了程序的可维护性。其实就是一种封装，把一系列的操作封装成简单的接口供客户端去调用。但是不能滥用，因为本身就是为了减少客户端与各个依赖的耦合性，将一堆依赖改为依赖一个外观类。外观模式遵循的是迪米特法则，也就是最少知道原则，但是如果新增新的功能，可能会改动到外观类，所以它违背了开闭原则。它常常应用于SKD，开源类库这些，用于给外部提供精简的接口。而我们js，可能并不需要去创建一个类，直接整个函...

简介组合模式它本身是一种树形结构模式，可以将其理解为一棵树，其中树为根节点，然后有树枝和树叶，树枝不断的分叉，树枝上也会有树叶。我们看个图：它是一种将对象组合成树状的层次结构的模式，用来表示“整体-部分”的关系，使用户对单个对象和组合对象具有一致的访问性。其实说人话就是，我定义了一个接口，它有一个show方法，然后所有的对象都得实现，然后对象之间可以嵌套，因为嵌套了，所以当我调用show方法的时候，这个对象必须去遍历自己的子级嵌套对象的show方法，不断的重复，最终得到结果之和。类似于一个递归函数，只不过具体的处理都在每个对象自身show方法中去实现。组合模式常常用在：购物车、节点统计购...

简介在软件开发过程中，有时想用一些现存的组件。这些组件可能只是完成了一些核心功能。但在不改变其结构的情况下，可以动态地扩展其功能。所有这些都可以釆用装饰器模式来实现。装饰器模式指：在不改变现有对象结构的情况下，动态的给对象增加一些职责（功能）的一种模式。这种模式也是防止滥用继承，相对于桥接模式只能桥接两个维度，装饰器模式是可以对接多个维度的，因为他可以嵌套使用。我们举个例子：我有一个食物类：class 煎饼我单点煎饼这个食物是可以的，我也可以加不同的配料：鸡蛋、火腿、豆皮于是乎我们通过继承得到：class 鸡蛋煎饼 extends 煎饼class 火腿煎饼 extends 煎饼class...

简介桥接模式是指：将抽象与实现分离，使它们可以独立变化。它使用组合关系来代替继承关系来实现，从而降低了抽象和实现这两个可变维度的耦合度。简单点来说，桥接模式用就是用于连接两个独立变化维度的一种方式（组合），而为什么要连接，我们需要先了解到类继承带来的复杂性。先看一张图：我们可以看到，从最顶层的电脑类延伸了三个子类，子类又延伸出不同的品牌类，如果我们又新增了一个新的电脑子类，比如二合一电脑，又不得不重复实现一下对应的品牌子类；如果是新增新的品牌，也是同理，也得产生很多新的子类。这就导致类的不断产生，从而有了类爆炸这一说。而桥接模式，就是用于解决这个问题的，我们将他们进行抽象，你会发现有两个...

简介适配器模式是将某个类的接口转换成客户端期望的另一个接口表示，主要目的是兼容性，让原本因接口不匹配不能一起工作的两个类可以协同工作。举个简单的例子：我们的插排提供的是220v的电压，而我们的手机能支持的是5v电压，此时它们之间是无法协同工作的，所以我们出现了电源适配器（手机充电器），电源适配器将220v转为了5v电压供手机使用。而适配器模式有三类：类适配器模式、对象适配器模式、接口适配器模式。类适配器模式适配器模式中有三种主要角色：被适配者（src），适配器（adapter），目标的实现接口（dst）；目标的实现接口，以上面电源适配器的例子来说，手机要求的是一个5v的电压，这个要求就可...

简介建造者模式指将一个复杂对象的构造过程与表示分离，使同样的构建过程可以创建不同的表示。它将变与不变相分离，即产品的整体组成不变，但是每一个部分是可以灵活变动的。“表示”指的就是实际生成的实例对象，相同的构造过程可以创建不同的表示，这里我们需要先了解一下构造者模式中的3个角色。角色：指挥者：调用具体建造者来创建复杂对象的各个部分，它只处理创建的过程建造者：提供各个部件的具体创建方法，在完成后提供产品的实例。产品：要创建的复杂对象指挥者指挥建造者去建造产品，同一个指挥者指挥不同的建造者，可以产生不同的产品，而指挥者也是可以替换的，不同的指挥者指挥同一个建造者，也可以产生不同的产品。但是最终...

简介原型模式指的是：用一个已经创建的实例作为原型，通过复制该原型对象来创建一个和原型相同或者相似的新对象。这个原型不同于js中的prototype，它指的是被克隆的对象。在java中克隆可以通过Object父类中的clone方法实现，但是在前端中，是没有这种方式的，我们需要通过其他方法实现克隆。克隆又分浅克隆和深克隆，因为引用类型的存在，浅克隆对引用类型只会克隆该类型的内存地址，而深克隆则会完全复制一份引用类型对象，达到完全克隆。原型模式也是用于创建一个对象，而这个对象可能非常复杂，为了减少消耗的资源，更高效的生成对象。反例假设我们现在有这么一段代码：const run = { a:...

简介工厂模式是讲需要实例化的代码提取出来，放到一个专门的类中去做管理和维护，达到和主体代码的解耦，从而提高项目的扩展性和维护性。将创建实例与调用实例进行解耦！简单来说就是把new操作（创建实例）放到一个专门的地方统一管理，而不是在代码中耦合使用，方便管理和扩展。工厂模式有三种用法：简单工厂模式、工厂方法模式、抽象工厂模式简单工厂模式简单工厂模式是指由一个工厂对象决定创建出哪一种产品类的实例。比如我们需要建一个饭店，这个饭店需要招三名厨师，他们要有各自的拿手菜：水煮牛肉、青椒炒蛋、炒米粉。为了能方便的招聘厨师，我定了一个要求，厨师必须会：开火、颠勺、关火、出菜于是我写了一个接口来要求这些厨...

简介所谓的的单例设计模式，就是采取一定的方法保证整个软件系统中，对某个类只能存在一个对象实例，并且该类只提供一个取得其对象实例的方法（静态方法）。以前端中vuex为例，它在整个vue的系统中，获取到的就是一个全局唯一的对象实例。由于vuex本身就是一个重量级的功能，且一个项目通常只需要一个vuex状态管理就够了，所以采用的单例模式。单例模式在java中有八种方法：饿汉式（静态常量）饿汉式（静态代码块）懒汉式 （线程不安全）懒汉式 （线程安全，同步方法）懒汉式 （线程安全，同步代码块）双重检查静态内部类枚举但是前端中其实好多方法就做不到，因为js是单线程的，且并不是强类型语言，所以其中：双...

概述设计模式是程序员在面对同类软件工程所遇到的问题总结出来的有用的经验，模式不是代码，而是某类问题的通用解决方案，设计模式代表了最佳的实践。这些解决方案是众多开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式本质是为了提供：软件的维护性，通用性和扩展性，并降低软件的复杂度设计模式参考书：《Design Patterns - Elements of Reusable Object-Oriented Software》（设计模式 - 可复用的面向对象软件元素），书中共总结了23种设计模式，被广泛的认同。设计模式是针对面向对象语言的，但不局限与某一种面向对象的语言。分类设计模式可以分...

设计原则在软件开发中，为了提供软件系统的：可维护性、可复用性、增加软件的可扩展性和灵活性，程序员尽量根据7条原则来开发程序，从而提高软件开发效率、节约软件开发成本和维护成本。设计原则最初只有5条，单一功能、开闭原则、里氏替换、接口隔离以及依赖反转，后来又进行了增强，目前详细版的有7个原则，很多书都只有6个原则。目前共有23种设计模式。设计模式最初都是应用于强类型语言，所有很多例子都是java这种例子，所以，类，抽象，这些在后面的文章中会频繁出现。希望你有一些心理准备。开闭原则开闭原则是设计中最为重要的一个设计原则，它是所有原则的基础，所有的设计原则全部都是围绕着开闭思想延展的。正所谓原则...