深入理解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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
原生js实现each方法实例代码详解
May 27 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
javascript实现前端成语点击验证
Jun 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开发中的错误收集,不定期更新。
2011/02/03 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
Python编程入门的一些基本知识
2015/05/13 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
干部现实表现材料
2014/02/13 职场文书
运动会广播稿20字
2014/02/18 职场文书
公休请假条
2014/04/11 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
体育委员竞选稿
2015/11/21 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫