设计模式之观察者模式

观察者模式

观察者模式(Observer)完美的将观察者和被观察的对象分离开。举个例子,用户界面可以作为一个观察者,业务数据是被观察者,用户界面观察业务数据的变化,发现数据变化后,就显示在界面上。面向对象设计的一个原则是:系统中的每个类将重点放在某一个功能上,而不是其他方面。一个对象只做一件事情,并且将他做好。观察者模式在模块之间划定了清晰的界限,提高了应用程序的可维护性和重用性。
观察者设计模式定义了对象间的一种一对多的依赖关系,以便一个对象的状态发生变化时,所有依赖于它的对象都得到通知并自动刷新。

模式作用:

  1. 支持简单的广播通信,自动通知所有已经订阅过的对象
  2. 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性
  3. 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用

注意事项:

  1. 监听要在触发之前

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>观察者模式</title>
    <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>
    <script>
        ~(function(){
            var o=$({});
            $.jianting=function(){
                o.on.apply(o,arguments)
            }
            $.fabu=function(){
                o.trigger.apply(o,arguments)
            }
            $.qingchu=function(){
                o.off.apply(o,arguments)
            }
        })()
        $.jianting('myEvent',function(e,a,b,c){
            alert(a+"||"+b+'||'+c);
        })

        setTimeout(function(){
            $.fabu('myEvent',[1,2,3])
        },1000)

    </script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1 定义 定义对象之间的一种一对多依赖关系,使得每当一个对象状态发生改变时,其相关依赖对象皆得到通知并被自动更新。...
    菜小轩526阅读 3,541评论 3 3
  • 在正式介绍观察者模式前,我们先引用生活中的小例子来模拟观察者,先对观察者模式有一个整体的感觉。 现实模拟 报纸和杂...
    六尺帐篷阅读 5,544评论 6 18
  • 使用场景 一个抽象模型有两个方面,其中一个方面依赖于另一个方面。将这些方面封装在独立的对象中使它们可以各自独立地改...
    niaoge2016阅读 4,104评论 0 1
  • 客户需求 程序设计 一个气象站对应着多个客户端,气象站的数据一发生变化,客户端的数据也要随着更新,这就形成了一种依...
    BlainPeng阅读 4,622评论 1 17
  • 观察者模式 有时,我们希望在一个对象的状态改变时更新另外一组对象。在MVC模式中有这样一个非常常见的例子,假设在两...
    英武阅读 9,672评论 0 51

友情链接更多精彩内容