jQuery 实现观察者模式

最新推荐文章于 2021-08-05 20:43:18 发布

转载最新推荐文章于 2021-08-05 20:43:18 发布 · 73 阅读

文章标签：

#javascript #python #ViewUI

本文介绍了一个 jQuery gevent 事件插件的使用示例，展示了如何通过该插件实现事件的订阅与发布功能。具体包括了创建DOM元素、设置样式、定义事件处理器、订阅事件、发布事件等步骤。

github：

https://github.com/mmikowski/jquery.event.gevent

demo：

$('body').append( "<div id='spa-chat-list-box' />" );

var $listbox = $('#spa-chat-list-box');

$listbox.css({
    position   : "absolute",
    'z-index'  : "3",
    top        : "50",
    left       : "50",
    width      : "50",
    height     : "50",
    border     : "2px solid #ccc",
    background : "#fff",
})

var onListchange = function ( event, update_map ){
    $( this ).html(update_map.list_text);
    alert("onListchange");
}

/* 订阅事件 */
$.gevent.subscribe(
    $listbox,
    'spa-listchange',
    onListchange
);

/* 发布通知 */
$.gevent.publish(
    'spa-listchange',
    [{  list_text : 'the list is here'}]
);

/* 删除元素的话，订阅的事件也会删除 */
$listbox.remove();
$.gevent.publish('spa-listchange',[ { } ]);