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

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. cocos2d-x结合cocosbuilder,不同屏幕适配小结

    这个问题搞了好几天才解决,在此总结一下: 首先约定只使用一套图片资源同时应用于iphon4和iphon5(测试过在ipad下也能显示正常), 这里我们将需要全屏显示的背景制作为iphon5的尺寸即:1 ...

  2. CodeSmith 模版

    <%@ CodeTemplate Language="C#" TargetLanguage="C#" Src="" Inherits= ...

  3. Python3.5 入门学习记录——变量类型

    前面介绍了如何下载和安装Python3.5的环境,安装好了后开始进行练习,仍然是最基础的使用Python解释器进行Coding,由于我也是初学Python,也是根据网上其他的教程一点一点练习,然后归纳 ...

  4. Java通过axis调用WebService

    上午头给了我一个任务,让我对接别的公司的webservice接口,各种百度,看的头晕脑花的,终于通了,记录一下吧. jar包奉上,http://pan.baidu.com/s/1jSchC 包含:ax ...

  5. mysql模拟插入数据表

    由于测试或者学习需要,我们要经常向一个新建的数据表插入几百万行以上的数据来验证我们的一些想法,比如索引的合理构建,表字段类型的设计等等,下面跟大家演示如何往一个新建的数据表插入N多条数据. 1.新建一 ...

  6. ORACLE 绑定变量用法总结 .

    之前对ORACLE中的变量一直没个太清楚的认识,比如说使用:.&.&&.DEIFINE.VARIABLE……等等.今天正好闲下来,上网搜了搜相关的文章,汇总了一下,贴在这里,方 ...

  7. php 数组 array_intersect_key() array_unique()移除重复

    <?php // array_unique($array) 去除重复 // array_unshif()向数组的顶部追加函数 // array_shif($a,"ss")向数 ...

  8. 1分钟快速生成用于网页内容提取的xslt

      1,项目背景   在<Python即时网络爬虫项目说明>一文我们说过要做一个通用的网络爬虫,而且能节省程序员大半的时间,而焦点问题就是提取器使用的抓取规则需要快速生成.在python使 ...

  9. 懒省事的小明--nyoj55

    懒省事的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述      小明很想吃果子,正好果园果子熟了.在果园里,小明已经将所有的果子打了下来,而且按果子的不同种类分成 ...

  10. java面试题大全-基础方面

    Java基础方面: 1.作用域public,private,protected,以及不写时的区别答:区别如下:作用域           当前类       同一package  子孙类        ...