首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例

Posted in Javascript onAugust 29, 2017

发布者订阅者模式，是一种很常见的模式，比如:

一、买卖房子

生活中的买房，卖房，中介就构成了一个发布订阅者模式，买房的人，一般需要的是房源，价格，使用面积等信息，他充当了订阅者的角色

中介拿到卖主的房源信息，根据手头上掌握的客户联系信息(买房的人的手机号)，通知买房的人，他充当了发布者的角色

卖主想卖掉自己的房子，就需要告诉中介，把信息交给中介发布

二，网站订阅信息的用户

订阅者角色：需要订阅某类信息的网民，如某个网站的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高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例

- Author -

ghostwu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
js使用递归解析xml
Dec 12 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
vue组件生命周期详解
Nov 07 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
基于canvas实现手写签名（vue）
May 21 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
使用canvas进行图像编辑的实例
Aug 29 #Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 #jQuery
js使用html2canvas实现屏幕截取的示例代码
Aug 28 #Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 #Javascript
Angular4开发解决跨域问题详解
Aug 28 #Javascript
JavaScript实现各种排序的代码详解
Aug 28 #Javascript
JS如何设置元素样式的方法示例
Aug 28 #Javascript
北美洲购物网站(1) 马耳他购物网站(1) 罗马尼亚购物网站(10) 乌克兰购物网站(27) 亚洲购物网站(6) 越南购物网站(9) 摩纳哥购物网站(1) 巴基斯坦购物网站(2) 缅甸购物网站(1) 希腊购物网站(6)
You might like
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
JS左右无缝滚动（一般方法+面向对象方法）
2012/08/17 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
js微信分享实现代码
2020/10/11 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
浅析 Vue 3.0 的组装式 API（一）
2020/08/31 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
python采集百度百科的方法
2015/06/05 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
在python中实现对list求和及求积
2018/11/14 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
python 模拟登陆163邮箱
2020/12/15 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
Clarks鞋法国官方网站：英国其乐鞋品牌
2018/02/11 全球购物
大四学年自我鉴定
2013/11/13 职场文书
心理学专业求职信
2014/06/16 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2015年环保局工作总结
2015/05/22 职场文书
回复函范文
2015/07/14 职场文书
Java spring定时任务详解
2021/10/05 Java/Android