浅析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的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
vue2中使用less简易教程
Mar 27 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中的时间显示
2007/01/18 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
php查询及多条件查询
2017/02/26 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
js中parseInt函数浅谈
2013/07/31 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
js new Date()实例测试
2019/10/31 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python WEB应用部署的实现方法
2019/01/02 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python接口自动化框架实战
2020/12/23 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
综合内勤岗位职责
2014/04/14 职场文书
庆元旦活动总结
2014/07/09 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技