1.单例模式
单例模式的定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点。
实现的方法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
适用场景:一个单一对象。比如:弹窗,无论点击多少次,弹窗只应该被创建一次。
class User{ constructor(name){ this.name = name } getName(){ return this.name } } const Proxy = (function(){ let user = null return function(name){ if(!user){ user = new User(name) } return user } })() const u1 = Proxy('lyh') const u2 = Proxy('fjh') console.log(u1 == u2)
以上程序运算结果为true。
2.代理模式
代理模式的定义:为一个对象提供一个代用品或占位符,以便控制对它的访问。
常用的虚拟代理形式:某一个花销很大的操作,可以通过虚拟代理的方式延迟到这种需要它的时候才去创建(例:使用虚拟代理实现图片懒加载)
图片懒加载的方式:先通过一张loading图占位,然后通过异步的方式加载图片,等图片加载好了再把完成的图片加载到img标签里面。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> <script type="text/javascript"> const loadingPic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fwatermark%2F17a5be8be1aa3f75acbab507617aa3e851030642.gif&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669341629&t=3e651a0c04ff783cc83592e8345c32f1' const killuaPic = 'https://img0.baidu.com/it/u=3308819396,1624138451&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=393' const imgFunc = (function(){ const img = document.createElement('img') document.body.appendChild(img) return { setSrc: function(url){ img.src = url } } })() const imgProxy = (function(){ const img = new Image img.onload = function(){ setTimeout(()=>imgFunc.setSrc(img.src),2000) } return { setSrc: function(url){ imgFunc.setSrc(loadingPic) img.src = url } } })() // imgFunc.setSrc(killuaPic) imgProxy.setSrc(killuaPic) </script> </html>
使用代理模式实现图片懒加载的优点还有符合单一职责原则。减少一个类或方法的粒度和耦合度。
3.中介者模式
中介者模式,顾名思义,确实是需要有一位中介,也就是中间人,来将其他对象联系在一起,从而达到了解除其他对象与对象之间紧密耦合的关系。
举个例子,马上要过年了,年后我们需要走访各个亲戚家,什么七大姑八大姨的,数不胜数,关系乱七八糟,平日里经常往来的没几个,有些甚至连对方叫什么都不知道就拜年要红包。
这时,我们在想,要是有个中介来帮你走访亲戚,拜年要红包就好了,这样你就不在需要记住那么多的亲戚了,只需要通知中介一个人便可。这就是中介者模式的思想。
让我们来用代码实现一下。
分析:我们通过封装了一个类,将所有亲戚保存下来,这样就不用我们自己来记忆,只要通过暴露出来的方法,与中介沟通便可。
通过 add 函数来添加我们与某个亲戚之间的关系,如果某一亲戚不幸挂了我们可以通过 remove 将其从亲戚列表中删除,通过 payNewYear 来向亲戚 拜年要红包。
如果还有什么需求我们可以自己添加。
class Mediator{ constructor(){ this.relatives = {} } add(name,relation){ this.relatives[name] = relation } remove(name){ delete this.relatives[name] } payNewYear(name){ this.relatives[name] && console.log(`${this.relatives[name]},新年快乐,红包拿来`) } } const mediator = new Mediator mediator.add('小锋','叔叔') mediator.add('大勇','伯伯') mediator.payNewYear('小锋') mediator.payNewYear('大勇') mediator.remove('大勇') mediator.payNewYear('大勇')
4.装饰者(装饰器)模式
定义为在不改变对象自身的基础上,在程序运行期间给对象动态地添加方法。
适用的场景:原有方法维持不变,在原有方法上再挂载其他方法来满足现有需求;
函数的解耦,将函数拆分成多个可复用的函数,再将拆分出来的函数挂载到某个函数上,实现相同的效果但增强了复用性。
例:用AOP装饰函数实现装饰者模式
Function.prototype.before = function(beforeFn) { const self = this return function(){ beforeFn.apply(this,arguments) return self.apply(this,arguments) } }; Function.prototype.after = function(afterFn) { const self = this return function(){ const ret = self.apply(this,arguments) afterFn.apply(this,arguments) return ret } }; function f(){ console.log(2) } function f1(){ console.log(1) } function f3(){ console.log(3) } f = f.before(f1).after(f3) f()
5.工厂模式
工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。
简单说:假如我们想在网页面里插入一些元素,而这些元素类型不固定,可能是图片、链接、文本。
根据工厂模式的定义,在工厂模式下,工厂函数只需接受我们要创建的元素的类型,其他的工厂函数帮我们处理。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> <script type="text/javascript"> class Text{ constructor(text){ this.text = text } insert(where){ const node = document.createTextNode(this.text) where.appendChild(node) } } class Link{ constructor(url){ this.url = url } insert(where){ const node = document.createElement('a') node.innerText = this.url node.href = this.url node.target = '_blank' where.appendChild(node) } } class Img{ constructor(url){ this.url = url } insert(where){ const node = document.createElement('img') node.src = this.url where.appendChild(node) } } // const text = new Text('lyh') // text.insert(document.body) // const link = new Link('http://www.baidu.com') // link.insert(document.body) // const img = new Img('https://img0.baidu.com/it/u=3308819396,1624138451&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=393') // img.insert(document.body) class DomFactory{ constructor(type){ // this.type = type return new (this[type]()) } text(){ return Text } link(){ return Link } img(){ return Img } } const linkFactory = new DomFactory('link') linkFactory.url = ('http://www.baidu.com') linkFactory.insert(document.body) const imgFactory = new DomFactory('img') imgFactory.url = ('https://img0.baidu.com/it/u=3308819396,1624138451&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=393') imgFactory.insert(document.body) </script> </html>
6.外观模式
定义:为子系统中的一组接口提供一个一致的界面,定义一个高层接口,这个接口使子系统更加容易使用
核心:可以通过请求外观接口来达到访问子系统,也可以选择越过外观来直接访问子系统
实现:外观模式在JS中,可以认为是一组函数的集合
function start(){ console.log('start') } function doing(){ console.log('doing') } function end(){ console.log('end') } //外观函数 function doSth(){ start() doing() end() } function init(){ doSth() } init()
7.策略模式
参考JS使用策略模式优化条件选择结构一文。
今天的文章js的四种设计模式_相机模式介绍「建议收藏」分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/59333.html