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 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 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
php cookie使用方法学习笔记分享
2013/11/07 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
python基于multiprocessing的多进程创建方法
2015/06/04 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
pycharm永久激活超详细教程
2020/10/29 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
造型师求职自荐信
2013/09/27 职场文书
党员年终民主评议的自我评价
2013/11/05 职场文书
房地产活动策划方案
2014/05/14 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
单位车辆管理制度
2015/08/05 职场文书
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers