jQuery迭代器
2016-01-15 16:09
806 查看
http://www.imooc.com/code/3417
jQuery中的$.each方法就是一个典型的迭代器,通过each我们可以传入额外的function,然后来对所有的item项进行迭代操作,如下代码:
针对迭代器,这里有几个特点:
☑ 访问一个聚合对象的内容而无需暴露它的内部。
☑ 为遍历不同的集合结构提供一个统一的接口,从而支持同样的算法在不同的集合结构上进行操作。
☑ 遍历的同时更改迭代器所在的集合结构可能会导致问题。
简单的说:封装实现,然后迭代器的聚合对象不用关心迭代的过程,从而符合SRP原则。
jQuery源码:静态方法
实例方法:
jQuery的实例方法最终也是调用的静态方法,我们在之前就解释过jQuery的实例与原型方法共享的设计。
迭代器
迭代器是一个框架的重要设计。我们经常需要提供一种方法顺序用来处理聚合对象中各个元素,而又不暴露该对象的内部,这也是设计模式中的迭代器模式(Iterator)。jQuery中的$.each方法就是一个典型的迭代器,通过each我们可以传入额外的function,然后来对所有的item项进行迭代操作,如下代码:
$.each([52, 97], function(index, value) { alert(index + ': ' + value); }); $( "li" ).each(function( index ) { console.log( index + ": "" + $(this).text() ); });
针对迭代器,这里有几个特点:
☑ 访问一个聚合对象的内容而无需暴露它的内部。
☑ 为遍历不同的集合结构提供一个统一的接口,从而支持同样的算法在不同的集合结构上进行操作。
☑ 遍历的同时更改迭代器所在的集合结构可能会导致问题。
简单的说:封装实现,然后迭代器的聚合对象不用关心迭代的过程,从而符合SRP原则。
jQuery源码:静态方法
// args is for internal usage only,
//并没有操作过obj。所以obj是不变的
each: function( obj, callback, args ) { var value, i = 0, length = obj.length, isArray = isArraylike( obj );//类数组的判断$("li")
if ( args ) { if ( isArray ) { for ( ; i < length; i++ ) { value = callback.apply( obj[ i ], args );//apply后面的参数得是个数组 if ( value === false ) {//所以在$.each里我们用return false跳出循环 break; } } } else { for ( i in obj ) { value = callback.apply( obj[ i ], args ); if ( value === false ) { break; } } } // A special, fast, case for the most common use of each } else { if ( isArray ) { for ( ; i < length; i++ ) { value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) { break; } } } else { for ( i in obj ) { value = callback.call( obj[ i ], i, obj[ i ] ); if ( value === false ) { break; } } } } return obj; }
实例方法:
each: function( callback, args ) { return jQuery.each( this, callback, args ); }
jQuery的实例方法最终也是调用的静态方法,我们在之前就解释过jQuery的实例与原型方法共享的设计。
相关文章推荐
- JQuery插件之ajaxFileUpload
- jquery ui 学习随笔 工具提示
- 封装jquery适配seajs模式
- JQuery Ajax
- Jquery 选择器
- jQuery 获取当前url各种信息
- django中使用jquery ajax post数据出现403错误的解决办法(两种方法)
- JQuery常用选择器
- JQuery点击复制文本框内容的方法插件
- jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能(二)
- for循环中的Ajax
- JQuery Mobile iscroll插件使用教程及注意事项
- html5网页动画总结--jQuery旋转插件jqueryrotate
- jQuery版本冲突解决办法
- Jquery scroll 向下滚动到据顶部超过1000px时,回到顶部
- Jquery Scroll 事件
- jQuery插件imgPreviewQs实现上传图片预览
- [jQuery1.9]Cannot read property ‘msie’ of undefined错误的解决方法
- jQuery源码分析系列 : Ajax 整体结构
- 关于jQuery的cookies插件2.2.0版设置过期时间的说明