深入理解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 捕获窗口关闭事件
Jul 26 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
详解Vue.js中.native修饰符
Apr 24 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
Ant design vue中的联动选择取消操作
Oct 31 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的网址
2006/11/25 PHP
需要发散思维学习PHP
2009/06/29 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
python的即时标记项目练习笔记
2014/09/18 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
Python Flask-web表单使用详解
2017/11/18 Python
python脚本实现验证码识别
2018/06/07 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
小学优秀班主任事迹材料
2014/05/17 职场文书
诚信贷款承诺书
2014/05/30 职场文书
宣传口号大全
2014/06/16 职场文书
欢迎领导标语
2014/06/27 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
2016年教代会开幕词
2016/03/04 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
AJAX学习笔记
2021/05/18 Javascript
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技