javascript设计模式——Observer

时间:2022-09-28 20:40:46

定义一种一对多的从属关系,当一个目标状态改变,所有他的从属对对象都将收到通知。

1.简单的Observer模式 实现

var Observer = function(){
this.list = [];
}
Observer.prototype.sub = function(func){
this.list.push(func);
}
Observer.prototype.pub = function(msg){
for(var i = 0; i<this.list.length; i ++){
this.list[i](msg)
}
}
Observer.prototype.unsub = function(func){
var index = this.list.indexOf(func);
this.list.splice(index,1);
}
var ob = new Observer();
function func(msg){
console.log(msg)
}
ob.sub(func);
ob.pub("Hello");
ob.unsub(func);
ob.pub("useless");

2.观察者模式应用

在一个电子商务系统中,假设目前有三个类,分别是订单类,信息类,和检查类。在购买中,当下单之后要进行商品的检查,和商品信息发送。

一般的做法是在订单类的下单完成函数里去构建其消息和检查类并调用其方法,这是一种耦合。

而通过观察者模式,我们可以使用一个类去管理这些方法,当订单类状态发生改变时,其所有观察者都将收到通知,这里的观察者是其他类的函数,函数调用。

//观察者模式实现的功能类
var Observer = function(){
this.list = [];
}
Observer.prototype.sub = function(func){
  // 主
this.list.push(func);
}
Observer.prototype.pub = function(msg){
for(var i = 0; i<this.list.length; i ++){
this.list[i](msg)
}
}
Observer.prototype.unsub = function(func){
var index = this.list.indexOf(func);
this.list.splice(index,1);
}
var ob = new Observer(); //商品类
function Order(goods){
this.goods = goods;
}
Order.prototype.done = function(){
ob.pub(this.goods);
} // 消息类
function Msg(){
  // 从
ob.sub(this.sendMsg);
}
Msg.prototype.sendMsg = function(goods){
alert(goods.name);
} // 检查类
function Check(){
  //从
ob.sub(this.check);
}
Check.prototype.check = function(goods){
alert(goods.name != 0);
}
var order1 = new Order({'name':'耳机'});
var msg1 = new Msg();
var check1 = new Check();
order1.done()

javascript设计模式——Observer的更多相关文章

  1. Javascript设计模式(摘译)

    说明: 未完成...更新中.... 一.javascipt设计模式分类 设计模式分类有很多标准,最流行的三种如下 1)  creational  --  主要关注对象创建 Creational des ...

  2. JavaScript设计模式&colon;读书笔记&lpar;未完&rpar;

    该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/4/8 2016/3/30: 模式是一种可复用的解决方案,可用于解决 ...

  3. JavaScript的学习--JavaScript设计模式的总结

    这篇博客只是自己对设计模式的理解的备忘~ 看完了<JavaScript设计模式>这本书,一直没有写博客记录一下,最近抽出时间来重读了一下,就顺便记录一下~ 如果你只是想粗略了解一下Java ...

  4. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  5. 转载&comma;javascript 设计模式

    了解JavaScript设计模式我们需要知道的一些必要知识点:(内容相对基础,高手请跳过) 闭包:关于闭包这个月在园子里有几篇不错的分享了,在这我也从最实际的地方出发,说说我的理解. 1.闭包最常用的 ...

  6. JavaScript设计模式 -- 读书笔记

    JavaScript设计模式 一. 设计模式 一个模式就是一个可重用的方案: 有效的解决方法.易重用.善于表达该解决方案: 未通过"模式特性"测试的模式称为模式原型: 三规则:适用 ...

  7. 【JavaScript设计模式系列---开篇预览】

    转:http://www.cnblogs.com/Darren_code/archive/2011/08/31/JavascripDesignPatterns.html 2011-08-31 23:5 ...

  8. JavaScript设计模式之观察者模式(学习笔记)

    设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...

  9. javascript设计模式系列

    javascript设计模式系列   创建型: 1.抽象工厂模式(Abstract Factory) 2.构建者模式(Builder) 3.工厂方法模式(Factory Method) 4.原型模式( ...

随机推荐

  1. Java借助axis2发布WebService

    Webservice: 1.Xml: 2.WSDL: Web service描述语言(WSDL)就是这样一个基于XML(标准通用标记语言下的一个子集)的语言,用于描述Web service及其函数.参 ...

  2. WordPress折腾日记

    安装环境: 我开了个虚拟机xp....用xampp的整合包..下载地址https://www.apachefriends.org/zh_cn/download.html 跟着安装就行了.最后打开xam ...

  3. Countries in War &lpar;POJ 3114&rpar; Tarjan缩点&plus;最短路

    题目大意: 在一个有向图中,每两点间通信需要一定的时间,但同一个强连通分量里传递信息不用时间,给两点u,v求他们最小的通信时间.   解题过程: 1.首先把强连通分量缩点,然后遍历每一条边来更新两个强 ...

  4. SQL Server系统视图 &lbrack;不定期更新&rsqb;

    1.sys.objects:在数据库中创建的每个用户定义的架构作用域内的对象(如表.视图.约束.默认值.日志.规则存储过程等,但不包括DDL触发器)在该表中均对应一行. 列名 说明 name 对象名. ...

  5. Android 官方命令深入分析

    原文:www.libgdx.cn Android SDK包括了多种工具来帮助你创建基于Android平台的移动应用.这些工具一般分成两类:SDK 工具和 platform 工具. SDK 工具是独立的 ...

  6. php单例模式深入讲解

    避免多次初始化数据库连接DAO 需要多次初始化数据库连接的场景 场景1: 首先PHP单例模式我觉得只是针对单次页面级请求时出现多个应用场景并需要共享同一对象资源时是非常有意义的 一个类A需要调用多个类 ...

  7. nginx中配置跨域支持功能

    vi /etc/nginx/nginx.conf 加入如下代码 http {  ###start####  add_header Access-Control-Allow-Origin *;  add ...

  8. Unity3D热更新之LuaFramework篇&lbrack;02&rsqb;--用Lua创建自己的面板

    在上篇文章 Unity3D热更新之LuaFramework篇[01]--从零开始 中,我们了解了怎么获得一个可用的LuaFramework框架. 本篇将我会先介绍一下如何配置Lua开发环境,然后分析在 ...

  9. 【AtCoder】AGC014

    AGC014 链接 A - Cookie Exchanges 发现两个数之间的差会逐渐缩小,所以只要不是三个数都相同,那么log次左右一定会得到答案 #include <bits/stdc++. ...

  10. Java删除文件夹和其子文件、文件的拷贝和剪切

     1.递归删除目录下的所有文件及子目录下所有文件 //递归删除目录下的所有文件及子目录下所有文件 public static boolean deleteDir(File dir) { if (dir ...