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

 更新时间:2010年12月03日 19:06:37   转载 作者:  
如果对于jquery的$()包装器函数还不是很清楚,请先参阅我的上一篇日志:浅析jQuery的链式调用
话说回来,虽然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的实现有很大的落差,可以的话希望可以指正一下。

相关文章

  • JQuery筛选器全系列介绍

    JQuery筛选器全系列介绍

    jQuery提供了强大的选择器让我们获取对象。在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件。选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对象
    2013-08-08
  • 谈一谈jQuery核心架构设计

    谈一谈jQuery核心架构设计

    这篇文章主要和大家谈一谈jQuery核心架构设计,什么是jQuery核心架构设计,多方面了解jQuery核心架构设计,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • BootStrap轻松实现微信页面开发代码分享

    BootStrap轻松实现微信页面开发代码分享

    本文给大家分享一段代码关于bootstrap实现微信开发页面的代码,非常不错代码简单易懂,感兴趣的朋友一起看看吧
    2016-10-10
  • jQuery中:disabled选择器用法实例

    jQuery中:disabled选择器用法实例

    这篇文章主要介绍了jQuery中:disabled选择器用法,实例分析了:disabled选择器功能、定义及选取所有禁用的表单元素的技巧,需要的朋友可以参考下
    2015-01-01
  • Jquery实现Div上下移动示例

    Jquery实现Div上下移动示例

    这篇文章主要介绍了Jquery如何实现Div上下移动,需要的朋友可以参考下
    2014-04-04
  • jquery中$each()方法的使用指南

    jquery中$each()方法的使用指南

    jQuery 中的each函数 很方便,$.each ()函数封装了十分强大的遍历功能,它可以遍历一维数组、多维数组、DOM , JSON 等等,在javaScript 开发过程中使用$each可以大大的减轻我们的工作量,这里贴一个简单的模仿each的函数,只能处理数组类型的对象。
    2015-04-04
  • jQuery添加options点击事件并传值实例代码

    jQuery添加options点击事件并传值实例代码

    这篇文章主要介绍了jQuery添加options点击事件并传值实例代码,非常具有参考价值,需要的朋友一起看下吧
    2016-05-05
  • jQuery判断复选框是否勾选的原理及示例

    jQuery判断复选框是否勾选的原理及示例

    要实现这样的一个功能复选框勾选时给input表单赋值,复选框取消时将表单值清除,需要的朋友可以参考下
    2014-05-05
  • jQuery插件开发汇总

    jQuery插件开发汇总

    这篇文章主要为大家详细介绍了jQuery插件开发的相关资料,需要的朋友可以参考下
    2016-05-05
  • EasyUI框架 使用Ajax提交注册信息的实现代码

    EasyUI框架 使用Ajax提交注册信息的实现代码

    这篇文章主要介绍了EasyUI框架 使用Ajax提交注册信息的实现代码的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09

最新评论