一个简单的观察者模式的JS实现
这不是原创文章,主要是写给自己看的。原文比较详细容易让人,我提取最简单最好理解的部分,便于我以后用到。参考http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html。
function Observer(){
this.fns=[];
}
Observer.prototype={
//订阅
subscribe:function(fn){
this.fns.push(fn);
},
//退订
unsubscribe:function(fn){
this.fns=this.fns.filter(
function(el){
if(el!==fn){
return true;
}
}
)
},
//发布
update:function(o,thisObj){
var scope=thisObj || window;
this.fns.forEach(
function(el){
el.call(scope,o);
});
}
}
var o=new Observer;
var f1=function(data){
console.log('Robbin: ' + data + ', 赶紧干活了!');
};
var f2 = function (data) {
console.log('Randall: ' + data + ', 找他加点工资去!');
};
var f3 = function (data) {
console.log('Li: ' + data + ', 我要揍他!');
};
//f1,f2,f3订阅了
o.subscribe(f1);
o.subscribe(f2);
o.subscribe(f3);
//f1取消了订阅
o.unsubscribe(f1);
//发布
o.update('Tom回来了');
//输出结果
//Randall: Tom回来了, 找他加点工资去!
//Li: Tom回来了, 我要揍他!
一个简单的观察者模式的JS实现的更多相关文章
- 从一个简单例子来理解js引用类型指针的工作方式
<script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...
- 一个简单且丑陋的js切换背景图片基础示例
不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...
- 记一个简单的webpack.config.js
module.exports = { entry: './basic/app.js', output: { path: './assets/', filename: '[name].bundle.js ...
- 无聊的人用JS实现了一个简单的打地鼠游戏
直入正题,用JS实现一个简单的打地鼠游戏 因为功能比较简单就直接裸奔JS了,先看看效果图,或者 在线玩玩 吧 如果点击颜色比较深的那个(俗称坏老鼠),将扣分50:如果点击颜色比较浅的那个(俗称好老鼠) ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- js 排列 组合 的一个简单例子
最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...
随机推荐
- Nginx 403 forbidden原因及故障模拟重现(转载)
这篇文章是转载过来的一篇文章,觉得不错,因此做个记录. 访问Nginx出现状态码为403 forbidden原因及故障模拟 1) nginx配置文件里不配置默认首页参数或者首页文件在站点目录下没有 i ...
- python3 os.walk()使用
os.walk() 方法用于通过在目录树种游走输出在目录中的文件名,向上或者向下. 在Unix,Windows中有效. os.walk(top[, topdown=True[, onerror=Non ...
- Java多线程(三)
本文主要接着前面多线程的两篇文章总结Java多线程中的线程安全问题. 一.一个典型的Java线程安全例子 1 public class ThreadTest { 2 3 public static v ...
- 禁止复制操作 --《C++必知必会》条款32
class NoCopy{ private: //声明为私有的,则外部不可访问,即:不可复制 NoCopy(const NoCopy & );//复制构造函数 NoCopy & ope ...
- java之throw和throws
抛出异常有三种形式,一是throw,一个throws,还有一种系统自动抛异常.下面它们之间的异同. 一.系统自动抛异常 当程序语句出现一些逻辑错误.主义错误或类型转换错误时,系统会自动抛出异常:(举个 ...
- Codeforces Round #533 (Div. 2) Solution
A. Salem and Sticks 签. #include <bits/stdc++.h> using namespace std; #define N 1010 int n, a[N ...
- CCPC 2017-2018, Finals Solution
A - Dogs and Cages 水. #include <bits/stdc++.h> using namespace std; int t; double n; int main( ...
- 什么是ASCII码文本文件
标准ASCII码方式(也称文本方式)存储的文件,更确切地说,英文.数字等字符存储的是ASCII码.文本文件中除了存储文件有效字符信息(包括能用ASCII码字符表示的回车.换行等信息)外,不能存储其他任 ...
- linux及安全《Linux内核设计与实现》第一章——20135227黄晓妍
<linux内核设计与实现>第一章 第一章Linux内核简介: 1.3操作系统和内核简介 操作系统:系统包含了操作系统和所有运行在它之上的应用程序.操作系统是指整个在系统中负责完成最基本功 ...
- c++生成算式并计算(《构建之法》第一章课后第一题)
c++实现计算器(自动生成算式并计算) 要满足的需求有以下几个: 自动生成随机的四则运算算式,包含括号和小数. 对生成的算式计算出结果. 算式.结果分别存储到不同的文件. 一 生成算式 由上述需求可知 ...