Web开发应了解的5种设计模式

2023-05-26 0 408

甚么是程序词汇?

程序词汇是对软件合作开发合作开发操作过程中反反复复再次出现的一般而言难题的通用型软件系统。程序词汇更多的是指导方针和认识论,而并非整套的标识符,总之五种程序词汇都有五种词汇中的具体内容同时实现形式。自学程序词汇更多的是理解各式各样商业模式的外在价值观和化解的难题,即便这是宋人不计其数策尔纳成的最差课堂教学,而标识符同时实现则是对增进认知的远距。采用程序词汇是为的是可宠信标识符、让标识符更容易被别人认知、确保标识符安全性

Web开发应了解的5种设计模式

在责任编辑中,我将如是说当中常用的三种程序词汇在JavaScript中前述采用情景。

科枫程序词汇

表述

科枫商业模式仅容许类或第一类具备一般而言示例,因此它采用函数调用来储存该示例。

同时实现形式是推论与否存有该第一类的示例,假如已存有则无须建立采用情景适用于于销售业务情景中根本无法存有两个的示例,比如说快捷形式,科季夫

同时实现:科枫商业模式分成农夫式和饿汉式

农夫式let ShopCar = (function () {  let instance;   function init() {    /*这里表述科枫标识符*/    return {      buy(good) {        this.goods.push(good);      },      goods: [],    };  }  return {    getInstancefunction () {      if (!instance) {        instance = init();      }      returninstance;    },  }; })();let car1 = ShopCar.getInstance(); letcar2 = ShopCar.getInstance(); car1.buy(橘子);  car2.buy(苹果);  console.log(car1.goods);//[ 橘子, 苹果 ] console.log(car1 === car2); // true饿汉式var ShopCar = (function () {  var instance = init();  function init() {    /*这儿表述科枫标识符*/    return{      buy(good) {this.goods.push(good);      },      goods: [],    };  }  return {    getInstancefunction () {      returninstance;    },  }; })();let car1 = ShopCar.getInstance(); letcar2 = ShopCar.getInstance(); car1.buy(橘子); car2.buy(苹果); //[ 橘子, 苹果 ] console.log(car1.goods); console.log(car1 === car2); // true

策略商业模式

表述

策略商业模式表述一系列的算法,将每两个算法封装起来,并让他们可以相互替换。

同时实现形式表述一组可变的策略类封装具体内容算法,表述一组不变的环境类将请求委托给某两个策略类采用情景适用于于销售业务情景中需要推论多种条件,甚至包含复杂条件嵌套的,可以采用策略模式来提升标识符的可维护性和可读性。比如说支付,博客权限校验

同时实现

// 表述几个策略类 var PaymentMethodStrategy = {  BankAccountfunction (money{    return money > 50 ? money * 0.7 : money;  },  CreditCardfunction (money{    return money * 0.8;  },  Alipayfunction (money{    return money;  }, }; /*环境类*/ var userPay = function (selectedStrategy, money{  returnPaymentMethodStrategy[selectedStrategy](money); };console.log(银行卡支付价格为: + userPay(BankAccount100));//70 console.log(支付宝支付价格为: + userPay(Alipay100)); //100 console.log(信用卡支付价格为: + userPay(CreditCard100)); //80

观察者商业模式

表述

观察者商业模式,也叫订阅-发布商业模式,是第一类的行为商业模式,在第一类之间表述了一对多的依赖关系,就是多个观察者和两个被观察者之间的关系,当被观察者发生变化的时候,会通知所有的观察者第一类,他们做出相对应的操作。

同时实现形式表述一组可变的策略类封装具体内容算法,表述一组不变的环境类将请求委托给某两个策略类采用情景适用于于销售业务情景中当两个第一类的状态发生变化时,需要自动通知其他关联第一类,自动刷新第一类状态,或者说执行对应第一类的形式,比如说你是两个老师,需要通知班里家长的时候,你可以建两个群(列表)。每次通知事件的时候只要循环执行这个列表就好了(群发),而不用关心这个列表里有谁。

同时实现

// 建立两个群,保存通知,通知变化之后通知每个家长(触发所有观察者第一类) class Group {  constructor() {    this.message = 暂无通知;    this.parents = [];  }  getMessage() {return this.message;  }  setMassage(message) {    this.message = message;this.notifyAllObservers();  }  notifyAllObservers() {    this.parents.forEach((parent) => {      parent.update();    });  }  attach(parent) {this.parents.push(parent);  } }// 观察者,每个家长 class Parent {  constructor(name, group) {    this.name = name;    this.group = group;    this.group.attach(this);  }  update() {    console.log(`${this.name} 收到通知: ${this.group.getMessage()}`);  } }let group = new Group(); let t1 = new Parent(李妈妈group); let t2 = new Parent(王爸爸group); let t3 = new Parent(张爷爷group); group.setMassage(开家长会); group.setMassage(开运动会); /* 李妈妈 收到通知: 开家长会 王爸爸 收到通知: 开家长会 张爷爷 收到通知: 开家长会 李妈妈 收到通知: 开运动会 王爸爸 收到通知: 开运动会 张爷爷 收到通知: 开运动会 */

装饰器商业模式

表述

在不改变原来的结构和功能基础上,动态装饰一些针对特别情景所适用于的形式或属性,即添加一些新功能以增强它的某种能力

同时实现形式表述一组可变的策略类封装具体内容算法,表述一组不变的环境类将请求委托给某两个策略类采用情景原有形式维持不变,在原有形式上再挂载其他形式来满足现有需求;函数的解耦,将函数拆分成多个可复用的函数,再将拆分出来的函数挂载到某个函数上,同时实现相同的效果但增强了复用性。比如说多孔插座,机车改装

同时实现

const Man = function () {  this.run = function () {    console.log(跑步);  }; };const Decorator = function (old{  this.oldAbility = old.run;  this.fly = function () {    console.log(具备飞行能力);  };this.newAbility = function () {    this.oldAbility();    this.fly();  }; }; const man = new Man(); const superMan = new Decorator(man); superMan.fly(); // 具备飞行能力

代理商业模式

表述

代理商业模式给某两个第一类提供两个代理第一类,并由代理第一类控制对原第一类的引用。通俗的来讲代理商业模式就是我们生活中常用的中介。

同时实现形式表述两个委托者和两个代理,需要委托的事情在代理中完成采用情景在某些情况下,两个客户类不想或者不能直接引用两个委托第一类,而代理类第一类可以在客户类和委托第一类之间起到中介的作用。代理可以帮客户过滤掉一些请求因此把一些开销大的第一类,延迟到真正需要它时才建立。中介购车、代购、课代表替老师收作业

同时实现

class Letter {  constructor(name) {this.name = name;  } } // 暗恋人小明 let XiaoMing = {  name小明,  sendLetter(target) {    target.receiveLetter(this.name);  }, }; // 代理小华 let xiaoHua = {  receiveLetter(customer) {    // 总之要等小红好心情时才送情书,也在送情书也才建立情书    XiaoHong.listenGoodMood(() => {      XiaoHong.receiveLetter(newLetter(customer +的情书));    });  }, }; // 心仪第一类小红 let XiaoHong = {  name小红,  receiveLetter(letter) {    console.log(this.name + 收到: + letter.name);  },  listenGoodMood(fn) {    setTimeout(() =>{      fn();    },1000);  }, }; XiaoMing.sendLetter(xiaoHua);//小红收到:小明的情书

Proxy 是 ES6 提供的专门以代理角色再次出现的代理器,Vue 3.0 的响应式数据部分弃用了 Object.defineProperty,采用 Proxy 来代替它。

var proxy = new Proxy(target, handler);

现在用Proxy模拟一下另一种情景:为的是保护不及格的同学,课代表拿到全班成绩单后只会公示及格人的成绩。对考分有疑问的考生,复议后新分数比以前大10分才有权利去更新成绩

const scoreList = {   wang90,   li60,   wu:100, } const yyProxy = new Proxy(scoreList, {   get:function(scoreList,name{       if(scoreList[name] > 69) {           console.log(输出成绩)           return scoreList[name]       }else {           console.log(不及格的成绩无法公示)       }   },   set:function(scoreList, name, val{      if(val – scoreList[name] > 10) {           console.log(修改成绩)          scoreList[name] = val      }else {           console.log(无法修改成绩);      }   } }) yyProxy[wang] = 98 //无法修改成绩 yyProxy[“li”] = 80 //修改成绩

总结

我曾经以为程序词汇是疯狂的,遥远的软件合作开发指南。然后我发现我一直在采用它们!

我如是说的一些商业模式已在许多应用程序中采用。但归根结底,它们只是理论而已。作为合作开发人员,与否采用取决于采用后与否使标识符逻辑更易于同时实现和维护。

作者:johnYu

链接:Web合作开发应介绍的5种程序词汇 – 掘金

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务