深入理解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的温度计动画效果
Jun 18 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
浅谈javascript如何获取文件后缀名
Aug 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实现斐波那契数列的简单写法
2014/07/19 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
python实现人人网登录示例分享
2014/01/19 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
通过Pandas读取大文件的实例
2018/06/07 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
总经理助理岗位职责
2013/11/08 职场文书
审核会计岗位职责
2013/11/08 职场文书
移动通信专业自荐信范文
2013/11/12 职场文书
车间班长岗位职责
2013/11/30 职场文书
会计专业导师推荐信
2014/03/08 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
2014财务年度工作总结
2014/11/11 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL