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.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
jQuery ajax应用总结
Jun 02 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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变量的作用范围实例讲解
2020/12/22 PHP
Maps Javascript
2007/01/22 Javascript
用 JSON 处理缓存
2007/04/27 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
创建Django项目图文实例详解
2019/06/06 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
环保专项行动方案
2014/05/12 职场文书
导师工作推荐信范文
2014/05/17 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python