深入理解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 相关文章推荐
jquery实现搜索框常见效果的方法
Jan 22 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
使用vue for时为什么要key【推荐】
Jul 11 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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日历制作代码分享
2014/01/20 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Django的CVB实例详解
2020/02/10 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
python中如何使用虚拟环境
2020/10/14 Python
pandas针对excel处理的实现
2021/01/15 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
小学教师师德感言
2014/02/10 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
五一手机促销方案
2014/03/08 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
求职信名称怎么写
2014/05/26 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python