深入理解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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
围观tangram js库
Dec 28 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 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数据流应用的简单例子
2012/06/01 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
详解参数传递四种形式
2015/07/21 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
layui实现三级联动效果
2019/07/26 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
python对象与json相互转换的方法
2019/05/07 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
python selenium 获取接口数据的实现
2020/12/07 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
积极分子思想汇报
2014/01/04 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
开除通知书范本
2015/04/25 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
捐书仪式主持词
2015/07/04 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers