javascript设计模式 ? 迭代器模式原理与用法实例分析


Posted in Javascript onApril 17, 2020

本文实例讲述了javascript设计模式 ? 迭代器模式原理与用法。分享给大家供大家参考,具体如下:

介绍:迭代器模式是一种使用频率非常高的设计模式,通过引入迭代器,可以将数据的遍历功能从聚合对象中分离出来。迭代器模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示。

定义:提供一种方法来访问聚合对象,而不用暴露这个对象的内部表示,其别名为游标(Cursor)。迭代器模式是一种对象行为型模式。

场景:我们做一个百家姓的迭代器

示例:

function NameRepository(){
  var names = ['赵','钱','孙','李'];
 
  this.getIterator = function(){
    return new NameIterator();
  }
 
  function NameIterator(){
    var index = 0;
    //判断是否存在下一个元素
    this.hasNext = function(){
      return index < names.length;
    }
    //将游标指向第一个元素
    this.first = function(){
      index = 0;
    }
    //获取游标指向的当前元素
    this.currentItem = function(){
      return names[index];
    }
    this.next = function(){
      if(this.hasNext()){
        return names[index++]
      }
      return null;
    }
  }
}
 
var nameRepository = new NameRepository();
for(var iter = nameRepository.getIterator(); iter.hasNext();){
  console.log(iter.next())
}
// 赵
// 钱
// 孙
// 李

例子中NameIterator称为具体迭代器,它实现了对聚合对象的遍历,通过游标index来记录聚合对象当前位置,游标通常为一个表示位置的非负整数。

需要注意的是迭代器的接口设计非常重要,一方面要充分满足各种遍历操作的要求,另一方面又不能包含太多方法。

迭代器模式总结:

优点:
* 支持以不同的方式遍历一个聚合对象,在同一个聚合对象上可以定义多种遍历方式
* 迭代器简化了聚合类,原有的聚合对象不需要自行提供数据遍历方法。

缺点:
* 迭代器模式将存储数据和遍历数据的职责分离,一定程度增加了系统的复杂性
* 迭代器设计难度较大,需要充分考虑可扩展性。

适用场景:
* 访问一个聚合对象的内容而无须暴露它的内部表示。
* 需要为一个聚合对象提供多种遍历方式
* 为便利不同的聚合结构提供一个统一的接口,为不同的聚合结构实现不同的遍历方式。

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

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

Javascript 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
javascript的push使用指南
Dec 05 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
vue制作抓娃娃机的示例代码
Apr 17 #Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 #Javascript
tracking.js实现前端人脸识别功能
Apr 16 #Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 #Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 #Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 #Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 #Javascript
You might like
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
读书活动实施方案
2014/03/10 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
教师党员自我评价2015
2015/03/04 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
python全面解析接口返回数据
2022/02/12 Python