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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 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
ADODB类使用
2006/11/25 PHP
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python中的闭包实例详解
2014/08/29 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Django框架封装外部函数示例
2019/05/28 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
高考考python编程是真的吗
2020/07/20 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
2014年端午节活动方案
2014/03/11 职场文书
法人代表授权委托书
2014/04/08 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Python实现排序方法常见的四种
2021/07/15 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS