
前端——设计模式
文章平均质量分 79
前端设计模式相关
chenyu-max
一个热爱前端的小菜菜
展开
-
设计模式总结项目练习——贪吃蛇
前言通过设计模式写出的 demo可拓展性强GitHub链接utils.js// 符合单一职责原则const tool = { inherit: function (target, origin) { const Fun = function () { }; Fun.prototype = origin.prototype; target.prototype = new Fun(); // 让子类的constr原创 2021-10-28 18:49:25 · 318 阅读 · 0 评论 -
前端须知——行为型模式——观察者模式
定义: 观察者模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。举个栗子: 以学生为例,上课和下课的铃声就是被观察者,学生就是观察者,当下课铃声响了,学生就知道下课了,就出去跑着玩了,然后过了10分钟,上课铃声又响了,然后学生听到上课铃,又开始从外面往教室跑,去上课。1、DOM事件 其实我们在平时也用到过观察者模式,只是我们没有注意到而已,举一个简单的例子:我们曾原创 2021-10-28 18:47:53 · 489 阅读 · 0 评论 -
前端须知——行为型模式——策略模式
策略模式是JavaScript设计模式中行为型的设计模式白话解释实际上所谓的策略模式就是指根据不同的策略来执行不同的方法,是不是很类似与if-else分支判断;但是策略模式是用来解决多重条件判断语句的;详解例子 年终将至,某公司决定提前发年终奖,但是年终奖的计算是有一定的规则的,年终奖的多少跟绩效考核密切相关;所以某公司的年终奖方案是这样的:绩效考核为S的员工,年终奖是个人月工资的4倍;绩效考核为A的员工,年终奖是个人月工资的3倍;绩效考核为B的员工,年终奖是个人月工资的.原创 2021-10-28 18:47:08 · 289 阅读 · 0 评论 -
前端须知——结构型模式——装饰者模式
定义在不改变元对象的基础上,通过对其进行包装拓展(添加属性方法)装饰者模式可以动态的给某个对象添加一些额外的职责,而不会影响从这个类中派生出的其他对象 装饰者(decorator)模式能够在不改变对象自身的基础上,在程序运行期间给对像动态的添加职责。与继承相比,装饰者是一种更轻便灵活的做法。可以当脚本运行时,在子类中增加行为会影响原有类所有的实例,而装饰者却不然。取而代之的是它能给不同对象各自添加新行为模拟传统面向对象语言的装饰者模式 首先要提出来的是,作为一门解释执行的语言,给Jav原创 2021-10-28 12:19:31 · 286 阅读 · 0 评论 -
前端须知——结构型模式——代理模式
代理模式代理模式属于设计模式中结构型的设计模式;定义为一个对象提供一种代理以控制对这个对象的访问白话解释: 很多明星都是有经纪人的,如果要联系明显进行商演或者开演唱会之类的商业活动通过是需要先跟经纪人取得联系的,跟经纪人谈好了合作事宜之后经纪人再转达给某明星,然后某明星才会去参加活动;同样租房也是一个同样的道理,我们不管是租房还是买房,第一反应肯定是找链家这类的平台,因为我们只需要跟链家进行沟通,而链家去跟房东沟通,省去了我们直接和房东沟通的步骤;因为链家就是一个代理模式,它代理了这个房东原创 2021-10-28 12:08:26 · 173 阅读 · 0 评论 -
前端须知——创造型模式——单例模式和工厂模式
单例模式定义保证一个类仅有一个实例,并提供一个访问它的全局访问点。数学与逻辑学中,singleton定义为“有且仅有一个元素的集合”。为什么要用单例模式 想象一下某些web应用,当点击登录按钮时,会弹出一个登录框,无论你点击多少次这个登录按钮,登录框都只会出现一个,不会出现多个登录框。同时不会频繁的进行删除和添加,而是同一个登录框进行隐藏和显示,因为删除和添加十分耗费性能,所以单例可以达到最大化的效能利用。 登录框这个例子就是单例模式最典型的应用,符合业务的需求,又能够提高性能详解 在原创 2021-10-28 11:55:15 · 438 阅读 · 0 评论 -
前端必须知道——设计模式六大原则
六大原则1. 单一职责原则 single Responsibility principle一个方法只做一件事情,请求数据的函数你就不要渲染数据了,吃饭上厕所别用同一个地方 假设我们涉及的一个函数,不按照单一职责原则来写,代码的复杂度会提高,因为一个函数内部含有多个功能,而实际上,每个功能都可以独自拆分程一个独立的函数。 也就是说,每个函数来写一个功能。诸多函数汇总起来,就要形成耦合,也就是以牺牲耦合度的代价来降低复杂度。2.开闭原则 OCP 开闭原则 OCP 一个软件实体如类、模块和函原创 2021-10-28 11:28:53 · 1712 阅读 · 0 评论 -
前端必须知道——什么是设计模式
什么是设计模式设计模式(Design Pattern)是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。 设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。用人话来讲,就是想出套路做事情模式是什么 模式是指从生产经验和生活经验中经过抽象和原创 2021-10-28 11:23:18 · 254 阅读 · 0 评论