浅谈jQuery.each()函数以及jQuery的链式调用

作者：佚名点击：320次评论：0次标签： jQuery 鸭子法则 jquery对象

类型：编程辅助大小：109KB语言：中文评分：5.0
标签：

立即下载

话说回来，虽然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的实现有很大的落差，可以的话希望可以指正一下。