当前位置: 首页 > Web前端 > vue.js

浅谈JavaScript设计模式(一)

时间:2023-03-31 19:35:39 vue.js

介绍设计模式分类常见设计模式单例模式观察者模式工厂模式策略模式代理模式介绍JavaScript设计模式,一种模式是一种可重用的解决方案。当代码建立在经过验证的模式之上时,我们可以花更少的时间关注我们的代码结构,而花更多的时间关注我们解决方案的整体质量。设计模式分为三类《创意模式》5单例模式工厂方法模式抽象工厂模式建造者模式原型模式《结构模式》7代理模式适配器模式装饰器模式外观模式桥接模式组合模式享元模式《行为模式》11观察者模式策略模式模板方法模式迭代子模式责任链模式命令模式备忘录模式状态模式访问者模式中介模式解释器模式常用设计模式一个实例对象(调用一个类,随时返回同一个实例)1-2实现方法用一个变量来标记是否为某个类创建了对象。,那么下次获取该类的实例时,直接返回之前创建的对象,否则创建对象1-3codingvarUniverse;(function(){varinstance;Universe=functionUniverse(){if(instance){returninstance;}instance=this;//其他内容this.start_time=0;this.bang="Big";};}());//测试代码vara=newUniverse();varb=newUniverse();警报(a===b);//true1-4场景用于:一个全局使用的类被频繁创建和销毁,需要在WEB中制作一个唯一的序列号计数器,而不是每次刷新时都添加到数据库中,创建的对象用单例缓存首先需要消耗太多的资源,比如I/O和数据库的连接等。2.发布订阅(观察者模式)2-1原理然后使用观察者模式。比如当一个对象被修改时,会自动通知它的依赖对象2-2实现方法订阅,就是把几个函数压入数组中使用;publish,就是把缓存在数组中的那一堆函数排队执行2-3codingvarevent={eventList:{},listen:function(key,fn){if(!this.eventList[key]){this.事件列表[键]=[];}this.eventList[key].push(fn);},remove:function(key,fn){v??arfns=this.eventList[key];如果(!fns){返回假;}if(!fn){//如果没有回调,则表示取消该key下的所有方法fns&&(fns.length=0);//这是清除数组的快速方法!}else{for(vari=0;i