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 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
js创建元素(节点)示例
Jan 02 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
jQuery返回定位插件详解
May 15 jQuery
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
Openlayers学习之地图比例尺控件
Sep 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
修改发贴的编辑功能
2007/03/07 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
如何快速上手Vuex
2017/02/14 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
vue代理和跨域问题的解决
2018/07/18 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python调用C++程序的方法详解
2017/01/24 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python统计单词出现的次数
2018/04/04 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
学生拾金不昧表扬信
2014/01/21 职场文书
《猫》教学反思
2014/02/26 职场文书
党支部审查意见
2015/06/02 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
正确的理解和使用Django信号(Signals)
2021/04/14 Python