JavaScript设计模式
文章平均质量分 59
cRack_cLick
学无止境,一些小小的心得,绝不写收费文章,如果对你有帮助,不如点个小小的赞支持一下
展开
-
JS设计模式-观察者模式
JS设计模式-观察者模式 我个人觉得观察者模式(订阅-发布模式)是最常会见到的一种设计模式了,即是没了解过设计模式,你应该也见过: window.addEventListener('click', function() { // TODO }) 又或者是在VUE开发中父子组件使用$emit和$on进行事件通信,以及不相关组件的eventbus通信。这都是比较常见的观察者模式。 让我们来试想这样一种情况: function fnA() { console.log('function A'); }原创 2021-09-15 14:18:04 · 247 阅读 · 0 评论 -
JS设计模式-代理模式
JS设计模式-代理模式 在前端的一些表格里,往往会有一些复选的批量操作,比如给用户批量赋予权限,由于涉及表格分页以及反复翻页的勾选重现,很多时候,都是点击复选框后就像后台发起请求,直接进行数据的持久化。但是这时候就有个问题了,只要我的手速足够快,这种向后台发起请求的频率是非常高的,而我作为LOL的黄金分段玩家,也有自信一秒钟点五个复选框,为此,我们需要一个代理来拦截一下这种高频操作。 首先我们模拟向后台发请求的方法,很简单: function ajaxRes(id) { console.log(`请求参原创 2021-09-09 16:43:10 · 236 阅读 · 0 评论 -
JS设计模式-策略模式
JS设计模式-策略模式 设想这样一个功能,公司的年终考核等级会影响员工的年终奖收入,目前为S等级3倍工资,A等级2倍工资,B等级就只能是1个月的工资了。 function bonus(level, salary) { if (level === "S") { return salary * 3 } if (level === "A") { return salary * 2 } if (level === "B") {原创 2021-09-07 14:37:18 · 105 阅读 · 0 评论 -
JS设计模式-单例模式
JS设计模式-单例模式 在java中,单例模式被定义为:保证一个类仅有一个实例,并提供一个访问它的全局访问点。这种设计模式在JavaScript中也同样适用,我们可以来保证总是有唯一的对象、方法或者是DOM元素。先来看个最简单的例子: dom1 = document.createElement("div"); dom2 = document.createElement("div"); console.log(dom1 === dom2); // false 其实很显然,dom1和dom2并不是同一个元素,原创 2021-09-06 16:44:52 · 153 阅读 · 0 评论