设计模式
文章平均质量分 57
道甚夷
曰:“欲自修而年已蹉跎,恐将无及。”
云曰:“古人贵朝闻夕改,君前途尚可,且患志之不立,何忧名之不彰!”
处遂励志好学
展开
-
设计模式-装饰者模式
装饰者模式装饰者模式一句话概括:天冷了穿件衣,多穿几件。装饰者模式用于一开始不能确定对象的全部功能时装饰者模式经常会形成一条长长的装饰链。作用就是为对象动态加入行为框架中的思想作为框架作者,我们希望框架里的函数提供的是一些稳定而方便移植的功能。那些个性化的功能可以在框架之外动态装饰上去,这可以避免为了让框架拥有更多的功能,而去使用一些 if、else 语句预测用户的实际需要。与代理的区别:代理是静态的,只有一层代理本体的引用,关系在一开始就可以被确定。目的是,当直原创 2021-10-29 14:51:40 · 75 阅读 · 0 评论 -
设计模式-状态模式
这个是例子超级长的模式,而且里面的逻辑兜来兜去的跳,需要多花点时间理解。状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变。定义允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类实现将状态封装成独立的类,并将请求委托给当前的状态对象,当对象的内部状态改变时,会带来不同的行为变化。使用委托思想状态模式的关键是把事物的每种状态都封装成单独的类,跟此种状态有关的行为都被封装在这个类的内部优点状态模式定义了状态与行为之间的关系,并将它们封原创 2021-11-11 18:38:16 · 421 阅读 · 0 评论 -
js-设计模式-柯里化-严格模式写法
柯里化函数主要用来:当有参数时,存储每次设置的值;当无参数时,调用操作函数来计算总金额;闭包存储一个临时对象,最后调用函数处理该临时对象。柯里化-应用-金额总数计算。原创 2022-09-01 17:20:50 · 141 阅读 · 0 评论 -
设计模式-享元模式(1)
享元模式的目标是尽量减少共享对象的数量内部状态存储于对象内部。内部状态可以被一些对象共享。内部状态独立于具体的场景,通常不会改变。外部状态取决于具体的场景,并根据场景而变化,外部状态不能被共享把所有内部状态相同的对象都指定为同一个共享的对象。而外部状态 可以从对象身上剥离出来,并储存在外部。通常来讲,内部状态有多少种组合,系统中便最多存在多少个对象剥离了外部状态的对象成为共享对象,外部状态在必要时被传入共享对象来组装成一个完整 的对象。虽然组装外部状态成为一个完整对象的过程需要花费一定的时原创 2021-08-30 15:58:48 · 83 阅读 · 0 评论 -
js-设计模式-状态模式(1)-电灯开关
书中针对新增类需要新增方法的遗漏的补充做法是新增一个父类,并要求子类必须重写父类的方法,否则抛错提示。分离不同的状态数据独立处理,主体通过切换状态类来控制状态的切换,将状态的切换权移交给状态本身。新增一个状态改变三个地方,状态类+按钮方法,且增加后倒数第二个需要调整状态顺序,实例。让主体本身也有了状态和行为,但把自己的状态对应的行为委托给了外部的状态对象去处理。最后的写法新增了yield来改进以往的状态模式,如有新的模式,请与我交流。新增一个状态只需改变三个地方,状态类,实例,yield。...原创 2022-08-29 14:45:53 · 310 阅读 · 0 评论 -
设计模式-代理模式
代理模式当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身 对象来控制对这个对象的访问,客户实际上访问的是替身对象。替身对象对请求做出一些处理之 后,再把请求转交给本体对象保护代理:代理 B 可以帮助 A 过滤掉一些请求,类似明星经纪人虚拟代理:虚拟代理把一些开销很大的对象,延迟到 真正需要它的时候才去创建。引入// // 追女孩事件 // // 不使用代理 // let Flower = function(){} // let xm = { // se原创 2021-09-06 09:05:02 · 138 阅读 · 0 评论 -
设计模式-命名空间的实现
let MyApp = {} MyApp.namespace = function(name) { let parts = name.split('.') console.log(parts) let current = MyApp for(let i in parts) { if (!current[parts[i]]) { // 当前有没有这个属性 current[parts[原创 2021-11-03 11:02:57 · 104 阅读 · 0 评论 -
js基础知识-高阶函数
高阶函数高阶函数是指至少满足下列条件之一的函数。函数可以作为参数被传递函数可以作为返回值输出应用:Array.sort解决var i的作用域问题单例模式各种钩子函数,修饰器。节流,拉缩窗口大小,加购商品。页面滚动事件。分时加载列表数据。函数可以作为参数被传递回调函数生成节点,样式设置数组排序Array.prototype.sortlet arr = [1, 4, 3]arr.sort(function(a, b) { // 从小到大 return a -原创 2021-09-02 11:24:39 · 942 阅读 · 0 评论 -
js-设计模式-责任链-应用-管理状态(路由的next)
将多个条件的代码块分割到各个函数中,方便阅读及添加条件扩展。设置next控制是否中断条件判断。原创 2022-08-25 10:42:07 · 93 阅读 · 0 评论 -
js-Object.create 行为委托设计模式
Object.create 委托设计模式 继承原创 2022-07-28 11:34:39 · 110 阅读 · 0 评论 -
js-设计模式-策略模式
js策略模式原创 2022-08-22 12:02:27 · 238 阅读 · 0 评论 -
设计模式-组合模式
设计模式-组合模式组合模式可以让我们使用树形方式创建对象的结构。我们可以把相同的操作应用在组合对象和单个对象上。在大多数情况下,我们都可以忽略掉组合对象和单个对象之间的差别,从而用一致的方式来处理它们。常见场景:遍历树问题,树和子叶的关系即是一种经典的组合模式+责任链模式的应用。适用于以下这两种情况:表示对象的部分->整体层次结构。适合我们在开发期间不确定这棵树到底存在多少层次的时候。在树的构造最终完成之后,只需要通过请求树的最顶层对象,便能对整棵树做统一的操作。在组合模式中增加和原创 2021-11-03 16:27:15 · 78 阅读 · 0 评论 -
设计模式-责任链模式
职责链模式场景:公交打卡,一个个传递给前面的人,不需要知道经过多少个人,最终都会帮你打卡,然后再传递回来。考试的时候传小抄,一个个往后传,如果后面的人不会,他会把小炒传继续往后传。作用域链、原型链,DOM 节点中的事件冒泡。请求队列。职责链模式的最大优点:请求发送者只需要知道链中的第 一个节点,从而弱化了发送者和一组接收者之间的强联系。场景应用:假设我们负责一个售卖手机的电商网站,经过分别交纳 500 元定金和 200 元定金的两轮预定后(订单已在此时生成),现在已经到了正式购买的阶段原创 2021-10-26 14:43:54 · 168 阅读 · 4 评论 -
设计模式-命令模式
命令模式中的命令(command)指的是一个执行某些 特定事情的指令。应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收 者是谁,也不知道被请求的操作是什么。用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系实是回调(callback)函数的一个面向对象的替代品在面向对象设计中,命令模式的接收者被当成 command 对象的属性保存起来,同时约定执行 命令的操作调用 command.execute 方法。在使用闭包的命令模式实现中,接收者被封闭在闭包产原创 2021-09-06 09:03:44 · 88 阅读 · 0 评论 -
设计模式-中介者模式
中介者模式例子:机场指挥塔博彩公司泡泡堂,对人对战,好友加入,敌人加入,好友死亡,全部阵亡等消息通知。商品选择页对属性节点和显示节点的管理。概念解除对象与对象之间的紧耦合关系。增加一个中介者对象后,所有的相关对象都通过中介者对象来通信,而不是互相引用,所以当一个对象发生改变时,只需要通知中介者对象即可。中介者使各对象之间耦合松散,而且可以独立地改变它们之间的交互。使网状的多对多关系变成了相对简单的一对多关系中介者模式是迎合迪米特法则的一种实现。迪米特法则也叫最少知识原则,是指一个对原创 2021-11-09 10:31:23 · 73 阅读 · 0 评论 -
设计模式-享元模式(2)-对象池
第一次创建后,进行回收,等待下次创建的时候可以再次使用,减少了创建时间,占用了内存。并没有主动分离内部状态和外部状态的过程上次创建的对象进行回收,共享给下次创建的时候使用。例子:地图搜索地址气泡提示问题搜索地图的时候,显示附近地点,出现了2个提示泡,然后程序回收了2个提示泡,第二次搜索的时候,出现4个提示泡,此时程序从上次回收中取出两个,并再创建了2个提示泡对象,返回显示到地图上。应用:提示工具tip,pop,modal等弹窗。 // 对象池 let toolTipFactory原创 2021-08-31 09:58:30 · 80 阅读 · 0 评论 -
设计模式-迭代器模式
外部迭代器的实现,里面使用了指针移动的方式,可以主动调用next来移动数组的指针,一个个吐出。除了普通的迭代,这里还使用迭代器模式给上传组件做了兼容,重构后,维护和扩展方便了很多。内部迭代器each 函数的内部已经定义好了迭代规则,它完全接手整个迭代过程,外部只需要一次初始调用实现自己的迭代器 let each = function (ary, callback) { for (let i = 0; i < ary.length; i++) { callba原创 2021-11-03 15:19:34 · 57 阅读 · 0 评论 -
设计模式-模板方法模式
模板方法通过封装变化提高系统扩展性的设计模式。子类的方法种类和执行顺序都是不变的,所以我们把这部分逻辑抽象到父类的模板方法里面。而子类的方法具体怎么实现则是可变的,于是我们把这部分变化的逻辑封装到子类中。通过增加新的子类,我们便能给系统增加新的功能,并不需要改动抽象父类以及其他子类。子类实现中的相同部分被上移到父类中,而将不同的部分留待子类来实现严重依赖抽象类js中,高阶函数是更好的选择。应用场景:构建一系列的 UI 组件抽象类和具体类抽象类的第一个作用是隐藏对象的具体类型抽象类和接口原创 2021-11-08 14:42:17 · 421 阅读 · 0 评论 -
设计模式-发布订阅(1)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-08-25 17:22:13 · 84 阅读 · 0 评论 -
设计模式-发布订阅-模块间通信
实现点击更新数据的效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title.原创 2021-08-27 10:32:38 · 99 阅读 · 0 评论 -
js基础知识-对象-多态-封装-原型-this指向
前言原型继承在我几年前已经有过比较详细的研究和案例,所以这里不再贴出代码案例,只做简要的概念性记录,方便对整个知识体系有个清晰的认识。这里面的概念讲解,在熟悉各种设计模式后再来看,会有更加明朗的认识。面向对象JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承。JavaScript 也没有在语言层面提供对抽象类和接口的支持。鸭子类型指导我们只关注对象的行为,而不关注对象本身,也就是关注 HAS-A, 而不是 IS-A面向接口编程,而不是面向实原创 2021-09-01 10:17:46 · 105 阅读 · 0 评论 -
js-设计模式-再看非柯里化-泛化应用
非柯里化-this泛化应用-即借用其他对象的方法来让自己也能使用该方法。对象借用Array的push方法来实现对象的push。原创 2022-09-01 17:24:35 · 182 阅读 · 0 评论 -
设计模式-发布订阅-通用实现
前话,还是喜欢这种先订阅后发布的写法,所以我这里选择用JavaScript设计模式与开发实践(pdf)里面的例子来做这个课题。具体对象属性形式的发布订阅,类似我们熟悉的onclick事件 let salesOffies = {} // 事件 salesOffies.clientList = [] // 缓存列表,存放订阅者回调函数 salesOffies.listen = function(key, fn) { if( !this.clientList[key]) {原创 2021-08-27 09:42:52 · 92 阅读 · 0 评论 -
js设计模式总结
为什么要学习设计模式,如果不是为了写框架,那给自己另一个理由,那便是它至少可以帮助你理解每天都在里面写东西的那个框架。基础知识 面向对象 v 多态,封装,原型模式 this,call,apply v 改变this指向,借用对象方法,判断类型,多继承 闭包 缓存,减少全局变量,延续变量存在。 高阶函数 v 函数入参返回,惰性载入(重写函数),纯函数,分时,节流,柯里化存储,解绑定包装器,AOP切面编程,动态插入 常用举例:sort排序,类型判断。设计模式 单例模式 v 通过返回缓存的对原创 2021-11-03 18:22:48 · 73 阅读 · 0 评论 -
编写高质量可维护的代码之优化逻辑判断
编写高质量可维护的代码之优化逻辑判断if else、switch case 是日常开发中最常见的条件判断语句,这种看似简单的语句,当遇到复杂的业务场景时,如果处理不善,就会出现大量的逻辑嵌套,可读性差并且难以扩展。编写高质量可维护的代码,我们先从最小处入手,一起来看看在前端开发过程中,可以从哪些方面来优化逻辑判断?下面我们会分别从 JavaScript 语法和 React JSX 语法两个方面来分享一些优化的技巧。JavaScript 语法篇嵌套层级优化function supply(fruit转载 2021-09-15 14:14:23 · 141 阅读 · 0 评论 -
js-设计模式-组合模式-es6写法重写文件扫描
【代码】js-设计模式-组合模式-es6写法重写文件扫描。原创 2022-08-30 11:20:47 · 182 阅读 · 0 评论 -
设计模式-发布订阅(2)
新增指定订阅者<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.原创 2021-08-26 10:51:13 · 60 阅读 · 0 评论 -
js-设计模式-命令模式-路由跳转
路由跳转是很典型的命令模式,设计者不知道开发者需要什么路径(请求的接收者),路径对应的页面是什么(被请求的操作),所以设计者提供路由命令给开发者去设置,从而分离路径和跳转页面两个对象。使用http-server开启服务跑history模式。npm 安装 http-server。...原创 2022-09-01 16:02:47 · 214 阅读 · 0 评论 -
设计模式-发布订阅-全局通信
vue的Event总线的实现原理模块化了,将原来的安装函数去掉了,然后对象封装成了一个闭包函数并立即调用,返回函数里面的方法。类似jq的写法。这里的思想是,将Event作为全局调用,存到内存去了。Event此时可以理解为一个中介者,联系着订阅者和发布者。而上一章的写法则是需要对某个具体的对象进行安装。文章里面的比喻很形象,订阅者是买房的,发布者是卖房子的,买房的之前是对一家房地产公司订阅消息,现在扩展到对多家了,就需要一个中介来整合房地产公司,这样房地产公司发布消息,中介收集到后,再给到订阅者。Ev.原创 2021-08-27 09:46:27 · 76 阅读 · 0 评论 -
设计模式-单例模式
// 简单单例写法 // 1. /* let Singleton = function(name) { this.name = name this.instance = null } Singleton.prototype.getName = function() { return this.name } Singleton.getInstance = function(name) { if (!原创 2021-11-03 11:33:49 · 133 阅读 · 0 评论 -
js基础知识-call、apply、bind使用和区别
call、apply、bind使用和区别1、call()面试当中几乎每次都会问到一个js中关于call、apply、bind的问题,比如…怎么利用call、apply来求一个数组中最大或者最小值bind函数的实现如何利用call、apply来做继承apply、call、bind的区别和主要应用场景改变函数执行时的上下文,即改变函数运行时的this指向。 let obj = {name: 'tony'}; function Child(name){ this.name原创 2021-09-01 10:37:00 · 163 阅读 · 0 评论 -
js-设计模式-状态模式(2)-文件上传
从混杂的状态中,我们需要将状态提取为第一要素,最后形成在不同的状态下管理对应的行为和事件的模式,提高代码的可读性、可维护性。这个例子不仅是状态,还混合了行为。原创 2022-08-29 15:09:40 · 198 阅读 · 0 评论 -
设计模式-适配器模式
适配器适配器:别名包装器(wrapper)适配器模式:由于需求变更,使用一个新的函数来改变传入的新的格式的数据源结构,从而使之和之前的数据源结构一致。适配器模式是一种 “亡羊补牢”的模式,没有人会在程序的设计之初就使用它。因为没有人可以完全预料到未来的 事情,也许现在好好工作的接口,未来的某天却不再适用于新系统,那么我们可以用适配器模式 把旧接口包装成一个新的接口,使它继续保持生命力。场景:当我们试图调用模块或者对象的某个接口时,却发现这个接口的格式并不符合目前的需求。 这时候有两种解决办法,第一原创 2021-09-06 09:06:17 · 72 阅读 · 0 评论 -
js基础知识-闭包
闭包面试经常问到有用过闭包吗?什么情况下使用?项目中哪些地方使用到闭包?有可能造成什么问题?怎么解决?我在另一篇文章也总结过闭包的一些应用。变量的作用域变量的作用域,就是指变量的有效范围。我们最常谈到的是在函数中声明的变量作用域当在函数中搜索 一个变量的时候,如果该函数内并没有声明这个变量,那么此次搜索的过程会随着代码执行环境 创建的作用域链往外层逐层搜索,一直搜索到全局对象为止。变量的搜索是从内到外。变量的生命周期对于全局变量来说,全局变量的生存周期当然是永久的,除非我们主动销毁原创 2021-09-02 11:19:43 · 85 阅读 · 0 评论 -
设计模式-设计原则和编程技巧
单一原则定义单一职责原则(SRP)的职责被定义为“引起变化的原因”。简单讲就是你会去改动代码的原因。一个改动的原因就是一个职责,两个就是两个职责,以此类推。过多的职责会导致方法的不稳定,变动就越大,并且会伴随改动带来的风险。低内聚和脆弱的设计的结果是低耦合性。所以,SRP原则为:一个方法一个职责。适用什么时候需要做职责分离?当两个或者多个职责是同时变化的时候,不需要分离他们当两个或者多个职责没有变化的征兆的时候,不需要分离他们考虑方便性和稳定性。优缺点优点:是降低了单个类或者对象原创 2021-11-12 15:12:57 · 243 阅读 · 2 评论 -
php设计模式
代码笔记仓库参考:原创 2024-03-21 11:54:58 · 344 阅读 · 0 评论