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 相关文章推荐
基于jQuery的倒计时实现代码
May 30 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
原生JS实现pc端轮播图效果
Dec 21 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
初识Laravel
2014/10/30 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
javascript 模拟点击广告
2010/01/02 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
图片加载完成再执行事件的实例
2017/11/16 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
python实现两个文件合并功能
2018/04/01 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
Python JSON编解码方式原理详解
2020/01/20 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
关于Python解包知识点总结
2020/05/05 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
美术专业个人自我评价
2014/01/18 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
三下乡活动方案
2014/01/31 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
教师岗位职责范本
2015/04/02 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
Python 视频画质增强
2022/04/28 Python