状态模式(StatePattern)定义：创建表示各种状态的对象和一个行为随着状态对象改变而改变的context对象。目的：允许对象在内部状态发生改变时改变它的行为，对象看起来好像修改了它的类。场景：游戏角色有跳跃、移动、射击、蹲下等状态设定，如果用if-else或者switch来进行判断，在遇到组合动作的时候，判断会变得非常复杂难读，这时可以使用状态模式来实现。classSuperHero{constructor(){this.currentState=[]this.states={jump(){console.log('jump')},move(){console.log('move')},shoot(){console.log('shoot')},squat(){console.log('squat')}}}//更改当前状态change(arr){this.currentState=arrreturnthis}run(){console.log('.....beginstart......')this.currentState.forEach(item=>this.stat...

观察者模式(ObserverPattern)定义：当一个对象被修改时，则会自动通知它的依赖对象。目的：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。场景：一个对象（目标对象）的状态发生改变，所有的依赖对象（观察者对象）都将得到通知，进行广播通知。classSubject{constructor(){this.state=0this.observers=[]}getState(){returnthis.state}setState(state){this.state=statethis.notifyAllObsevers()}attach(observer){this.observers.push(observer)}notifyAllObsevers(){for(leteleofthis.observers.values()){ele.update()}}}classObserver{constructor(name,subject){this.name=namethis.subject=subjectthis.subject....

模板方法模式(TemplateMethodPattern)定义：一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现，但调用将以抽象类中定义的方式进行。目的：一些方法通用，却在每一个子类都重新写了这一方法。场景：在造房子的时候，地基、走线、水管都一样，只有在建筑的后期才有加壁橱加栅栏等差异。//定义烧水类classBoilWater{constructor(){}//烧水boilWater=()=>{console.log('Iamboilthewater!')}//沏茶makeTea=()=>{console.log('大碗茶，上嘞')}init=()=>{this.boilWater()this.makeTea()}}classTeaextendsBoilWater{constructor(){super()}//重写沏茶makeTea=()=>{console.log('头杯茶不喝，喝第三杯')}}lettea=newTea()tea.init()Git地址：https://github.com/skillnull/Design-M...

享元模式(FlyweightPattern)定义：减少创建对象的数量，以减少内存占用和提高性能。目的：用共享技术有效地支持大量细粒度的对象。场景：系统中有大量对象。//构建享元对象classModal{constructor(id,gender){this.gender=genderthis.name=`${gender}${id}`}}//构建享元工厂classModalFactory{//单例模式staticcreate(id,gender){if(this[gender]){returnthis[gender]}returnthis[gender]=newModal(id,gender)}}//管理外部状态classTakeClothersManager{//添加衣服款式staticaddClothes(id,gender,clothes){constmodal=ModalFactory.create(id,gender)this[id]={clothes,modal}}//拍照statictakePhoto(id){constobj=this[id]console.log(`$...

外观模式(FacadePattern)定义：隐藏系统的复杂性，并向客户端提供了一个客户端可以访问系统的接口。目的：为子系统中的一组接口提供一个一致的界面，外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。场景：客户端不需要知道系统内部的复杂联系，整个系统只需提供一个"接待员"即可。//通过一个接口封装其他接口letmobileEvent={stop:(e)=>{e.preventDefault()e.stopPropagation()}}Git地址：https://github.com/skillnull/Design-Mode-Example...

组合模式(CompositePattern)定义：又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。目的：将对象组合成树形结构以表示"部分-整体"的层次结构。场景：您想表示对象的部分-整体层次结构(树形结构),如：文件系统。//指令letdirective={eat:{excute:()=>{console.log('eat')}},sleep:{excute:()=>{console.log('sleep')}},code:{excute:()=>{console.log('Getoutthereandwritecode!')}}}constcallDirective=()=>{letresult={directiveList:[],add:(directive)=>{result.directiveList.push(directive)},excute:()=>{for(leteleofresult.directiveList.values()){ele.excute()}}}returnresult}letcommand=callD...

桥接模式(BridgePattern)定义：是用于把抽象化与实现化解耦，使得二者可以独立变化。目的：将抽象部分与实现部分分离，使它们都可以独立的变化。场景：实现系统可能有多个角度分类，每一种角度都可能变化。leteach=(arr,fn)=>{for(leti=0;i<arr.length;i++){letval=arr[i]if(fn.call(val,i,val,arr)){returnfalse}}}letarr=[1,2,3,4]each(arr,(i,v)=>{arr[i]=v*2})Git地址：https://github.com/skillnull/Design-Mode-Example...

适配器模式(AdapterPattern)定义：将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类能一起工作。目的：主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的。场景：系统需要使用现有的类，而此类的接口不符合系统的需要。classTarget{small(){thrownewError('Pleaseoverwrittenfunction!')}}classnewTarget{big(){console.log('新的适配')}}classAdapterextendsTarget{constructor(newTarget){super()this.newTarget=newTarget}small(){this.newTarget.big()}}letNT=newnewTarget()letAD=newAdapter(NT)AD.small()Git地址：https://github.com/skillnull/Design-Mode-Example...

原型模式(PrototypePattern)定义：用于创建重复的对象，同时又能保证性能。目的：用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。场景：在运行期建立和删除原型。letproductPrototype={init:(type)=>{this.type=type},getType:()=>{returnthis.type}}letprototype=(type)=>{functionF(){}F.prototype=productPrototypeletf=newF()f.init(type)returnf}letcar=prototype('丰田CHR')console.log(car.getType())Git地址：https://github.com/skillnull/Design-Mode-Example...

抽象工厂模式(AbstractFactoryPattern)定义：抽象工厂模式提供了一种方式，可以将一组具有同一主题的单独的工厂封装起来。或者说，是其他工厂的工厂。目的：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。场景：系统的产品有多于一个的产品族，而系统只消费其中某一族的产品。classUser{constructor(type){if(new.target===User){thrownewError('抽象类不能实例化！')}this.type=type}}classUserOfWechatextendsUser{constructor(name){super('wechat')this.name=namethis.viewPage=['首页','通讯录','发现页']}}classUserOfQQextendsUser{constructor(name){super('qq')this.name=namethis.viewPage=['首页','通讯录','发现页']}}functiongetUser(type){switch(type){case'wec...

建造者模式(BuilderPattern)定义：使用多个简单的对象一步一步构建成一个复杂的对象。目的：将一个复杂的构建与其表示相分离，使得同样的构建过程可以创建不同的表示。场景：一些基本部件不会变，而其组合经常变化的时候。//声明一个产品类classProduct{constructor(){}}//声明一个建造者类classBuilderProduct{constructor(){//建造产品名称this.nameBuilder=(name)=>{this.name=name||null}//建造产品版本this.versionBuilder=(version)=>{this.version=version||null}//建造产品生产日期this.createTimeBuilder=(createTime)=>{this.createTime=createTime||null}//组合建造产品this.getProduct=()=>{letproduct=newProduct()if(this.name){product.name=this.name}if(...

单例模式(SingletonPattern)：定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。目的：阻止其他对象实例化其自己的单例对象的副本，从而确保所有对象都访问唯一实例。场景：如一个系统中可以存在多个打印任务，但是同时只能有一个正在工作的任务。例：JS代码实现//惰性单例letlazySingle=(()=>{let_instance=null//单例Single=()=>{letprivateAttribute='我是私有属性'privateMethod=()=>{//私有方法}return{publicMethod:()=>{//对外暴露方法},publicAttribute:'我是对外暴露属性'}}//提供一个全局访问点return()=>{if(!_instance){_instance=Single()}return_instance}})()Git地址：https://github.com/skillnull/Design-Mode-Example...

装饰模式(DecoratorPattern)：定义：在不改变原对象的情况下，动态的给对象添加一些额外的职责。就功能而言，装饰模式相比生成子类更为灵活。目的：把类的核心职责和装饰功能区分开。可以去除相关类中重复的逻辑。场景：当系统需要扩展一个类的功能，或者客户端需要动态的给一个对象添加功能，并且使用继承或生成子类会很复杂的时候。装饰模式体现了"多用组合，少用继承"这一设计原则。例：JS代码实现//一辆小汽车的构造函数functionACar(){//一辆原味小汽车的价格是99元this.price=function(){return99}}//装饰器——汽车喇叭functioncarTrumpet(car){letprice=car.price()car.trumpet=function(){console.log('滴滴滴')}//一个喇叭加价10元car.price=function(){returnprice+10}}//装饰器——行车记录仪functioncarRecorder(car){letprice=car.price()ca...

策略模式(StrategyPattern)：定义：定义了一族算法；封装了每个算法；这族的算法可互换代替。目的：将算法的使用与算法的实现分离开来。场景：可用来消除大量的条件分支语句。例：JS代码实现//策略算法封装letstrategy={add(number1,number2){returnnumber1+number2},sub(number1,number2){returnnumber1-number2},mul(number1,number2){returnnumber1*number2},div(number1,number2){returnnumber1*number2}}//策略算法调用封装functioncallStratery(strategyType,number1,number2){returnstrategy[strategyType](number1,number2)}//策略算法调用callStratery(add,1,2)//return3Git地址：https://github.com/skillnull/Design-Mode-Example...

工厂模式(FactoryPattern)：定义：定义一个创建对象的接口，但让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行。目的：工厂模式是为了解耦，把对象的创建和使用的过程分开。场景：需要生成复杂对象，需要降低耦合度的场景。例子：JS代码实现 letoperationFactory={createOperate(operate){letoper=nullswitch(operate){case'+':oper=newoperationFactory.OperationAdd()breakcase'-':oper=newoperationFactory.OperationSub()breakcase'*':oper=newoperationFactory.OperationMul()breakcase'/':oper=newoperationFactory.OperationDiv()break}},OperationAdd(){//TODOruntheadditionoperation},OperationSub(){//TODOrunthesub...