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实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
react使用CSS实现react动画功能示例
May 18 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中str_replace函数使用小结
2008/10/11 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
jQuery实现全选按钮
2021/01/01 jQuery
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
python numpy数组中的复制知识解析
2020/02/03 Python
django正续或者倒序查库实例
2020/05/19 Python
python 利用toapi库自动生成api
2020/10/19 Python
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
财务部经理岗位职责
2014/02/03 职场文书
学籍证明模板
2014/11/21 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
《藏戏》教学反思
2016/02/23 职场文书