zoukankan      html  css  js  c++  java
  • javascript 事件驱动编程【转(原文为“事件驱动的javascript”)】

      呵呵,该了一下标题,我觉得这样更容易理解,转载:http://www.cnblogs.com/blusehuang/archive/2009/10/19/javascript_event_driven.html?login=1#commentform

    首先来看看这样一个应用场景,网页上有个链接,比如说高级搜索,点击以后会出现一个搜索面板。由于面板里有很多搜索字段,而这些搜索字段又有很多数据,因此决定采用异步来加载该搜索面板。以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!事件驱动,我们都来拥抱它。

  • 相关阅读:
    SP笔记:交叉实现七行并成一行
    HTML tag 学习
    操作哈希表
    Efficient bipedal robots based on passivedynamic walkers
    Pushing People Around
    ZEROMOMENT PONTTHIRTY FIVE YEARS OF ITS LIFE

    Active Learning for RealTime Motion Controllers
    Accelerometerbased User Interfaces for the Control of a Physically Simulated Character
    Dynamic Response for Motion Capture Animation
  • 原文地址:https://www.cnblogs.com/myssh/p/2041093.html
Copyright © 2011-2022 走看看