这不是原创文章,主要是写给自己看的。原文比较详细容易让人,我提取最简单最好理解的部分,便于我以后用到。参考http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html。

  1. function Observer(){
  2. this.fns=[];
  3. }
  4. Observer.prototype={
  5. //订阅
  6. subscribe:function(fn){
  7. this.fns.push(fn);
  8. },
  9. //退订
  10. unsubscribe:function(fn){
  11. this.fns=this.fns.filter(
  12. function(el){
  13. if(el!==fn){
  14. return true;
  15. }
  16. }
  17. )
  18. },
  19. //发布
  20. update:function(o,thisObj){
  21. var scope=thisObj || window;
  22. this.fns.forEach(
  23. function(el){
  24. el.call(scope,o);
  25. });
  26. }
  27. }
  28. var o=new Observer;
  29. var f1=function(data){
  30. console.log('Robbin: ' + data + ', 赶紧干活了!');
  31. };
  32. var f2 = function (data) {
  33. console.log('Randall: ' + data + ', 找他加点工资去!');
  34. };
  35. var f3 = function (data) {
  36. console.log('Li: ' + data + ', 我要揍他!');
  37. };
  38. //f1,f2,f3订阅了
  39. o.subscribe(f1);
  40. o.subscribe(f2);
  41. o.subscribe(f3);
  42. //f1取消了订阅
  43. o.unsubscribe(f1);
  44. //发布
  45. o.update('Tom回来了');
  46.  
  47. //输出结果
  48. //Randall: Tom回来了, 找他加点工资去!
  49. //Li: Tom回来了, 我要揍他!

一个简单的观察者模式的JS实现的更多相关文章

  1. 从一个简单例子来理解js引用类型指针的工作方式

    <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...

  2. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  3. 记一个简单的webpack.config.js

    module.exports = { entry: './basic/app.js', output: { path: './assets/', filename: '[name].bundle.js ...

  4. 无聊的人用JS实现了一个简单的打地鼠游戏

    直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...

  5. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  6. 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...

  7. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  8. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  9. js 排列 组合 的一个简单例子

    最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...

随机推荐

  1. Oracle数据库的经典问题 snapshot too old是什么原因引起的

    Oracle数据库的经典问题 snapshot too old是什么原因引起的 ORACLE经典错误求解:ORA-1555错误(Snapshot too old ) - ... 书上说是因为the r ...

  2. PHP对象转数组

    Solution json_decode( json_encode( $obj ), true ): But why?You should have a look at the function na ...

  3. 2018-2019 Всероссийская командная олимпиада школьников по программированию, интернет-тур + отборы регионов (ВКОШП 18, интернет-тур) Solution

    A: 水. #include<bits/stdc++.h> using namespace std; typedef long long ll; const ll INFLL = 0x3f ...

  4. vertica单节点安装教程

    [准备] 1.CentOS 7.6的镜像盘(下载地址:官网) 2.vertica-9.1.0-0.x86_64.RHEL6(下载地址:https://pan.baidu.com/s/1IjWBUTku ...

  5. shell指令操作memcached

    shell指令操作memcached,可以用来直接测试memcached. 初始值为1000 #set test-value =1000printf "set test-value 0 0 ...

  6. STM32时钟树

    STM32的时钟系统 相较于51单片机,stm32的时钟系统可以说是非常复杂了,我们现在看下面的一张图: 上图说明了时钟的走向,是从左至右的从时钟源一步步的分配给外设时钟.需要注意的是,上图左侧一共有 ...

  7. python排序算法实现(冒泡、选择、插入)

    python排序算法实现(冒泡.选择.插入) python 从小到大排序 1.冒泡排序: O(n2) s=[3,4,2,5,1,9] #count = 0 for i in range(len(s)) ...

  8. 【spring-boot】 springboot整合quartz实现定时任务

    在做项目时有时候会有定时器任务的功能,比如某某时间应该做什么,多少秒应该怎么样之类的. spring支持多种定时任务的实现.我们来介绍下使用spring的定时器和使用quartz定时器 1.我们使用s ...

  9. IIS 7.5 配置 php 5.4.22 链接 sql 2008(用PDO链接数据库)

    最近在接触PHP这块,关于在wndows系统下的php配置,虽然网上已经很多文章,但有时候有些配置找起也麻烦,所以分享给大家. 一.php 5.4.22 下载地址 http://windows.php ...

  10. install ros-indigo-map-server

    sudo apt-get install ros-indigo-map-server