当前位置: 首页 > Web前端 > JavaScript

Adapter&Decorator

时间:2023-03-27 17:07:38 JavaScript

js设计模式——AdapterMode、DecoratorMode1.AdapterMode适配器模式:(Adapter)是将一个类的接口转换成客户想要的另一个接口。Adapter模式使得原来的接口不兼容,而那些不能一起工作的类可以一起工作。(大话设计模式)使用场景:系统的数据和行为都是正确的,但是当接口不匹配时,我们应该考虑使用适配器,将一个控制范围之外的原始对象与一个接口进行匹配。适配器模式主要用于希望复用现有类,但接口与服务环境要求不一致的情况。(大谈设计模式)JavaScript毕竟不是传统的面向对象语言,所以使用es6class关键字(不带typescript)创建的适配器会与Java、C#、VB.NET中的适配器略有不同(本文将不讨论它们)。1.1特定适合配置器模型classMyInterface{constructor(arr){this.arr=arr}getResult(){returnthis.arr}}classMySonInterfaceextendsMyInterface{transform(){returnthis.arr.reduce(function(pre,cur,index,arr){pre['date'+index]=curreturnpre},{})}}varint=newMyInterface([7,2,3,4,5])varmyint=newMySonInterface([7,2,3,4,5])console.log(int.getResult());//[7,2,3,4,5]console.log(myint.transform());//{date0:7,date1:2,date2:3,date3:4,date4:5}1.2通用配置器模型classAdapter{constructor(arr){this.obj=newMyInterface(arr)}transform(){returnthis.obj.arr.reduce(function(pre,cur,index,arr){pre['date'+index]=curreturnpre},{})}}varide=newAdapter([7,2,3,4,5])console.log(ide.transform());//{date0:7,date1:2,date2:3,date3:4,date4:5}1.3工厂适配器模型classAdapterFactor{staticcreate(Interface,arr){returnnewInterface(arr)}}varide2=AdapterFactor.create(Adapter,[7,2,3,4,5])console.log(ide2.transform());//{date0:7,date1:2,date2:3,date3:4,date4:5}2。装饰者模式装饰者模式(DecoratorPattern):装饰者模式是让一个已有的对象在不改变其结构的情况下增加新的功能,从而使不同的类或对象共享或扩展一些方法或行为,使用场景比较优雅:2.1继承实例(?)为什么会写错实例?原因:1、在传统的面向对象语法中,当我们需要给一个对象增加新的功能时,我们通常会使用类继承来使某一类对象具有一定的功能。2.装饰者模式(Decorator):动态地给一个对象添加一些额外的职责。在添加功能方面,装饰器模式比生成子类更加灵活。(大话设计模式)classCat{constructor(name){this.name=name}sayName(){console.log('猫的名字是',this.name);}}classSuperCatextendsCat{constructor(name,age){super(name)this.age=age}sayAge(){console.log('今年的超级猫',this.age);}}varcat1=newCat('Homesickness')varnbCat=newSuperCat('Sifan',2)nbCat.sayName()//猫的名字是SifannbCat.sayAge()//今年超级猫2cat1.sayName()//猫的名字是乡愁,因为继承带来的强耦合,也导致生成类存在“灵活性低”的致命缺点。当我们修改父类的一个属性时,子类也会随之改变。由此可见类继承和装饰器模式的区别(不明白的请看装饰器模式的定义)2.2装饰器模式实例类Dog{constructor(name){this.name=name}sayName(){console.log('狗的名字是',this.name);}}classSuperDog{constructor(dog){this.dog=dog}sayName(){this.dog.sayName()}sayNewname(){console.log('升级后的超级狗有了新名字','Super'+这个.dog.name);}}vardog=newDog('旺财')varsuperDog=newSuperDog(dog)superDog.sayName()//狗的名字叫旺财超Dog.sayNewname()//升级后的超级狗有了新的名字SuperWangcaidog.sayName()//狗的名字叫Wangcai从上面的结果我们可以看出,当我们调用superDog方法的时候,我们不仅调用了方法调用了superDog的方法,也调用了Dog的方法。我们只是将Dog包裹在其中,这样我们就可以在使用Dog类的内部方法的同时定义新的方法。