jQuery 迭代器
在 叶小钗 的博客中看到一段关于遍历的代码
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 迭代器的更多相关文章
- jQuery迭代器
http://www.imooc.com/code/3417 迭代器 迭代器是一个框架的重要设计.我们经常需要提供一种方法顺序用来处理聚合对象中各个元素,而又不暴露该对象的内部,这也是设计模式中的迭代 ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- JQuery操作类数组的工具方法
JQuery学习之操作类数组的工具方法 在很多时候,JQuery的$()函数都返回一个类似数据的JQuery对象,例如$('div')将返回div里面的所有div元素包装的JQuery对象.在这中情况 ...
- JQuery常用函数及功能小结
1.文档加载完成执行函数$(document).ready(function(){ alert("开始了");});2.添加/删除CSS类$("#some-id&quo ...
- 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类(一)
本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
- js/jquery/html前端开发常用到代码片段
1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...
- JQuery常用方法一览
$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/ ...
- js设计模式总结-迭代器模式
迭代器模式 要解决的问题 迭代器要解决的问题很简单很单纯,就是进行遍历操作. 实现原理 基本所有语言都实现了迭代器,javascript也不例外,如Array.prototype.forEach,fo ...
随机推荐
- Linux学习笔记1:配置Linux网络和克隆虚拟机并更改配置
一.配置Linux网络 在安装Linux的时候,一定要保证你的物理网络的IP是手动设置的,要不然会在Linux设置IP连通网络的时候会报network is unreachable 并且怎么也找不到问 ...
- 匹配html标签的正则式
$reg = "/<" + element + "[^<>]*?\s+" + attr + "=['\"]?(.*?)[' ...
- DOM注意事项(八):JavaScript操作环境和垃圾收集
一.运行环境 在约JavaScript对象或this当指向问题,念就是运行环境.即上下文环境.运行环境在JavaScript是一个非常重要的概念.由于它定义了变量或函数有权訪问的其他数据,决定了它们各 ...
- javascript中对象的不同创建方法
javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascr ...
- IOS优秀博客
链接地址:http://www.cnblogs.com/keithmoring/p/4155264.html 剑心的博客信息量很大,适合查阅和入门,学习完,你差不多就可以出山了,还有作为复习IOS的一 ...
- JVM学习之强引用、弱引用、软引用、虚引用
转自:http://my.oschina.net/ydsakyclguozi/blog/404389 多谢博主分享 1.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象 ...
- –save与–save-dev
使用npm install node_module –save自动更新dependencies字段值: 使用npm install node_module –save-dev自动更新devDepend ...
- css3——webkit-animation动画
-webkit-animation:仍旧是一个复合属性, -webkit-animation: name duration timing-function delay iteration_coun ...
- javascript不同数据类型的转换
<script type="text/javascript"> var userEnteredNumber=prompt("Please enter a nu ...
- SQL Server 缓存清理的一些原因
1.dbcc freeproccache; 2.dbcc freesystemcache('all') | dbcc freesystemcache('pool_name'); 3.declare @ ...