zoukankan      html  css  js  c++  java
  • 事件驱动的javascript 【转】

    原文地址:http://www.cnblogs.com/blusehuang/archive/2009/10/19/javascript_event_driven.html

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

  • 相关阅读:
    php通过某个日期段的周几,获取选中周几对应的日期
    thinkphp 使用paginate分页搜索带参数
    php小程序登录时解密getUserInfo获取openId和unionId等敏感信息
    微信小程序使用wxParse,解决图片显示路径问题
    php对二维数据排序
    微信小程序下拉框之二维数组或对象
    php获取指定月份月初和月末的时间戳
    WPF中实现自定义虚拟容器(实现VirtualizingPanel)
    SQL Server数据库ROW_NUMBER()函数使用详解
    WPF后台设置xaml控件的样式System.Windows.Style
  • 原文地址:https://www.cnblogs.com/myssh/p/1586917.html
Copyright © 2011-2022 走看看