深入理解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 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
JS修改css样式style浅谈
May 06 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
JS匿名函数实例分析
Nov 26 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
Paypal支付不完全指北
Jun 04 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
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://input处理相同name值的表单数据
2015/02/03 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python实现剪切功能
2019/01/23 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
《第一次抱母亲》教学反思
2014/04/16 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
离婚协议书范本
2015/01/26 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
Python打包为exe详细教程
2021/05/18 Python
Python 视频画质增强
2022/04/28 Python
Mysql 一主多从的部署
2022/05/20 MySQL
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers