详解Javascript事件驱动的来龙去脉

对于Javascript事件驱动大家了解很多，本文将从一个应用场景开始讲起，希望本文对大家使用好Javascript事件驱动有所帮助。

公司主营业务：网站制作、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出西乡免费做网站回馈大家。

首先来看看这样一个应用场景，网页上有个链接，比如说高级搜索，点击以后会出现一个搜索面板。由于面板里有很多搜索字段，而这些搜索字段又有很多数据，因此决定采用异步来加载该搜索面板。以jQuery为例，代码可能会这么写：

 
 
 

  
  
  
$('#advance_search’).bind(‘click’, function(e){  
  
  
  
$('#advance_search_panel’).load(‘/xxx/advance_search.html"’);  
  
  
  
}); 
 
 
 

但是呢，又需要在加载后做一些处理，比如说隐藏掉正在加载的提示文字或者图标，好说，就给load加上callback

 
 
 

  
  
  
….load(‘…..', function(){  
  
  
  
$('#waiting_message’).hide();  
  
  
  
}) 
 
 
 

面板里面有个搜索按钮，点击进行搜索，加载完需要绑定click事件，于是我们又在下面加上：

 
 
 

  
  
  
….load(‘…..', function(){  
  
  
  
$('#waiting_message’).hide();  
  
  
  
$('#search_button’).bind(‘click’, do_advance_search);  
  
  
  
}) 
 
 
 

某一天，其他有些页面也要加上这个高级搜索，但是呢，加载完成后的处理又都不一样，有的页面需要隐藏掉某个div，有的页面需要绑定一些操作等，这时候怎么办？难道都去改这个load方法吗？

有一种方法可以解决这个问题，加上callback参数用以回调，比如 new AdvancedSearch(callback); 当然，除此以外，其实还有一种更优雅的方法，事件驱动。

代码写起来很简单，加载完毕后触发这个事件:

 
 
 

  
  
  
….load(‘….', function() {  
  
  
  
$().trigger(‘advanced_search_load_complete’);  
  
  
  
}) 
 
 
 

需要在加载完成后做某些操作的地方绑定一下事件处理函数即可:

 
 
 

  
  
  
$().bind(‘advanced_search_load_complete’, function(){  
  
  
  
……  
  
  
  
}); 
 
 
 

封装的地方不用任何改动，其它地方爱做什么操作就做什么操作，这就是事件驱动的魅力，极大的松耦合。

总结一下，事件驱动好处是什么呢？

1. 松耦合的交互，事件发布者和订阅者无须知道对方的存在。

2. 多对多的关系，多个事件发布者对应多个订阅者。

3. 一个个事件发布出来，针对这些事件作出响应，这就是一个业务场景，每个步骤清晰自然。

4. 事件发布可以带参数，事件处理者可以拿到关于该事件的任何数据。

基于事件驱动的Javascript编程模型不同于常见的全局函数随便调的Javascript，它的模块更内聚，更容易复用，在业务不可预知的前提下，业务代码改变得更少。

目标，更漂亮的Javascript事件驱动，我们都来拥抱它。

新闻名称：详解Javascript事件驱动的来龙去脉
本文地址：http://www.stwzsj.com/qtweb/news13/13063.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联