深入理解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 ajax获取网站Alexa排名的代码
Dec 12 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js倒计时抢购实例
Dec 20 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
JS实现简易留言板增删功能
Feb 08 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缓存类分享     php缓存机制
2014/01/22 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
python中time库的实例使用方法
2019/10/31 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
python打包生成so文件的实现
2020/10/30 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
作文批改评语大全
2014/04/23 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
决心书格式范文
2015/09/23 职场文书
python 批量压缩图片的脚本
2021/06/02 Python