JQuery源码学习

学习源码需要什么？

1，扎实的js,css,html基本功

2，下载jquery源码

3，先整体后局部。分析整个文件的结构。有哪几部分。

4，先看核心：jquery对象

5，从现象看本质，对其主要模块的分析。如，DOM，事件处理，ajax等。看设计思想和实现技巧。

6，熟悉其编码风格。

整体模块解析

入口模块(构造jq对象)
底层模块(工具方法,回调函数列表,异步队列,测试,数据缓存,队列,选择器Sizzle)
功能模块(属性操作attr,事件,dom遍历操作,样式操作,异步ajax,动画)

现象看本质

1，无new的jq对象

2，直接就可以引用一个jq对象var = jquery;
3，通过传入的参数的不同来生成不同的jq对象
4，简洁的链式编码
5，配置方式书写jq对象属性
6，强大的dom查找能力
7，随心所欲的方法扩展

//关于class的处理都封装在这个extend中jQuery.fn.extend( {//jQuery.fn=jQuery.prototype，作用：扩展类方法；    addClass: function( value ) {        var classes, elem, cur, curValue, clazz, j, finalValue,i = 0;        ////jQuery.extend用于扩展只属于jq对象的全局方法(用于定义只在内部使用的方法，如isFunction函数)        if ( jQuery.isFunction( value ) ) {            return this.each( function( j ) {                jQuery( this ).addClass( value.call( this, j, getClass( this ) ) );            } );        }        if ( typeof value === "string" && value ) {            classes = value.match( rnotwhite ) || [];            while ( ( elem = this[ i++ ] ) ) {                curValue = getClass( elem );                cur = elem.nodeType === 1 &&                    ( " " + curValue + " " ).replace( rclass, " " );                if ( cur ) {                    j = 0;                    while ( ( clazz = classes[ j++ ] ) ) {                        if ( cur.indexOf( " " + clazz + " " ) < 0 ) {                            cur += clazz + " ";                        }                    }                    // Only assign if different to avoid unneeded rendering.                    finalValue = jQuery.trim( cur );                    if ( curValue !== finalValue ) {                        elem.setAttribute( "class", finalValue );                    }                }            }        }        return this;    },