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

开发 前端
在这里我们将介绍Javascript事件驱动的来龙去脉,希望本文能对大家了解事件驱动有所帮助。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结一下,事件驱动好处是什么呢?

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

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

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

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

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

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

原文标题:事件驱动的javascript

链接:http://www.cnblogs.com/blusehuang/archive/2009/10/19/javascript_event_driven.html

【编辑推荐】

  1. 浅析利用Javascript获取随机颜色
  2. JSON是什么?为JavaScript准备的数据格式
  3. 十个最常用的JavaScript自定义函数
  4. 有关JavaScript事件加载的一些延伸思考
  5. JavaScript使用心得汇总:从BOM和DOM谈起
责任编辑:彭凡 来源: 博客园
相关推荐

2015-11-06 13:59:01

JavaScript事件处理

2009-09-16 13:05:32

C#组件开发

2022-06-28 18:32:45

物联网IoT

2009-06-26 08:44:57

2018-01-09 04:59:59

VLANTag网络技术

2023-02-07 07:25:36

Spring事件驱动

2019-04-19 21:06:23

事件驱动架构VANTIQ

2020-09-29 07:30:18

TikTok

2013-05-08 10:36:07

JavaScriptJS详解JavaScrip

2024-06-28 10:19:02

委托事件C#

2021-01-19 11:40:40

Linux代码程序编译

2022-06-09 09:20:40

Linux语言编写代码

2009-01-19 09:40:53

JavaScript事件代理事件处理器

2014-11-25 10:03:42

JavaScript

2019-10-31 08:36:59

线程内存操作系统

2017-12-28 14:51:01

AndroidView焦点

2021-05-13 10:12:55

Kubernetes 微服务软件开发

2022-08-02 09:02:17

虚拟内存操作系统

2023-07-12 08:30:52

服务架构事件驱动架构

2009-06-25 14:05:08

Ajax JSF
点赞
收藏

51CTO技术栈公众号