[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
发布者订阅者模式，是一种很常见的模式，比如:
一、买卖房子
生活中的买房，卖房，中介就构成了一个发布订阅者模式，买房的人，一般需要的是房源，价格，使用面积等信息，他充当了订阅者的角色
中介拿到卖主的房源信息，根据手头上掌握的客户联系信息(买房的人的手机号)，通知买房的人，他充当了发布者的角色
卖主想卖掉自己的房子，就需要告诉中介，把信息交给中介发布
二，网站订阅信息的用户
订阅者角色：需要订阅某类信息的网民，如某个网站的javascript类型文章
发布者角色：邮箱服务器，根据网站收集到的用户订阅邮箱，通知用户.
网站主想把信息告诉订阅者，需要把文章相关内容告诉邮箱服务器去发送
等等非常多的例子，不一一列举
本文用网站订阅的方式，推导发布者-订阅者框架，然后用发布者-订阅者框架来重构一个简单的购物车
var Site = {};
Site.userList = [];
Site.subscribe = function( fn ){
this.userList.push( fn );
}
Site.publish = function(){
for( var i = 0, len = this.userList.length; i < len; i++ ){
this.userList[i].apply( this, arguments );
}
}
Site.subscribe( function( type ){
console.log( "网站发布了" + type + "内容" );
});
Site.subscribe( function( type ){
console.log( "网站发布了" + type + "内容" );
});
Site.publish( 'javascript' );
Site.publish( 'html5' );
Site.userList就是用来保存订阅者
Site.subscribe就是具体的订阅者，把每一个订阅者订阅的具体信息保存在Site.userList
Site.publish就是发布者：根据保存的userList，一个个遍历(通知)，执行里面的业务逻辑
但是这个，发布订阅者模式，有个问题，不能订阅想要的类型，上例我加了2个订阅者(第11行,第14行)，只要网站发了信息，全部能收到，但是有些用户可能只想收到javascript或者html5的，所以，接下来，我们需要继续完善，希望能够接收到具体的信息，不是某人订阅的类型，就不接收
var Site = {};
Site.userList = {};
Site.subscribe = function (key, fn) {
if (!this.userList[key]) {
this.userList[key] = [];
}
this.userList[key].push(fn);
}
Site.publish = function () {
var key = Array.prototype.shift.apply(arguments),
fns = this.userList[key];
if ( !fns || fns.length === 0) {
console.log( '没有人订阅' + key + "这个分类的文章" );
return false;
}
for (var i = 0, len = fns.length; i < len; i++) {
fns[i].apply(this, arguments);
}
}
Site.subscribe( "javascript", function( title ){
console.log( title );
});
Site.subscribe( "es6", function( title ){
console.log( title );
});
Site.publish( "javascript", "[js高手之路]寄生组合式继承的优势" );
Site.publish( "es6", "[js高手之路]es6系列教程 - var, let, const详解" );
Site.publish( "html5", "html5新的语义化标签" );
输出结果:
[js高手之路]寄生组合式继承的优势
[js高手之路]es6系列教程 - var, let, const详解
没有人订阅html5这个分类的文章
我们可以看到，只有订阅了javascript类型文章的人，才能收到 ”寄生组合式继承的优势” 这篇文章，发布html5类型的时候，没有任何人会收到.
es6类型的，只有订阅es6的人，才能收到
我们已经有了一个基本的发布订阅者框架，接下来，把他完善成一个框架，便于其他功能或者其他网站系统的相同功能可以重用他
var Event = {
userList : {},
subscribe : function (key, fn) {
if (!this.userList[key]) {
this.userList[key] = [];
}
this.userList[key].push(fn);
},
publish : function () {
var key = Array.prototype.shift.apply(arguments),
fns = this.userList[key];
if (!fns || fns.length === 0) {
console.log('没有人订阅' + key + "这个分类的文章");
return false;
}
for (var i = 0, len = fns.length; i < len; i++) {
fns[i].apply(this, arguments);
}
}
};
var extend = function( dstObj, srcObj ){
for( var key in srcObj ){
dstObj[key] = srcObj[key];
}
}
var Site = {};
extend( Site, Event );
Site.subscribe( "javascript", function( title ){
console.log( title );
});
Site.subscribe( "es6", function( title ){
console.log( title );
});
Site.publish( "javascript", "寄生组合式继承的优势" );
Site.publish( "es6", "es6系列教程 - var, let, const详解" );
Site.publish( "html5", "html5新的语义化标签" );
然后，我们来重构一个购物车实例，没有重构之前，我的购物车用的是面向过程：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/cart.js"></script>
</head>
<body>
<div id="box">
<ul>
<li>
<input type="button" value="-">
<span class="num">0</span>
<input type="button" value="+">
<span>单价:</span>
<span class="unit">15元;</span>
<span class="label">小计:</span>
<span class="subtotal">0</span>元
</li>
<li>
<input type="button" value="-">
<span class="num">0</span>
<input type="button" value="+">
<span>单价:</span>
<span class="unit">10元;</span>
<span class="label">小计:</span>
<span class="subtotal">0</span>元
</li>
<li>
<input type="button" value="-">
<span class="num">0</span>
<input type="button" value="+">
<span>单价:</span>
<span class="unit">5元;</span>
<span class="label">小计:</span>
<span class="subtotal">0</span>元
</li>
<li>
<input type="button" value="-">
<span class="num">0</span>
<input type="button" value="+">
<span>单价:</span>
<span class="unit">2元;</span>
<span class="label">小计:</span>
<span class="subtotal">0</span>元
</li>
<li>
<input type="button" value="-">
<span class="num">0</span>
<input type="button" value="+">
<span>单价:</span>
<span class="unit">1元;</span>
<span class="label">小计:</span>
<span class="subtotal">0</span>元
</li>
</ul>
<div class="total-box">
商品一共
<span id="goods-num">0</span>
件;
一共花费
<span id="total-price">0</span>
元;
其中最贵的商品单价是<span id="unit-price">0</span>元
</div>
</div>
</body>
</html>
cart.js文件：
function getByClass(cName, obj) {
var o = null;
if (arguments.length == 2) {
o = obj;
} else {
o = document;
}
var allNode = o.getElementsByTagName("*");
var aNode = [];
for( var i = 0 ; i < allNode.length; i++ ){
if( allNode[i].className == cName ){
aNode.push( allNode[i] );
}
}
return aNode;
}
function getSubTotal( unitPrice, goodsNum ){
return unitPrice * goodsNum;
}
function getSum(){ //计算总花费
var aSubtotal = getByClass("subtotal");
var res = 0;
for( var i = 0; i < aSubtotal.length; i++ ){
res += parseInt(aSubtotal[i].innerHTML);
}
return res;
}
function compareUnit() { //比单价，找出最高的单价
var aNum = getByClass( "num");
var aUnit = getByClass( "unit");
var temp = 0;
for( var i = 0; i < aNum.length; i++ ){
if( parseInt(aNum[i].innerHTML) != 0 ){
if( temp < parseInt(aUnit[i].innerHTML) ) {
temp = parseInt(aUnit[i].innerHTML);
}
}
}
return temp;
}
window.onload = function () {
var aInput = document.getElementsByTagName("input");
var total = 0;
var oGoodsNum = document.getElementById("goods-num");
var oTotalPrice = document.getElementById("total-price");
var oUnitPrice = document.getElementById("unit-price");
for (var i = 0; i < aInput.length; i++) {
if (i % 2 != 0) { //加号
aInput[i].onclick = function () {
//当前加号所在行的数量
var aNum = getByClass( "num", this.parentNode );
var n = parseInt( aNum[0].innerHTML );
n++;
aNum[0].innerHTML = n;
//获取单价
var aUnit = getByClass( "unit", this.parentNode );
var unitPrice = parseInt(aUnit[0].innerHTML);
var subtotal = getSubTotal( unitPrice, n );
var aSubtotal = getByClass( "subtotal", this.parentNode );
aSubtotal[0].innerHTML = subtotal;
total++; //商品总数
oGoodsNum.innerHTML = total;
oTotalPrice.innerHTML = getSum();
oUnitPrice.innerHTML = compareUnit();
}
}else {
aInput[i].onclick = function(){
var aNum = getByClass( "num", this.parentNode );
if ( parseInt( aNum[0].innerHTML ) != 0 ){
var n = parseInt( aNum[0].innerHTML );
n--;
aNum[0].innerHTML = n;
//获取单价
var aUnit = getByClass( "unit", this.parentNode );
var unitPrice = parseInt(aUnit[0].innerHTML);
var subtotal = getSubTotal( unitPrice, n );
var aSubtotal = getByClass( "subtotal", this.parentNode );
aSubtotal[0].innerHTML = subtotal;
total--; //商品总数
oGoodsNum.innerHTML = total;
oTotalPrice.innerHTML = getSum();
oUnitPrice.innerHTML = compareUnit();
}
}
}
}
}
耦合度太高，可维护性很差.
重构之后的购物车:
window.onload = function () {
var Event = {
userList: {},
subscribe: function (key, fn) {
if (!this.userList[key]) {
this.userList[key] = [];
}
this.userList[key].push(fn);
},
publish: function () {
var key = Array.prototype.shift.apply(arguments),
fns = this.userList[key];
if (!fns || fns.length === 0) {
return false;
}
for (var i = 0, len = fns.length; i < len; i++) {
fns[i].apply(this, arguments);
}
}
};
(function(){
var aBtnMinus = document.querySelectorAll( "#box li>input:first-child"),
aBtnPlus = document.querySelectorAll( "#box li>input:nth-of-type(2)"),
curNum = 0, curUnitPrice = 0;
for( var i = 0, len = aBtnMinus.length; i < len; i++ ){
aBtnMinus[i].index = aBtnPlus[i].index = i;
aBtnMinus[i].onclick = function(){
(this.parentNode.children[1].innerHTML > 0) && Event.publish( "total-goods-num-minus" );
--this.parentNode.children[1].innerHTML < 0 && (this.parentNode.children[1].innerHTML = 0);
curUnitPrice = this.parentNode.children[4].innerHTML;
Event.publish( "minus-num" + this.index,
parseInt( curUnitPrice ),
parseInt( this.parentNode.children[1].innerHTML )
);
};
aBtnPlus[i].onclick = function(){
(this.parentNode.children[1].innerHTML >= 0) && Event.publish( "total-goods-num-plus" );
this.parentNode.children[1].innerHTML++;
curUnitPrice = this.parentNode.children[4].innerHTML;
Event.publish( "plus-num" + this.index,
parseInt( curUnitPrice ),
parseInt( this.parentNode.children[1].innerHTML )
);
}
}
})();
(function(){
var aSubtotal = document.querySelectorAll("#box .subtotal"),
oGoodsNum = document.querySelector("#goods-num"),
oTotalPrice = document.querySelector("#total-price");
Event.subscribe( 'total-goods-num-plus', function(){
++oGoodsNum.innerHTML;
});
Event.subscribe( 'total-goods-num-minus', function(){
--oGoodsNum.innerHTML;
});
for( let i = 0, len = aSubtotal.length; i < len; i++ ){
Event.subscribe( 'minus-num' + i, function( unitPrice, num ){
aSubtotal[i].innerHTML = unitPrice * num;
});
Event.subscribe( 'plus-num' + i, function( unitPrice, num ){
aSubtotal[i].innerHTML = unitPrice * num;
});
}
})();
console.log( Event.userList );
}
以上这篇[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
Javascript设计模式之观察者模式的多个实现版本实例
介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. 使用观察者模式的好处: 1.支持简单的广播通信,自动通知所有已经订阅过的对象. 2.页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性. 3.目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用. 正文(版本一) JS里对观察者模式的实现是通过回调来实现的,我们来先
-
JavaScript设计模式之观察者模式（发布者-订阅者模式）
观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 复制代码 代码如下: div.onclick = function click (){ alert ( "click' ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发. 那么到底什么是观察者模式呢. 先看看生活中的观察者模式. 好莱坞有句名言. "不要给我
-
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房源信息,根据手头上掌握的客户联系信息(买房的人的手机号),通知买房的人,他充当了发布者的角色 卖主想卖掉自己的房子,就需要告诉中介,把信息交给中介发布 二,网站订阅信息的用户 订阅者角色:需要订阅某类信息的网民,如某个网站的javascript类型文章 发布者角色:邮箱服务器,根据网站收集到的用户订
-
![[js高手之路]单例模式实现模态框的示例](/assets/blank.gif)
[js高手之路]单例模式实现模态框的示例
什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,一般来说在网站中弹出的模态框,不停的一直点击,一般只能创建一个.还有后台的数据库连接,一般都是保证一个连接等等.今天的主题就是单例在模态框中的应用,我们先要搞清楚,怎么弄个单例出来. 我们先看下普通的构造函数加原型方式.下面这种是常见的方式 function Singleton (
-
[js高手之路]寄生组合式继承的优势详解
在之前javascript面向对象系列的文章里面,我们已经探讨了组合继承和寄生继承,回顾下组合继承: function Person( uName ){ this.skills = [ 'php', 'javascript' ]; this.userName = uName; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher ( uName ){ Person.call(
-
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('卫庄')
-
[js高手之路]从原型链开始图解继承到组合继承的产生详解
于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 function Person(){ this.userName = 'ghostwu'; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher (){} Teacher.protot
-
[js高手之路]HTML标签解释成DOM节点的实现方法
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这篇文章要讲的就是我在写框架过程中碰到的一个问题,封装jquery的after方法,支持DOM和html标签两种用法,html标签传参,我要把html解释成DOM结构,用DOM的方法插入. 首先,我们写个通用的html标签: <div onclick
-
[js高手之路]原型式继承与寄生式继承详解
一.原型式继承本质其实就是个浅拷贝,以一个对象为模板复制出新的对象 function object( o ){ var G = function(){}; G.prototype = o; return new G(); } var obj = { name : 'ghostwu', age : 22, show : function(){ return this.name + ',' + this.age; } }; var obj2 = object( obj ); console.log(
-
设计模式系列之组合模式及其在JDK和MyBatis源码中的运用详解
组合模式及其在JDK源码中的运用 前言组合和聚合什么是组合模式示例透明组合模式透明组合模式的缺陷安全组合模式 组合模式角色组合模式在JDK源码中的体现组合模式应用场景享元模式优缺点总结 前言 本文主要会讲述组合模式的用法,并会结合在JDK和MyBatis源码中的运用来进一步理解组合模式. 在编码原则中,有一条是:多用组合,少用继承.当然这里的组合和我们今天要讲的组合模式并不等价,这里的组合其实就是一种聚合,那么聚合和组合有什么区别呢? 组合和聚合 人在一起叫团伙,心在一起叫团队.用这句话来诠释组
-
Android设计模式系列之组合模式
Android中对组合模式的应用,可谓是泛滥成粥,随处可见,那就是View和ViewGroup类的使用.在android UI设计,几乎所有的widget和布局类都依靠这两个类. 组合模式,Composite Pattern,是一个非常巧妙的模式.几乎所有的面向对象系统都应用到了组合模式. 1.意图 将对象View和ViewGroup组合成树形结构以表示"部分-整体"的层次结构(View可以做为ViewGroup的一部分). 组合模式使得用户对单个对象View和组合对象ViewGrou