js设计模式之代理模式及订阅发布模式实例详解


Posted in Javascript onAugust 15, 2019

本文实例讲述了js设计模式之代理模式及订阅发布模式。分享给大家供大家参考,具体如下:

为啥将两种模式放在一起呢?因为这样文章比较长啊。

写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系。知识成为个人的知识,就在于能够用自己的话表达同一种意义。

本文是设计模式系列文章的第二篇文章,第一篇:。

1,代理模式,只是学习了虚拟代理以及缓存代理,具体案例

1)虚拟代理

//业务代码
var myImage = (function() {
    var imgNode = document.createElement("img");
    document.body.appendChild(imgNode);
    return {
      setSrc: function(src) {
        console.log(1111);
        imgNode.src = src;
      }
    }
})();
// 设计模式代码
var ProxyImage = (function() {
    var img = new Image();
    //这个img只是用来判断图片是否加载完成,加载完成之后修改图片链接
    img.onload = function() {
      console.log(this);
      myImage.setSrc(this.src);
    };
    return {
      setSrc: function(src) {
        console.log(22);
        myImage.setSrc("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif");
        img.src = src;
      }
    }
})();

这个例子好吧,拿来主义。说一下自己的理解:上面的业务代码实现的是将一个图片dom插入到dom树之中,代理模式则是通过创建一个新的img元素,通过判断onload判断是否加载完成,然后替换原有链接。

2)下面是缓存代理:

<script>
//缓存代理
// 计算乘法
var mult = function() {
    var a = 1;
    for (var i = 0, ilen = arguments.length; i < ilen; i += 1) {
      a = a * arguments[i];
    }
    return a;
};
// 代理函数
var proxyFunc = function(fn) {
    var cache = {}; // 缓存对象
    return function() {
      //利用闭包
      var args = Array.prototype.join.call(arguments);
      if (args in cache) {
        return cache[args]; // 使用缓存代理
      }
      return cache[args] = fn.apply(this, arguments);
    }
};
var proxyMult = proxyFunc(mult);
console.log(proxyMult(1, 2, 3, 4)); // 24
console.log(proxyMult(1, 2, 3, 4)); // 缓存取 24
</script>

运行结果:

js设计模式之代理模式及订阅发布模式实例详解

就是利用闭包实现原有计算数据的缓存。

2,订阅发布模式

<script>
var Event = (function(){
  var list = {},
     listen,
     trigger,
     remove;
     //添加订阅对象
     listen = function(key,fn){
      if(!list[key]) {
        list[key] = [];
      }
      list[key].push(fn);
    };
    //触发订阅内容
    trigger = function(){
      var key = Array.prototype.shift.call(arguments),
         fns = list[key];
      if(!fns || fns.length === 0) {
        return false;
      }
      for(var i = 0, fn; fn = fns[i++];) {
        fn.apply(this,arguments);
      }
    };
    //删除订阅内容
    remove = function(key,fn){
      var fns = list[key];
      if(!fns) {
        return false;
      }
      if(!fn) {
        fns && (fns.length = 0);
      }else {
        for(var i = fns.length - 1; i >= 0; i--){
          var _fn = fns[i];
          if(_fn === fn) {
            fns.splice(i,1);
          }
        }
      }
    };
    return {
      listen: listen,
      trigger: trigger,
      remove: remove
    }
})();
// 测试代码如下:
Event.listen("color",function(size) {
  console.log("尺码为:"+size); // 打印出尺码为42
});
Event.trigger("color",42);
</script>

运行结果:

js设计模式之代理模式及订阅发布模式实例详解

本质上,上述的发布订阅只是一个数组的增删改查。缓存下增删改查。

本文结束。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
layui数据表格跨行自动合并的例子
Sep 02 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 #Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 #Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 #Javascript
vue的keep-alive用法技巧
Aug 15 #Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 #Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 #Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 #Javascript
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
2014过年倒计时示例
2014/01/31 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
jquery validate demo 基础
2015/10/29 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Python pandas库中的isnull()详解
2019/12/26 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
python 实现性别识别
2020/11/21 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
热爱祖国演讲稿
2014/05/04 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
关于教师节的广播稿
2015/08/19 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
2019年最新借条范本!
2019/07/08 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis