深入理解JavaScript系列(35):设计模式之迭代器模式详解


Posted in Javascript onMarch 03, 2015

介绍

迭代器模式(Iterator):提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示。

迭代器的几个特点是:

1.访问一个聚合对象的内容而无需暴露它的内部表示。
2.为遍历不同的集合结构提供一个统一的接口,从而支持同样的算法在不同的集合结构上进行操作。
3.遍历的同时更改迭代器所在的集合结构可能会导致问题(比如C#的foreach里不允许修改item)。

正文

一般的迭代,我们至少要有2个方法,hasNext()和Next(),这样才做做到遍历所有对象,我们先给出一个例子:

var agg = (function () {

    var index = 0,

    data = [1, 2, 3, 4, 5],

    length = data.length;
    return {

        next: function () {

            var element;

            if (!this.hasNext()) {

                return null;

            }

            element = data[index];

            index = index + 2;

            return element;

        },
        hasNext: function () {

            return index < length;

        },
        rewind: function () {

            index = 0;

        },
        current: function () {

            return data[index];

        }
    };

} ());

使用方法和平时C#里的方式是一样的:
// 迭代的结果是:1,3,5

while (agg.hasNext()) {

    console.log(agg.next());

}

当然,你也可以通过额外的方法来重置数据,然后再继续其它操作:
// 重置

agg.rewind();

console.log(agg.current()); // 1

jQuery应用例子

jQuery里一个非常有名的迭代器就是$.each方法,通过each我们可以传入额外的function,然后来对所有的item项进行迭代操作,例如:

$.each(['dudu', 'dudu', '酸奶小妹', '那个MM'], function (index, value) {

    console.log(index + ': ' + value);

});

//或者

$('li').each(function (index) {

    console.log(index + ': ' + $(this).text());

});

总结

迭代器的使用场景是:对于集合内部结果常常变化各异,我们不想暴露其内部结构的话,但又响让客户代码透明底访问其中的元素,这种情况下我们可以使用迭代器模式。

Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
javascript 禁止复制网页
Jun 11 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
记一次vue跨域的解决
Oct 21 Javascript
如何用threejs实现实时多边形折射
May 07 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 #Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 #Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 #Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 #Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 #Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 #Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 #Javascript
You might like
PHP实现简单搜歌的方法
2015/07/28 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
js继承的实现代码
2010/08/05 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
深入解析Python中的线程同步方法
2016/06/14 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python实现视频下载功能
2017/03/14 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
欢迎标语大全
2014/06/21 职场文书
体育教师研修感悟
2015/11/18 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
nginx内存池源码解析
2021/11/20 Servers
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS