js观察者模式与Model
目的
观察者模式是常见的设计模式,可以被应用到MV*框架的Model上,来实现对数据变化的监听。
基本概念
观察者模式是一种常见的设计模式。被观察者可以被订阅(subscribe),并在状态发生改变时通知订阅者。
观察者模式的实现主要涉及三个接口:
1. subscribe (evtName, handler):订阅被观察者的指定事件。
2. unsubscribe (evtName, handler):取消对被观察者指定事件的订阅。
3. publish (evtName, data):被观察者发布指定事件。
这些接口也常被命名为on,off,once,trigger。
代码实现
代码很简单易懂,就不多做解释了:
function Observer() { this.fns = {}; } Observer.prototype = { subscribe: function (evtName, handler) { if (!this.fns[evtName]) { this.fns[evtName] = []; } this.fns[evtName].push(handler); }, unsubscribe: function (evtName, handler) { var arr = this.fns[evtName]; if (!arr) { return; } var index = arr.indexOf(handler); if (index !== -1) { arr.splice(index, 1); } }, publish: function (evtName, data) { var arr = this.fns[evtName]; if (!arr) { return; } arr.forEach( function (handler) { handler(data); } ); } };
使用起来是这样的:
var benben = new Observer(); benben.subscribe('evtA', function (data) { console.log(data); }); benben.publish('evtA', {name: '笨笨'});
与Model结合
接下来我们就要让Model变为可观察的(Observable):
function Model () { Observer.call(this); // => this.fns = {}; this._data = {}; // 我们将实际数据存放在这里 } $.merge(Model.prototype, Observer.prototype); // 将方法扩展到Model的prototype上 var model = new Model();
现在我们要做的就是,监听model数据的变化,并发布(publish)。方式包括(并不限于):
1. get与set函数:
Model.prototype.set = function (key, value) { var oldValue = this._data[key]; this._data[key] = value; this.publish('change:' + key, { key: key, value: value, oldValue: oldValue }); } Model.prototype.get = function (key) { return this._data[key]; } model.set('name', '笨笨');
2. setter与getter:
Model.prototype.defineKeys = function (definitions) { var that = this, data = this._data; for (key in definitions) { this[key] = definitions[key]; this.__defineGetter__(key, function () { return data[key]; }); this.__defineSetter__(key, function (value) { var oldValue = data[key]; data[key] = value; that.publish('change:' + key, { key: key, value: value, oldValue: oldValue }); }); } } /* 或者使用defineProperty Object.defineProperty(this, key, { get: function() { // }, set: function(value) { // } }); */ // 需要先define后赋值 model.defineKeys({name: undefined}); model.name = '笨笨';
这两种方式都可以将对model的赋值与事件发布绑定到一起。当然它们各自有各自的缺陷:后者的赋值方式更“自然”,但需要先对字段定义。其他的方式还包括数据脏检测(dirty checking)等,但目的是统一的:将model的变化发布给订阅者,比如通知View来更新等等。
小结
通过使用观察者模式,我们就能监听Model的数据变化(也可以reject不符合条件的赋值等等),并作出相应的动作,比如更新View等等。
扩展:ES6(7)中的Object.observe
Object.observe是未来ES标准之一,包括Chrome 36(beta)+的浏览器已经支持之一特性,不过何时标准最终定稿和普遍实现还是未知。
让我们来了解一下Object.observe:
var obj = {name: 'benben'}, arr = [], onChange = function (changes) { changes.forEach(function (change) { console.log( change.type, // add, delete, update change.object, change.name, change.oldValue ); }); }; Object.observe(obj, onChange); Object.observe(arr, onChange); obj.name = '笨笨'; arr.push(1);
试试看,第一个情况我们被通知name的变化,第二种情况则被通知[0]和length发生了变化,是不是很方便呢。
我们还可以指定我们感兴趣的字段,以及取消监听:
Object.observe(obj, onChange, ['name', 'gender']); Object.unobserve(obj, onChange);
同时还提供了 Object.getNotifier和notifier.notify两个API来帮助我们发布事件:
function Square () { this.edge = 0; } Square.prototype.setEdge = function (val) { var notifier = Object.getNotifier(this); this.edge = val; notifier.notify({ object: this, type: 'update', area: val * val }); } var s = new Square(), onChange = function (changes) { console.log('onChange...'); changes.forEach(function (change) { console.log(change); }); }; Object.observe(s, onChange); s.setEdge(5);
注意s并没有area字段,我们通过notifier的notify方法来发布变化事件。
如果被观察者认为观察者并不应该关注某些字段的变化(不同于观察者只选择观察指定字段集),这是我们可以使用notifier的performChange方法:
Square.prototype.setEdge = function (val) { var notifier = Object.getNotifier(this); notifier.performChange('area', function() { this.edge = val; }, this); notifier.notify({ object: this, type: 'update', area: val * val }); }
我们在performChange的回调中设置了edge的值,这种情况下,edge的变化并不会被发布。
js观察者模式与Model的更多相关文章
- Backbone.js 中的Model被Destroy后,不能触发success的一个原因
下面这段代码中, 当调用destroy时,backbone会通过model中的url,向服务端发起一个HTTP DELETE请求, 以删除后台数据库中的user数据. 成功后,会回调触发绑定到dest ...
- Node.js与Sails~Model和ORM的持久化
回到目录 上一讲说了在sails里定义model及相关参数的说明,这一讲主要说一下如何将你的Model持久化到文件,关系数据库和Nosql数据库里,在持久化这点上,sails是统一管理的,它可以在/c ...
- Backbone.js学习之Model
首先,我们看一下官方文档中对Model的解释(或者说定义): Models are the heart of any JavaScript application, containing the in ...
- Backbone.js 中使用 Model
前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了.现在来学习怎么创建自己的 Model 类,并简单的使用.Backbone.js ...
- [Node.js] Create a model to persist data in a Node.js LoopBack API
In this lesson you will learn what a LoopBack model is, you will create a Product model using the Lo ...
- js - 观察者模式与订阅发布模式
零.序言 转载&参考: 1.JavaScript 设计模式系列 - 观察者模式 2.JavaScript 设计模式(六):观察者模式与发布订阅模式 一.观察者模式(observer) 概要: ...
- Node.js与Sails~Model数据模型
回到目录 对于Sails来说,它的Model与数据库对应,不过它并没有采用目前比较流行的poco贫血模型,而是采用了类似DDD的充血模型,即它的数据实体里即有数据库字段(属性)而且还有方法,而模型里的 ...
- js观察者模式
观察者模式存在观察者和被观察者 被观察者的状态发生改变,通知观察者调用观察者的update方法,观察者的update方法对被观察者的状态进行检测,做出相应的操作 被观察者存在接口attach,deta ...
- 浅谈js观察者模式
观察者模式又叫发布订阅模式,它可以让多个观察者对象同时监听某一个主题对象,即在一个事件发生时,不同的对象迅速对其进行相应.就比如当又人闯红灯,不同的人对这件事迅速发起响应,当然这个比喻不太恰当,不过在 ...
随机推荐
- win7 64位andriod开发环境搭建
本文转自:http://www.cfanz.cn/index.php?c=article&a=read&id=65289 最近换了新电脑,装了win7 64位系统,安装了各种开发环境, ...
- DNS与获取
今天翻看twitter的源码的时候看到了一下内容: <link rel=”dns-prefetch” href=”http://a0.twimg.com”/> <link rel=” ...
- head和tail命令-----得到头尾N行或者这去掉尾头N/N-1行
[algo@localhost tmp]$ cat test 1 2 3 4 5 head得到头部2行,删掉尾部2行 [algo@localhost tmp]$ head -n +2 test 1 ...
- Xcode 6配置里定义${ARCHS_STANDARD}为armv7, arm64以及错误
转发:http://www.cocoachina.com/ios/20141013/9897.html 最近一次的Xcode 6更新默认不再支持arm7s架构,究竟是要废除不用呢还是仅仅只是一个疏忽? ...
- Quick Cocos2dx Http通讯
服务端:Python 通讯协议:Http 参考文章: 1 用python实现一个基本的http server服务器 http://blog.sina.com.cn/s/blog_416e3063010 ...
- golang中container/heap包源码分析
学习golang难免需要分析源码包中一些实现,下面就来说说container/heap包的源码 heap的实现使用到了小根堆,下面先对堆做个简单说明 1. 堆概念 堆是一种经过排序的完全二叉树,其中任 ...
- Android编程中的5种数据存储方式
Android编程中的5种数据存储方式 作者:牛奶.不加糖 字体:[增加 减小] 类型:转载 时间:2015-12-03我要评论 这篇文章主要介绍了Android编程中的5种数据存储方式,结合实例形式 ...
- 关于 HTML5、Jquery、Phonegap 跨域问题的研究
近期研究Phonegap的相关技术,遇到了服务资源访问的跨域.经过尝试使用服务器端的代理,Phonegap打包后不能够访问到相应资源.在搜索引擎的帮助下,找到了Jquery的jsonp的方式,尝试发现 ...
- Redis数据备份和重启恢复
一.对Redis持久化的探讨与理解 目前Redis持久化的方式有两种: RDB 和 AOF 首先,我们应该明确持久化的数据有什么用,答案是用于重启后的数据恢复. Redis是一个内存数据库,无论是RD ...
- tableView等滚动视图滚动时收缩上下导航栏与标签栏
代码如下,今天有点忙,不想细说了,看不明白可以联系我 // // LQXViewController.m // LQXCallBackBar // // Created by 刘祺旭 on 15/4/ ...