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 相关文章推荐
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
Typescript3.9 常用新特性一览(推荐)
May 14 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从FLV文件获取视频预览图的方法
2015/03/12 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
大学活动总结模板
2014/07/10 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
歼十出击观后感
2015/06/11 职场文书
新兵入伍决心书
2015/09/22 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
创业计划书之物流运送
2019/09/17 职场文书