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

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. 【Android】项目中每个文件夹的作用

    1. src:存放所有的*.java源程序. 2. gen:为ADT插件自动生成的代码文件保存路径,里面的R.java将保存所有的资源ID. 3. assets:可以存放项目一些较大的资源文件,例如: ...

  2. javax inect

    Spring 3 and JSR-330 @Inject and @Named example By mkyong | September 16, 2012 | Viewed : 86,399 tim ...

  3. 淘宝对接API

    最近在忙与淘宝做对接的工作,总体感觉淘宝的api文档做的还不错,不仅有沙箱测试环境,而且对于每一个api都可以通过api测试工具生成想要的代码,你完全可以先在测试工具中测试之后再进行代码的编写,这样就 ...

  4. Makefiles 介绍

    http://www-personal.umich.edu/~ppannuto/writings/makefiles.html Makefiles Makefiles (or, the GNU aut ...

  5. android 5.0新特性CardView教程

    CardView 是android5.0新加入的特性,大家先别着急,由于谷歌出了cardview的兼容包,也就是android.support.v7.widget.CardView包,所以在5.0以下 ...

  6. Spring整合Hibernate 二 - 声明式的事务管理

    Spring大战Hibernate之声明式的事务管理 Spring配置文件: 添加事务管理类的bean: <bean id="txManager" class="o ...

  7. SQL Server T-SQL基础

    --数据库:数据库软件:mssqlserver,oracle,db2, ACCESS,SQLITE --数据库文件:分数据文件(MDF)和日志文件(log) 班级名称:(四期班训练营)长度可变,有中文 ...

  8. 谈谈对web标准的理解

    Web标准不是某一个标准,而是由一系列标准组合而成.网页主要由三部分组成:结构.表现和行为.对应的标准也分三方面:结构化标准语言主要包括XHTML和HTML以及XML,表现标准语言主要包括CSS,行为 ...

  9. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  10. 我用爬虫一天时间“偷了”知乎一百万用户,只为证明PHP是世界上最好的语言

    我用爬虫一天时间“偷了”知乎一百万用户,只为证明PHP是世界上最好的语言 2015-08-06 猿圈 我用爬虫一天时间“偷了”知乎一百万用户 只为证明PHP是世界上最好的语言 看了不少朋友圈里推荐的P ...