返回顶部
首页 > 资讯 > 前端开发 > html >Web开发应的设计模式有哪些几种
  • 620
分享到

Web开发应的设计模式有哪些几种

2024-04-02 19:04:59 620人浏览 独家记忆
摘要

这篇文章主要讲解了“web开发应的设计模式有哪些几种”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“WEB开发应的设计模式有哪些几种”吧!什么是设计模式?设计

这篇文章主要讲解了“web开发应的设计模式有哪些几种”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“WEB开发应的设计模式有哪些几种”吧!

什么是设计模式?

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。在本文中,我将介绍其中常见的五种设计模式在javascript中实际使用场景:

单例设计模式

定义

单例模式仅允许类或对象具有单个实例,并且它使用全局变量来存储该实例。

实现方法是判断是否存在该对象的实例,如果已存在则不再创建

使用场景适用于业务场景中只能存在一个的实例,比如弹窗,购物车

实现

单例模式分为懒汉式和饿汉式:

  • 懒汉式

let ShopCar = (function () {   let instance;   function init() {          return {       buy(Good) {         this.goods.push(good);       },       goods: [],     };   }   return {     getInstance: function () {       if (!instance) {         instance = init();       }       return instance;     },   }; })(); let car1 = ShopCar.getInstance(); let car2 = 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 {     getInstance: function () {       return instance;     },   }; })(); let car1 = ShopCar.getInstance(); let car2 = ShopCar.getInstance(); car1.buy('橘子'); car2.buy('苹果'); //[ '橘子', '苹果' ] console.log(car1.goods); console.log(car1 === car2); // true

懒汉式在类加载时,不创建实例,因此类加载速度快,但运行时获取对象的速度慢;

饿汉式在类加载时就完成了初始化,所以类加载较慢,但获取对象的速度快

策略模式

定义

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

实现方法定义一组可变的策略类封装具体算法,定义一组不变的环境类将请求委托给某一个策略类

使用场景适用于业务场景中需要判断多种条件,甚至包含复杂条件嵌套的,可以使用策略模式来提升代码的可维护性和可读性。比如支付,博客权限校验

实现

实例:

// 定义几个策略类 var PaymentMethodStrategy = {   BankAccount: function (money) {     return money > 50 ? money * 0.7 : money;   },   CreditCard: function (money) {     return money * 0.8;   },   Alipay: function (money) {     return money;   }, };  var userPay = function (selectedStrategy, money) {   return PaymentMethodStrategy[selectedStrategy](money); }; console.log('银行卡支付价格为:' + userPay('BankAccount', 100)); //70 console.log('支付宝支付价格为:' + userPay('Alipay', 100)); //100 console.log('信用卡支付价格为:' + userPay('CreditCard', 100)); //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('开运动会'); 

发布订阅模式

定义

发布订阅模式指的是希望接收通知的对象(Subscriber)基于一个主题通过自定义事件订阅主题,发布事件的对象(Publisher)通过发布主题事件的方式通知各个订阅该主题的  Subscriber 对象。

实现

const pubSub = {   list:{},   subscribe(key,fn){  // 订阅     if (!this.list[key]) {       this.list[key] = [];     }     this.list[key].push(fn);   },   publish(){  // 发布     const arg = arguments;     const key = Array.prototype.shift.call(arg);     const fns = this.list[key];      if(!fns || fns.length<=0) return false;      for(var i=0,len=fns.length;i<len;i++){       fns[i].apply(this, arg);     }   },   unSubscribe(key) {  // 取消订阅     delete this.list[key];   } };  // 进行订阅 pubSub.subscribe('name', (name) => {   console.log('your name is ' + name); }); pubSub.subscribe('sex', (sex) => {   console.log('your sex is ' + sex); }); // 进行发布 pubSub.publish('name', 'ttsy1');  // your name is ttsy1 pubSub.publish('sex', 'male');  // your sex is male

上述代码的订阅是基于 name 和 sex 主题来自定义事件,发布是通过 name 和 sex  主题并传入自定义事件的参数,最终触发了特定主题的自定义事件。

可以通过 unSubscribe 方法取消特定主题的订阅。

pubSub.subscribe('name', (name) => {   console.log('your name is ' + name); }); pubSub.subscribe('sex', (sex) => {   console.log('your sex is ' + sex); }); pubSub.unSubscribe('name'); pubSub.publish('name', 'ttsy1');  // 这个主题被取消订阅了 pubSub.publish('sex', 'male');  // your sex is male

观察者模式 VS 发布订阅模式:

观察者模式与发布订阅模式都是定义了一个一对多的依赖关系,当有关状态发生变更时则执行相应的更新。

不同的是,在观察者模式中依赖于 Subject 对象的一系列 Observer  对象在被通知之后只能执行同一个特定的更新方法,而在发布订阅模式中则可以基于不同的主题去执行不同的自定义事件。

相对而言,发布订阅模式比观察者模式要更加灵活多变。

装饰器模式

定义

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

实现方法定义一组可变的策略类封装具体算法,定义一组不变的环境类将请求委托给某一个策略类

使用场景原有方法维持不变,在原有方法上再挂载其他方法来满足现有需求;函数的解耦,将函数拆分成多个可复用的函数,再将拆分出来的函数挂载到某个函数上,实现相同的效果但增强了复用性。比如多孔插座,机车改装

实现

实例:

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(new Letter(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 = { wang: 90, li: 60, 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; //修改成绩

感谢各位的阅读,以上就是“Web开发应的设计模式有哪些几种”的内容了,经过本文的学习后,相信大家对Web开发应的设计模式有哪些几种这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: Web开发应的设计模式有哪些几种

本文链接: https://www.lsjlt.com/news/83463.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Web开发应的设计模式有哪些几种
    这篇文章主要讲解了“Web开发应的设计模式有哪些几种”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Web开发应的设计模式有哪些几种”吧!什么是设计模式设计模...
    99+
    2024-04-02
  • web设计模式有哪些类
    这篇文章主要讲解了“web设计模式有哪些类”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“web设计模式有哪些类”吧!足够简单的类上述设计在输出内容简单的时候没有什么问题,当输入内容比较复杂的...
    99+
    2023-06-19
  • C++ Web应用程序的架构和设计模式有哪些?
    c++++ web 应用程序架构涉及单体和微服务等架构,设计模式包括 mvc、restful api 和依赖注入。一个实用案例展示了使用 drogon、react、boost.di 构建...
    99+
    2024-05-11
    c++
  • 开发中经常使用的设计模式有哪些
    本篇内容介绍了“开发中经常使用的设计模式有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!工厂模式这是一...
    99+
    2024-04-02
  • web响应式设计的基本技巧有哪些
    这篇文章主要介绍“web响应式设计的基本技巧有哪些”,在日常操作中,相信很多人在web响应式设计的基本技巧有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”web响应式设计...
    99+
    2024-04-02
  • Android App开发方式有哪几种
    Android App的开发方式有以下几种: Native开发:使用Java或Kotlin编写代码,并使用Android SDK...
    99+
    2024-02-29
    Android
  • web开发中有哪些响应式文字
    这篇文章主要介绍了web开发中有哪些响应式文字,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。简单来说,响应式是为了让网页在各种显示设备上都有...
    99+
    2024-04-02
  • java设计模式的应用场景有哪些
    Java设计模式有很多应用场景,以下是一些常见的应用场景:1. 工厂模式:当需要根据不同的条件创建不同的对象时,可以使用工厂模式来统...
    99+
    2023-10-08
    java
  • android设计模式的应用场景有哪些
    Android设计模式的应用场景有以下几个:1. MVC(Model-View-Controller)模式: 在Android中,M...
    99+
    2023-08-24
    android
  • web前端中的设计模式面试题有哪些
    这期内容当中小编将会给大家带来有关web前端中的设计模式面试题有哪些,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。 简述设计模式七大原则开放封闭原则:对扩展开放...
    99+
    2024-04-02
  • web前端需要了解的设计模式有哪些
    这篇文章主要讲解了“web前端需要了解的设计模式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“web前端需要了解的设计模式有哪些”吧!什么是设计模式设...
    99+
    2024-04-02
  • jQuery的设计模式有哪些
    这篇文章主要讲解了“jQuery的设计模式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jQuery的设计模式有哪些”吧!一、发布订阅模式var&nb...
    99+
    2024-04-02
  • javascript的设计模式有哪些
    javascript中的设计模式有:1.单例模式,将代码组织成逻辑单元的手段;2.工厂模式,解决实列化对象产生重复的问题;3.适配模式,解决接口不兼容产生的问题;4.策略模式,将算法的使用与实现分离;javascript中的设计模式有以下几...
    99+
    2024-04-02
  • java的设计模式有哪些
    java的设计模式有:1.适配器模式;2.单例模式;3.工厂模式;4.策略模式;java的设计模式有以下几种适配器模式java中适配器模式的作用是将一个类的方法接口转换成客户希望的另外一个接口,从而解决接口之间不兼容的问题。单例模式java...
    99+
    2024-04-02
  • spring的设计模式有哪些
    这篇文章主要讲解了“spring的设计模式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“spring的设计模式有哪些”吧!1. 简单工厂又叫做静态工厂方法(StaticFactory ...
    99+
    2023-06-03
  • java设计模式有哪些
    设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 总体来说设计模式分为三大类23种:创建型模式,共五种:工厂方...
    99+
    2015-05-18
    java 设计模式
  • TypeScript设计模式有哪些
    这篇文章主要讲解了“TypeScript设计模式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“TypeScript设计模式有哪些”吧!设计模式是可以帮...
    99+
    2024-04-02
  • laravel设计模式有哪些
    Laravel设计模式有以下几种:1. MVC模式(Model-View-Controller):Laravel框架基于MVC模式进...
    99+
    2023-09-29
    laravel
  • web开发中原型对象的常用开发模式有哪些
    这篇文章主要介绍了web开发中原型对象的常用开发模式有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、构造函数和原型组合使用模式:原型...
    99+
    2024-04-02
  • 响应式Web设计的必备jQuery插件有哪些
    响应式Web设计的必备jQuery插件有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。响应式设计(responsive d...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作