浅析jQuery的链式调用之each函数


Posted in Javascript onDecember 03, 2010

话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到了一本jQuery基础教程(二)开始想深入的学习前端技术),关于jQuery的博文甚至多于javascript,它让编程的门槛大大的降低了,但是它隐藏了太多细节了,形如$('#id').append('<p>xxx</p>').clone().appendTo(x).end().css(...)................这样操作的模式已经很难找到常规javascript的影子。浏览器的差异仿佛一去就不见了踪影,我不认为大部分都能在这安逸的环境再重新回到考虑javascript如何在不同浏览器能表现一致等问题,是福是祸真的很难说。
接下来言归正传.....说正经的
由于$()函数返回的是一个包裹了原生dom对象数组的对象,并且在此对象原型上扩展的函数都是为了操作原生的dom对象,所以少不了循环遍历的操作,熟悉jquery库的人都知道有个jQuery.each()函数 ,大部分的涉及jquery对象的函数都会用到这个函数: 简单的实现应该是形如这样:
(再次重申,只是简单的实现原理,不要考虑具体的功能性问题)

if (!window['$']) 
window['$'] = window['jQuery']; 
/*这里以上区域为上一篇文章的闭包内的内容 
* 定义jQuery.each 根据传入对象来执行操作 
* @param {Object} obj 
* @param {Object} func 
*简单起见我只考虑了数组以及jQuery对象两种情况,跟上一篇一样,原理应该是一致的 
*/ 
window['jQuery']['each']=function(obj,func){ 
if(obj.constructor==Array){ 
for(var i=0;i<obj.length;i++){ 
func.call(obj[i],i,obj[i]);//可以看到传入的func 应该是形如function(i,item) i代表遍历到的下标,item则代表在数组中遍历到的对象 
} 
}else if(obj.elements&&obj.elements.constructor==Array){//这里采用了传说的鸭子法则,而不是判定它是不是jQuery的实例 只要你有Array类型的elements我就对你进行操作 
for(var i=0;i<obj.elements.length;i++){ 
func.call(obj.elements[i],i,obj.elements[i]);//可以看到传入的func 应该是形如function(i,item) i代表遍历到的下标,item则代表在数组中遍历到的对象 
} 
}else{ 
return null; 
} 
}

在这个函数的基础之上可以开始扩充_jQuery的prototype了;首先就是先写一个包装器对象可以直接调用的方法each:(这个并不是重复),然后通过调用这个each函数可以完成对对象数组的遍历,
比如:
//写在闭包内 注意将昨天命名冲突了的jQuery构造函数名称改为_jQuery 
_jQuery.prototype = { 
each: function(func){ 
jQuery.each(this, func); 
return this; 
}, 
attr: function(key, value){ 
//示例定义这个set与get于一身的操作属性的函数 
if (arguments.length == 0) { 
return null; 
} 
else 
if (arguments.length == 1) { 
return this.elements[0].getAttribute(key); 
} 
else if(arguments.length == 2){ 
this.each(function(i, item){ 
//这里可以看到重新定义each方法的好处一:精简代码 ,二:在内部函数中this仍然是指向调用的包装器对象而不是window 
item.setAttribute(key, value); 
}) 
} 
} 
/* 
* 这里可以开始引入其他方法 
*/ 
}

接下来做几个简单的测试:(还是上一篇的测试html

输入:

   var k= $('#header');
                  consoles.write(k.attr('title','test title!').attr('title'));     //链式调用 

  输出:   

                   test title!

依此类推,依靠each方法可以有效的扩充包装器的方法。

之前说的影响到jQuery的链式调用的要点有三点,事实事后一想完全不是那么简单,jQuery内部代码的维护感觉并不比有些库好,虽然至少在操作上来讲使用起来非常顺手(当然只是针对一些小的操作,大的项目一时也无法接触到,也不好跟着一些大大人云亦云). 不过就算仅仅从遍历操作来看, 也可以看到其实这个库只能依托细化的插件,扩充下去只会显得臃肿不堪。

注:如果有仔细剖析了jquery源码的人肯定会对我如此拙劣的所谓的实现嗤之以鼻,我的确只是看了几本比如javascript dom高级程序设计 以及javascript 高级程序设计 设计模式等好书之后有感而发而已,可能跟具体的jquery的实现有很大的落差,可以的话希望可以指正一下。

Javascript 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
jquery实现保存已选用户
Jul 21 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
jQuery的链式调用浅析
Dec 03 #Javascript
加速IE的Javascript document输出的方法
Dec 02 #Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 #Javascript
javascript学习之闭包分析
Dec 02 #Javascript
JavaScript OOP面向对象介绍
Dec 02 #Javascript
JavaScript 字符串处理函数使用小结
Dec 02 #Javascript
改写一个简单的菜单 弹性大小
Dec 02 #Javascript
You might like
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php实现文件下载代码分享
2014/08/19 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
Exjs 入门篇
2010/04/07 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python中设置变量访问权限的方法
2015/04/27 Python
Python程序慢的重要原因
2020/09/04 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
学术会议欢迎词
2014/01/09 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
讲党性心得体会
2014/09/03 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
小王子读书笔记
2015/06/29 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android