javascript 观察者(发布订阅)模式详解

写给读者的话

本人是千千万万前端小白中的一员，所以对前端小白的痛苦感同身受，面对一个新的知识点，很多时候感到束手无策。网上搜资料，有的不全，有的看不懂，所以本人作为小白，很有义务将自己觉得理解了的知识点尽可能的解释的通熟易懂，恨不得一个字一个字的解释。但是别人的终究是别人的，把它变成自己的才是正道，希望此文能帮助像我一样的人更好的理解mvc，一起加油吧

先上demo代码，下面有详尽分析

index.js

function Event(sender) {this._sender = sender;this._listeners = [];
}Event.prototype = {constructor : Event,attach: function (listener) {this._listeners.push(listener);},notify: function (args) {var index;for (index = 0; index < this._listeners.length; index += 1) {this._listeners[index](this._sender, args);}}
};function ListModel(items) {this._items = items;this._selectedIndex = -1;this.itemAdded = new Event(this);this.itemRemoved = new Event(this);this.selectedIndexChanged = new Event(this);
}ListModel.prototype = {constructor : ListModel,getItems: function () {return [].concat(this._items);},addItem: function (item) {this._items.push(item);this.itemAdded.notify({item: item});},removeItemAt: function (index) {var item;item = this._items[index];this._items.splice(index, 1);this.itemRemoved.notify({item: item});if (index === this._selectedIndex) {this.setSelectedIndex(-1);}},getSelectedIndex: function () {return this._selectedIndex;},setSelectedIndex: function (index) {var previousIndex;previousIndex = this._selectedIndex;this._selectedIndex = index;this.selectedIndexChanged.notify({previous: previousIndex});}
};function ListView(model, elements) {this._model = model;this._elements = elements;this.listModified = new Event(this);this.addButtonClicked = new Event(this);this.delButtonClicked = new Event(this);var _this = this;// attach model listenersthis._model.itemAdded.attach(function () {_this.rebuildList();});this._model.itemRemoved.attach(function () {_this.rebuildList();});// attach listeners to HTML controlsthis._elements.list.change(function (e) {_this.listModified.notify({index: e.target.selectedIndex});});this._elements.addButton.click(function () {_this.addButtonClicked.notify();});this._elements.delButton.click(function () {_this.delButtonClicked.notify();});
}ListView.prototype = {constructor : ListView,show: function () {this.rebuildList();},rebuildList: function () {var list, items, key;list = this._elements.list;list.html('');items = this._model.getItems();for (key in items) {if (items.hasOwnProperty(key)) {list.append($('<option>' + items[key] + '</option>'));}}this._model.setSelectedIndex(-1);}
};function ListController(model, view) {this._model = model;this._view = view;var _this = this;this._view.listModified.attach(function (sender, args) {_this.updateSelected(args.index);});this._view.addButtonClicked.attach(function () {_this.addItem();});this._view.delButtonClicked.attach(function () {_this.delItem();});
}ListController.prototype = {constructor : ListController,addItem: function () {var item = window.prompt('Add item:', '');if (item) {this._model.addItem(item);}},delItem: function () {var index;index = this._model.getSelectedIndex();if (index !== -1) {this._model.removeItemAt(this._model.getSelectedIndex());}},updateSelected: function (index) {this._model.setSelectedIndex(index);}
};$(function () {var model = new ListModel(['PHP', 'JavaScript']),view = new ListView(model, {'list': $('#list'),'addButton': $('#plusBtn'),'delButton': $('#minusBtn')}),controller = new ListController(model, view);view.show();
});

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MVC</title>
</head>
<body><select id="list" size="10" style="width: 10rem"></select><br/><button id="plusBtn">  +  </button><button id="minusBtn">  -  </button>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script src="index.js"></script>
</html>

MVC模式说明：

model层和view层都继承了观察者类，观察者类中包含订阅和发布方法

model层定义了底层操作，包括对数据的增删改查

view层绑定了增删改事件，一旦所绑定的事件发生，就调用观察者类中的发布方法发布消息；同时又订阅了model层数据的变动，一旦所订阅的model层的数据发生变化，就调用view层自身方法更新数据显示

controller层订阅了view层的增删改事件，一旦所订阅的事件发布了，就调用自身的方法经过业务逻辑的处理，调用相应的model层的方法

针对代码做具体分析：

见下图：

首先页面加载执行初始化代码，执行完成后页面上会有一个列表，里面包含两个选项：PHP和Javascript，然后底下有"+"和"-"两个按钮，以点击"+"为例，流程分析开始：

首先定义了一个观察者Event构造函数

view层中绑定了增删改事件，同时订阅了model层数据改动事件;

我们点击"+"号按钮，触发了view层中的addButton的click事件，然后addButtonClicked调用观察者构造函数的发布方法notify()发布消息，代码如下：

    this._elements.addButton.click(function () {_this.addButtonClicked.notify();});

4.由于在controller层中订阅了view层的addButtonClicked发布的消息，将addItem()保存在其对应的listener数组中，所以此时执行_this.addItem()，代码如下：

    this._view.addButtonClicked.attach(function () {_this.addItem();});

5.在controller层中的addItem()方法中，如果有item输入，就调用model层中的addItem(item)并传入item，代码如下：

    addItem: function () {var item = window.prompt('Add item:', '');if (item) {this._model.addItem(item);}}

6.在model层中的itemAdd()方法中，获取到controller层中传过来的item之后，将其保存到this.item数组中，然后model层中的item调用notify()发布消息，代码如下：

    addItem: function (item) {this._items.push(item);this.itemAdded.notify({item: item});}

7.由于在view层中订阅了model层的itemAdd发布的消息，将rebuildList()保存在其对应的listener数组中，所以此时执行_this.rebuildList()，代码如下：

    this._model.itemAdded.attach(function () {_this.rebuildList();});

8.view层中的rebuildList()干的事情就是每次都先清空列表内容，然后重新获取内容，再循环添加到列表中，最后调用model层中的setSelectedIndex(-1)把选中项的index还原为-1，代码如下：

    rebuildList: function () {var list, items, key;list = this._elements.list;list.html('');items = this._model.getItems();for (key in items) {if (items.hasOwnProperty(key)) {list.append($('<option>' + items[key] + '</option>'));}}this._model.setSelectedIndex(-1);}

9.model层中的setSelectedIndex()干的事情就是把上一次的选中项的index和当前选中项的index进行交换，然后model层中的selectedIndexChanged调用notify()发布消息，代码如下：

    setSelectedIndex: function (index) {var previousIndex;previousIndex = this._selectedIndex;this._selectedIndex = index;this.selectedIndexChanged.notify({previous: previousIndex});}

10.你会发现view层中没有对selectedIndexChanged的订阅，那写起来干嘛呢？就是留着以后进行扩展用的，你可以继续按照这个模式写下去

MVC的优点：

耦合性低：视图层和业务层分离了，如果页面上显示改变的话，直接在视图层更改即可，不用动模型层和控制层上的代码;也就是视图层与模型层和控制层

已经分离了;所以很容易改变应用层的数据层和业务规则。

可维护性：分离视图层和业务逻辑层也使得WEB应用更易于维护和修改。

MVC的缺点：

个人觉得适合于大型项目，对于中小型项目并不适合，因为要实现一个简单的增删改操作，只需要一点点JS代码，但是MVC模式代码量明显增加了。

希望此文对你有帮助，如有疑问和错误，请告诉我，谢谢！

参考资料：

https://alexatnet.com/article...

http://web.jobbole.com/84945/

javascript 观察者(发布订阅)模式详解相关推荐

redis发布订阅模式详解
文章目录写在前面发布订阅的使用 SUBSCRIBE命令 PUBLISH命令注意发布.订阅客户端启动顺序! PUBSUB命令 PUNSUBSCRIBE命令 UNSUBSCRIBE命令 PSUBSC ...
用 JavaScript 实现发布/订阅模式
重要申明:感谢原文作者--杠子,想看原文请戳这里!我转载了原文,修改了一些原文行文不通畅之处,并更改附上了自己的代码段,望请勿怪.挂在自己的博客下面一方面是为了收藏好文,方便自己温顾而知新:另一方面也 ...
JavaScript中发布/订阅模式的理解
订阅发布模式的介绍发布订阅模式,它定义了一种一对多的关系,可以使多个观察者对象对一个主题对象进行监听,当这个主题对象发生改变时,依赖的所有对象都会被通知到. 在生活中我们常常遇到这样一种情况,我们在 ...
JavaScript的发布订阅模式
这里要说明一下什么是发布-订阅模式. 发布-订阅模式里面包含了三个模块,发布者,订阅者和处理中心.这里处理中心相当于报刊办事大厅. 发布者相当与某个杂志负责人,他来中心这注册一个的杂志,而订阅者相当于 ...
【javascript】的严格模式详解
一.概述除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. ...
Javascript设计模式之发布-订阅模式
简介发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...
[设计模式] ------ 观察者模式和他的升级版发布订阅模式
概念观察者模式,原理很简单,把A类的子类分别注入到B类中,通过用B类调用方法,循环调用A类的方法,就是所谓观察者模式伪代码如下,最快的速度理解观察者模式: 接口 A{// 观察者接口notify( ...
ZMQ模式详解——发布/订阅模式
一个例子 1.一个服务器负责生成天气相关数据(邮编.温度.湿度),然后将这些数据发布到所有需要知悉天气的客户端: 2.一个客户端需要时刻更新和获取最新的邮政编码,在没有获取之前可默认为纽约地区. ## ...
JavaScript 设计模式之观察者模式与发布订阅模式
前言在软体工程中,设计模式(design pattern)是对软体设计中普遍存在(反复出现)的各种问题,所提出的解决方案. 设计模式并不直接用来完成程式码的编写,而是描述在各种不同情况下,要怎么解决 ...