js和vue的监听器

js和vue的监听器

Scroll Down

js和vue的监听器

1.效果

在项目中存在需求,需要一个输入框与一个文件输入的插件配合,效果是在二者同时存在值的时候,显示一个输入框,效果如下:
1.不输入
image.png
2.二者其中一个输入
image.png
image.png
3.二者同时存在
image.png
即在二者同时存在值的时候 显示输入框,二者其中一个没有输入的话 都不显示

2.实现

1.vue的监听器实现

由于以前重构了页面的代码,将原来恶心的jsrender换成js+vue.js,在控制如下情况比较简单,利用vue的监听器:
image.png
1.声明一个字段控制 下面文本框的显示
image.png
页面:
image.png
监听器:
image.png
通过vue很简单就实现了上对下的监听,但是文件上传的插件使用的传统jsp(当初考虑这个插件多处使用,改动太大就没有重构),就无法使用vue的监听器了

2.js的监听器

主要使用了js的观察者模式
文件插件的页面:
image.png

代码:

 $(function(){
			// Firefox和Chrome早期版本中带有前缀  
			 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver  
			   
			 // 选择目标节点  
			 var target = document.querySelector('#fileListTbody-uploader_jbj');  
			    
			 // 创建观察者对象  
			 var observer = new MutationObserver(function(mutations) {  
			   mutations.forEach(function(mutation) {  
				    vm.showHandleSum=false
				   if($('#fileListTbody-uploader_jbj tr').length!=1){
					   //办结回复文号 与办结文件上传同时存在 则显示办结总结
					  if($('#HANDLE_NO').val()){
						  //将是否显示办结总结属性设置为显示
						  vm.showHandleSum=true
					  }
				   }
			   });      
			 });  
			    
			 // 配置观察选项:  
			 var config = { attributes: true, childList: true, characterData: true }  
			 
			// 传入目标节点和观察选项  
			 observer.observe(target, config);  
		 })

这样实现了下到上 和自己的监听

3.总结

观察者模式:当对象间存在一对多关系时,则使用观察者模式(Observer Pattern)。比如,当一个对象被修改时,则会自动通知它的依赖对象。观察者模式属于行为型模式。其实就是个发布和订阅的模式.
观察者模式的角色:

Subject 观察主题对象,也可以叫被观察或者被订阅对象
Observer 观察者或者订阅者对象,当Subject有变动,就会通知到每一个Observer

在常用框架的使用:spring中也有许多观察者模式的体现,
1.Spring 中观察者模式的四个角色

1. 事件(ApplicationEvent)
2. 事件监听(ApplicationListener)
3. 事件发布(ApplicationContext)
4. 事件管理(ApplicationEventMulticaster)

2.Spring的监听实现方式

1.自定义需要发布的事件类,需要继承 ApplicationEvent 类或 PayloadApplicationEvent (该类也仅仅是对 ApplicationEvent 的一层封装)
2.使用 @EventListener 来监听事件或者实现 ApplicationListener 接口。
3.使用 ApplicationEventPublisher 来发布自定义事件(@Autowired注入即可)