深入理解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获取整个页面文档的实现代码
Dec 15 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
js实现简单音乐播放器
Jun 30 Javascript
微信小程序实现页面左右滑动
Nov 16 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/06/05 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
详解vue数据渲染出现闪烁问题
2017/06/29 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
Python生成器generator用法示例
2018/08/10 Python
python第三方库学习笔记
2020/02/07 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
优秀社区干部事迹材料
2014/02/03 职场文书
2014教师研修学习体会
2014/07/08 职场文书
出售房屋委托书范本
2014/09/24 职场文书
信息合作协议书
2014/10/09 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
大学推普周活动总结
2015/05/07 职场文书
投资申请报告
2015/05/19 职场文书
基层工作经历证明
2015/06/19 职场文书
python基础之停用词过滤详解
2021/04/21 Python