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 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jquery选择器使用详解
Apr 08 Javascript
纯javascript版日历控件
Nov 24 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
使用Javascript简单计算器
Nov 17 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
vue实现点击展开点击收起效果
2018/04/27 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
详解javascript void(0)
2020/07/13 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python splitlines使用技巧
2008/09/06 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python基于百度云文字识别API
2018/12/13 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
大一期末自我鉴定
2013/12/13 职场文书
小学门卫岗位职责
2013/12/17 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
中央空调节能方案
2014/06/15 职场文书
建筑施工安全责任书
2014/07/24 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
MySQL详细讲解变量variables的用法
2022/06/21 MySQL