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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
JavaScript实现世界各地时间显示
Sep 07 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
python2.7到3.x迁移指南
2018/02/01 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
生物学学生自我评价
2014/01/17 职场文书
财务科科长岗位职责
2014/03/10 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL