在 叶小钗 的博客中看到一段关于遍历的代码

    var ajQuery = {};

function dir(elem, dir, until) {
var matched = [],
truncate = until !== undefined;
while ((elem = elem[dir]) && elem.nodeType !== 9) {
if (elem.nodeType === 1) {
if (truncate) {
if (elem.nodeName.toLowerCase() == until || elem.className == until) {
break;
}
}
matched.push(elem);
}
}
return matched;
} // 迭代器
jQuery.each({
parent: function(elem) {
var parent = elem.parentNode;
return parent && parent.nodeType !== 11 ? parent : null;
},
parents: function(elem) {
return dir(elem, "parentNode");
},
parentsUntil: function(elem, until) {
return dir(elem, "parentNode", until);
}
}, function(name, fn) {
ajQuery[name] = function(until, selector) {
return fn(until, selector);
};
}); $("#test1").click(function() {
var item = $('.item-1');
alert(item.parent()[0])
alert(item.parents().length)
alert(item.parentsUntil('body').length)
}) $("#test2").click(function() {
var item = document.querySelectorAll('.item-1')[0]
alert(ajQuery.parent(item))
alert(ajQuery.parents(item).length)
alert(ajQuery.parentsUntil(item, 'body').length)
})

jQuery 中的each 不仅仅是用来遍历jQuery对象,还可以用来作为合并接口。

jQuery.each({
parent: function(elem) {},
parents: function(elem) {},
nextAll: function(elem) {},
prevAll: function(elem) {},
................
}, function(name, fn) {
  api[name] = function(until, selector){
  };
});

其中就利用了$.each(fn)的特性,jQuery 源码中 :

 each: function( obj, callback, args ){}

为obj 执行回调函数 callback。

里面的巧妙之处在于:

在为obj执行回调函数的时候,回调函数为新的对象 ajQuery{},绑定了新的属性(或方法)

function(name, fn) {
ajQuery[name] = function(until, selector) {
return fn(until, selector);
};
}

测试:

jQuery.each({
say: function(cont){
console.log(cont);
}
}, function(name, fn) {
ajQuery[name] = function(until, selector) {
// 传递fn参数
return fn(until, selector);
};
});

$("#test1").click(function() {
    ajQuery.say('oooooooo'); // oooooooo
})

 

所以根据这个推论,总结each的原理:

1. 遍历obj对象;

2. 为callback传参;

3. 为每个obj[i],绑定callback

模拟写了个版本:

    o = {};
test = {
fn1: function(){},
fn2: function(){},
getDom: function(dom, fn){
var t = document.getElementById(dom)
return t.onclick = function(){
fn()
}
},
each: function(c, fn){
for(k in c){
fn.call(c[k],k,c[k]);
}
return c;
}
} test.each({
say: function(cont){
console.log(cont)
},
walk: function(length){
console.log('walk '+length);
}
}, function(name, fn) {
o[name] = function(name){
return fn(name);
}
})

// 调用
test.getDom('btn', function(){
  o.say('aaaaa');
})

 

jQuery 迭代器的更多相关文章

  1. jQuery迭代器

    http://www.imooc.com/code/3417 迭代器 迭代器是一个框架的重要设计.我们经常需要提供一种方法顺序用来处理聚合对象中各个元素,而又不暴露该对象的内部,这也是设计模式中的迭代 ...

  2. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  3. JQuery操作类数组的工具方法

    JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...

  4. JQuery常用函数及功能小结

    1.文档加载完成执行函数$(document).ready(function(){  alert("开始了");});2.添加/删除CSS类$("#some-id&quo ...

  5. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  6. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  7. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  8. JQuery常用方法一览

    $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/ ...

  9. js设计模式总结-迭代器模式

    迭代器模式 要解决的问题 迭代器要解决的问题很简单很单纯,就是进行遍历操作. 实现原理 基本所有语言都实现了迭代器,javascript也不例外,如Array.prototype.forEach,fo ...

随机推荐

  1. 全国计算机等级考试二级教程-C语言程序设计_第15章_位运算

    位运算,不适用于实数,仅仅适用于整数.字符. C语言的位运算只能操作整数.字符,实数是指数方式表示的,不适用于位运算. #define _CRT_SECURE_NO_WARNINGS #include ...

  2. 扑克k,你知道的人物吗?

    在扑克牌中,黑桃K——大卫王(以色列联合王国第二任国王):红桃K——查里曼大帝(法兰克国王,后加冕为罗马人的皇帝):梅花K——亚历山大大帝(马其顿帝国国王):方块K——凯撒大帝(罗马共和国终生执政官) ...

  3. ssm+easyUI datagrid 不能显示后台controller层返回的json数据

    后台打印查询出来的数据: {"total":29,"rows":[{"department_id":0,"department_n ...

  4. 底层由于接收到操作系统的信号而停止(the inferior stopped because it triggered an exception)

    QT开发内存管理问题: 在linux上提示:底层由于接收到操作系统的信号而停止: 在windows上提示:the inferior stopped because it triggered an ex ...

  5. Linux学习之给指定用户发邮件

    发送邮件 进入 mail 程序后的操作都很简单,但是可以不进入 mail 的 & 操作提示符界面,下面举几个实用例子: 1.给 snailwarrior@qq.com 发信 [root@pps ...

  6. jQuery中的类型判断

    在JQuery中有一个type方法,在1.11.2中是这样写的 var class2type = {}; var toString = class2type.toString; jQuery.each ...

  7. 微博发布效果jq版

    大家都看过新浪微博的发状态功能,我模拟了一下类似的效果,包括发布时间,删除效果等.代码如下: <!DOCTYPE HTML> <html> <head> <m ...

  8. 通过 IP 访问谷歌

    最近貌似谷歌都不能访问,对于我等经常使用谷歌的人说不是件好事,毕竟谷歌比百度专业,好在有解决办法: 1. 找到文件:C:\Windows\System32\drivers\etc\hosts 2. 把 ...

  9. js 报错 :object is not a function

    object is not a function 我遇到的具体问题是:js命名方法重复了,找到了别的地方,改个方法名就可以了 var h2_price = document.getElementByI ...

  10. SQL Server 行的删除与修改-------------(未完待续P222 deep SQL Server 222 )

    删除: 1.堆表:当行被删除时,不会自动重新组织页面上的空间.删除行时不会从物理页面上删除, 而只是把行偏移设置为 0 .表示空间没有使用.除了页面上没有被回收空间之外,堆中的 空白页也常常不会被回收 ...