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

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. 蚂蚁的难题(二)首尾相连数组的最大子数组和(DP)

    蚂蚁的难题(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种食材 ...

  2. cocos2d-x 3.0游戏实例学习笔记 《跑酷》 完结篇--源代码放送

    说明:这里是借鉴:晓风残月前辈的博客,他是将泰然网的跑酷教程,用cocos2d-x 2.X 版本号重写的,眼下我正在学习cocos2d-X3.0 于是就用cocos2d-X 3.0重写,并做相关笔记 ...

  3. 从Android Handler内部类到WeakReference的知识关联

    Handler: 普通使用方法: Handler用于处理和从队列MessageQueue中得到Message.一般我们要重写Handler的handleMessage(Message msg){}方法 ...

  4. 转:Xshell显示找不到匹配的outgoing encryption算法怎么办

    原文出处:http://www.xshellcn.com/xsh_column/suanfa-bpp.html 由用户反应在使用xshell和xftp连接debian 7时出现找不到匹配的outgoi ...

  5. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载

  6. sublime 快键

    Keyboard Shortcuts - Windows/Linux Warning This topic is a draft and may contain wrong information. ...

  7. 自定义的GitLab 头像无法正常显示以及URL总是指向localhost

    解决指向localhost的问题: 编辑gitlab的配置vi /etc/gitlab/gitlab.rb,修改external_url 参数值 [Mesogene@localhost ~]$ sud ...

  8. 小项目--反eclass

    前言—— 最近会把前一段时间闲的无聊写的一些很小的项目写一些博客,用来练练手. 引子—— 最近班里有个很讨厌的软件,,,,教育局规定每个学校要上传多媒体使用记录,所以学校就给班里每台电脑上装了一个比较 ...

  9. phpstorm8 配置svn

    步骤1 步骤2. 步骤3.

  10. .Net Service部署(二)

    1. 以管理员权限运行cmd.exe2. 安装服务 安装服务需要注意的是,如果电脑已经安装了此服务,需要先停止服务然后删除服务, 在进行安装注册,注册前先运行  cd C:\Windows\Micro ...