![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js之设计模式
Judy1623
前端是个非常具有挑战的工作,只要自己心有所爱,就会成为那个最好的自己!
展开
-
javascript 设计模式(2) —— 策略模式
实现功能:使用Javascript 中的策略模式来实现 根据每一位员工的年底业绩考核,来核算年终奖的需求。 第一种(不推荐) 1.我们先用我们熟悉的js代码来实现这个功能 var calculateBonus = function(salary,perLevel){ if( perLevel === 'S'){ return salary * 4 ; } ...翻译 2019-07-10 11:01:48 · 130 阅读 · 0 评论 -
Javascript 设计模式(3) —— 代理模式
第一、定义: 代理模式是为一个对象提供代用品或者占位符,以便控制对它的访问。 比如说,某男生小明想向他的女神 A 表白,刚好小明认识的一个女生B 和 女神A 是好朋友,那么小明就想让 女生B 帮忙送花给 女神A 。 这个就是一个代理模式。 缓存代理模式 var mult = function(){ var a = 1; for (var i = 0; i < argum...原创 2019-07-10 17:31:40 · 101 阅读 · 0 评论 -
Javascript 设计模式(4) —— 发布订阅模式
发布—订阅模式可以用一个全局的 Event 对象来实现,订阅者不需要了解消 息来自哪个发布者,发布者也不知道消息会推送给哪些订阅者,Event 作为一个类似“中介者” 的角色,把订阅者和发布者联系起来。 发布订阅模式 var Event = (function(){ var clientList = {}, listen, trigger, remove; list...翻译 2019-07-15 13:39:10 · 106 阅读 · 0 评论 -
Javascript 设计模式(5-1) —— 命令模式
命令模式:命令模式的由来,其实是回调(callback)函数的一个面向对象的替代品。 功能:点击按钮执行刷新功能 流程:设置安装命令的接口 - 点击按钮的执行的具体行为 (比如:刷新-增加子菜单) - 把命令封装在命令类中 - 执行命令 ...翻译 2019-07-16 09:07:34 · 109 阅读 · 0 评论 -
Javascript 设计模式(5-2) —— 宏命令
宏命令是一组命令的集合,通过执行宏命令的方式,可以一次执行一批命令。 下面我们看看如何逐步创建一个宏命令。首先,我们依然要创建好各种 Command: 第一步 :定义好各种命令 var closeDoorCommand = { execute: function(){ console.log( '关门' ); } }; var openQQComm...翻译 2019-07-16 14:22:44 · 777 阅读 · 0 评论 -
javascript 设计模式(1) —— 单例模式
单例模式是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 例如:用户点击按钮的时候才显示弹框 让我们一步步优化,实现更好的单例模式 第一种:点击一次创建一个新对象 缺点 : 失去了单例的效果,当我们每次点击的时候都会创建一个新的div <html> <body> <button id="loginBtn">登录</button>...翻译 2019-07-17 09:12:46 · 110 阅读 · 0 评论 -
Javascript 设计模式(6) ——组合模式
组合模式就是用小的子对象来构建更大的对象,这些小的子对象也许是由更小的‘‘孙对象’构成的。 marcoCommand 被称为组合对象,closeDoorCommand、openPcCommand、openQQCommand 都是 叶对象。 例如 :目前的万能遥控器,包含了关门、开电脑、登录 QQ 这 3 个命令。现在我们需要一个“超级 万能遥控器”,可以控制家里所有的电器,这个遥控器拥有以...翻译 2019-07-19 09:08:39 · 147 阅读 · 0 评论 -
javascript 设计模式(9) —— 装饰者模式
装饰者函数 :可以把行为依照职责分成粒度更细的函数,随后通过装饰把它们合并到一起,这有助于我 们编写一个松耦合和高复用性的系统。 应用1 :数据统计上报 比如页面中有一个登录 button,点击这个 button 会弹出登录浮层,与此同时要进行数据上报, 来统计有多少用户点击了这个登录 button: Function.prototype.after = function( afterfn ){...翻译 2019-07-25 10:41:43 · 95 阅读 · 0 评论 -
javascript 设计模式(7) —— 模板方法模式
模板方法模式 :在一个方法中定义一个算法的骨架,而将一些步骤的实现延迟到子类中。模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中某些步骤的具体实现。翻译 2019-07-23 09:16:29 · 116 阅读 · 0 评论