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

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设计模式:读书笔记(未完)

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

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

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

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

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

  5. 转载,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. LED音乐频谱之输出数据处理

    转载请注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/38023539 一.PWM调节 1.初始化 void DACInit() { C ...

  2. 点滴记录——Centos 6.5 yum安装Ganglia

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/39701141 注:下面操作都仅仅是在一台机器上操作 1. 安装php支持  yum inst ...

  3. Unity 进度条3D制作(3D版)

    昨天我们一起学习了2D进度跳的制作,那么趁着我们脑海中还残存昨日的记忆,今天继续学习另一种方法: 实现思路:当鼠标悬浮Start按钮->实例化物体并显示进度->100/100->进入 ...

  4. Oracle Enterprise linux 7 安装Oracle11gR2

    一.修改主机名和IP地址: [root@localhost Desktop]# cat /etc/hosts127.0.0.1 localhost.localdomain localhost 192. ...

  5. 查看被锁的数据[Z]

    SELECT LOCK_INFO.OWNER || '.' || LOCK_INFO.OBJ_NAME AS OBJ_NAME --对象名称(已经被锁住) ,LOCK_INFO.SUBOBJ_NAME ...

  6. DOM重绘对focus的影响

    在处理获取焦点时一直不能获取到. 搜索了下资料是因为 当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响. 重排:浏览器会使渲 ...

  7. python 基础篇(二)数据类型概述

    正式进入python的学习. 数据类型可以分为身份,类型,数据项三项联合组成. 身份: id() 类型:type() 数据类型:int,boolean,tuple,string,dict,list 1 ...

  8. ckeditor的使用与验证

    1.使id=id的textArea变为富文本编辑框 function inittextarea(id) {  CKEDITOR.replace(id,{         width:'600px',  ...

  9. M端页面-绝对定位布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  10. ListView的使用——聊天窗口

    一.步骤 1.在layout创建两个布局,分别是自己的回答条,和对方的回答条. 2.创建ChatMessage这个类,成员变量有头像地址.聊天内容.所属类型(假设1表示对方,2表示自己). 3.创建C ...