Js设计模式之结构型设计模式(五)、装饰者模式
goJhou 发布于2018-03 浏览:2263 回复:1
1
收藏
今天为各位带来结构性的设计模式,装饰者模式
 
这种设计模式能让我们的代码便于扩展,他不同于前四种设计模式,他是结构性的设计模式,目的不是为了创建对象。它可以让我们在后期的代码维护中体会到一些便利。
 
接下去直接来上代码,假设我们在书写一个功能模块时会这样
 



	
	Document


	
asdfasdf

如果代码过多,时隔过久,那你想再做功能增补时,就会很头疼,尤其是上万行的js文件中去找一个点击事件很麻烦

所以就可以用到装饰者模式来便于扩展

 

装饰者函数

var decorate = function (dom, fn, ev) {
     //三目式来获取是否存在单击事件,如果有单击事件使用ev暂存一下,随后将fn附加到单击事件中
      dom.onclick ? (ev = dom.onclick, dom.onclick = function () {
        ev.call(dom);
        fn.apply(dom);
      }) : (dom.onclick = fn)
    };

 

使用这个函数,我们就可以轻松的去附加事件,而不用去寻找代码了

 

最后实际情况代码如下:

	
	
	
		
		Document
	
	
		
asdfasdf

还可以针对各种事件做其他的装饰者呢~

收藏
点赞
1
个赞
共1条回复 最后由mq40330回复于2022-04
#2荒墨丶迷失回复于2018-03

go大神在 这么紧张的时间下 还能更新  赞一个~

1
TOP
切换版块