jQuery 源码分析和使用心得

　　core是jQuery的核心内容, 包含了最基础的方法, 比如我们常用的 $(selector, context), 用于遍历操作的 each, map, eq, first 识别变量类型的 isArray, isNumeric, type 等 . 这些方法为jQuery后续操作提供最基础的支持.

构造函数 jQuery( selector, context )

　　说到jQuery, 大家可能最熟悉的就是 $(selector, context) , 我觉得这也是jQuery受到人们欢迎的很大一部分原因, 因为这个方法非常的强大.

    // Define a local copy of jQuery

    jQuery = function( selector, context ) {

        // The jQuery object is actually just the init constructor 'enhanced'

        // Need init if jQuery is called (just allow error to be thrown if not included)

        return new jQuery.fn.init( selector, context );

    },

　　这里我们很明显的看到一个关键词就是new ,这说明每一次调用$()就会new一个jQuery对象出来 , 有些人可能不注意这一点就会写出下面的代码, 或者会出现 $("#id") === $("#id")的这种判断 , 这种写法都是不可取的, 我们应该尽量的节省jQuery的获取次数, 重复利用jQuery对象.

if($(".class").hasClass()){

    $(".class").removeClass();

}

静态属性和原型属性

　　从core.js中可以看到两类属性( q君: 函数也是属性哦! ), 一类是以jQuery.extend({})定义的静态属性, 一类是通过 jQuery.fn = jQuery.prototype = {} 进行定义的原型属性. 静态属性是jQuery函数的属性, 通过 $调用, 如$.each . 静态属性通常为与页面元素无关的工具方法. 原型属性是拓展jQuery对象的一些功能, 它持有jQuery对象自身(this) , 为处理自身对象之用调用形式为 var $a = $("a"); $a.each() .( q君: jQuery里面有两个each ,要分清 )

　　具体的实现方法都比较简单, 就不再一一叙述. jQuery.extend 是一个很常用的方法, 它可以将几个对象合并成一个对象, 并且支持深拷贝和浅拷贝两种方式 , 在做一些默认配置和实现的时候会经常用到.

jQuery对象创建

　　通过查看 jQuery( selector, context )函数, 知道了 jQuery 调用了 new jQuery.fn.init( selector, context ). 在这句话上面有一条注释: Need init if jQuery is called . 我们在 /src/core/目录下找到init.js. 内容大致如下

init = jQuery.fn.init = function( selector, context ) {

    //  ...

    //  ...

    return this;

    // ...

    retrun this.constructor( context ).find( selector );

    // ...

    return ( context || rootjQuery ).find( selector );

    // ...

    return typeof rootjQuery.ready !== "undefined" ?

                rootjQuery.ready( selector ) :

                // Execute immediately if ready is not present

                selector( jQuery );

    // ...

    return jQuery.makeArray( selector, this );

}

// Give the init function the jQuery prototype for later instantiation

init.prototype = jQuery.fn;

　　在这个方法里有很多种返回.

　　　　第一种 this, 返回的是init的对象;

　　　　第二种 jquery对象.find(); -> /src/traversing/findFilter.js : find -> return this.pushStack -> return jQuery.merge( this.constructor(), elems ); -> jQuery对象

　　　　第三种 selector(jQuery); 不一定返回jQuery对象

　　　　第四种 rootjQuery.ready( selector ); -> /src/core/ready.js : ready -> return this(rootjQuery) -> jQuery对象

　　　　第五种 jQuery.makeArray( selector, this ); -> var ret = results; return ret; -> jQuery对象

　　通过上述观察, 发现jQuery方法只有一种情况下返回的不是jQuery对象: 传入的selector参数为对象, 并且没有加载 /src/core/ready.js 模块. 下面这段代码也会证明这种情况(代码会在附件中, 请及时更新).

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>core</title>

    </head>

    <body>

        <script src="require.js" data-main="main" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">

            require(['../src/core/init'], function(init) {

                var ret = new init(function() {

                    return {

                        name: "not jquery"

                    };

                });

                console.log(ret);

            })

        </script>

    </body>

</html>

　　再来看第一种情况, return this返回的是init对象, 并不是jQuery对象, 但是我们在下面看到 init.prototype = jQuery.fn; 所以通过init创建的对象也就是jQuery对象.

jQuery实现伪数组

　　我们在用jQuery的过程中很多情况下会把jQuery当做数组去用. 但是我们从上面创建过程来看, jQuery貌似跟数组并没有什么关系. 那么我们来分析一下他的原型看看为什么jQuery可以像数组一样使用.

　　在这之前我先介绍一下"鸭子类型(duck typing)" ( q君: 鸭子? 好吃吗? ), 什么是鸭子类型? “当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么这只鸟就可以被称为鸭子。” 这是一个非常恰当的描述, 在动态语言中我们不需要管一个对象到底是什么类型, 只要他能执行某个方法, 那么我就可以认为他就是某个类型的对象.

　　Javascript就是这样的一种语言. 要实现数组不一定要继承或者使用Array对象. 只要实现了Array对象里面的方法, 就可以认为他是数组. 这里我也发现一个很有趣的事情. 用chrome浏览器进行调试的时候, 我们用console.log输出普通对象和数组的时候输出的格式不一样. 输出对象类似于 " f {length: 0} " , 输出数组类似于 " [1] ". 我们通过下面几行代码做个试验

var f = function(){this.length = 1; this[0] = "a" }

console.log(new f());   //  f {0: "a", length: 1}

var f = function(){this.length = 1;this.splice = function(){};this[0] = "a" }

console.log(new f());   //  ["a"]

　　哈, 多么神奇! chrome把他当成数组了! 如果一个对象中length为数字, splice为方法, 这个对象就会被chrome认为是数组. 大家感兴趣的话可以试一下其他的浏览器.

　　嗯, 我们回过头看jQuery的prototype, jQuery的prototype中包含了数组中常用的 length属性, push , sort , splice , slice等方法.

　　所有jQuery就像一个数组一样使用.

使用建议

　　1. 尽量减少重复使用 $()方法获取相同的对象

　　2. $() 大部分会返回jQuery对象, 但不排除在极端情况

　　3. jQuery可以当做数组使用, 但不完全是数组, pop, shift 等方法不适用于jQuery对象.

附件

　　http://yunpan.cn/Q7nKEsZ9cqFby 提取码 3a4a

巴特西

jQuery 源码分析和使用心得 - core.js

构造函数 jQuery( selector, context )

静态属性和原型属性

jQuery对象创建

jQuery实现伪数组

使用建议

附件

最新文章

热门文章