jquery1.0源码【1-60行】构造函数及全局$变量

时间：2022-04-02 09:53:53

一、jquery源码1-60行

该部分代码主要完成jquery对象的创建，以及全局变量$与jQurey类的映射；

/*

 * jQuery - New Wave Javascript

 *

 * Copyright (c) 2006 John Resig (jquery.com)

 * Dual licensed under the MIT (MIT-LICENSE.txt)

 * and GPL (GPL-LICENSE.txt) licenses.

 *

 * $Date: 2006-10-27 23:14:48 -0400 (Fri, 27 Oct 2006) $

 * $Rev: 509 $

 */

// Global undefined variable

window.undefined = window.undefined;

function jQuery(a,c) {

    // Shortcut for document ready (because $(document).each() is silly)

    if ( a && a.constructor == Function && jQuery.fn.ready )

        return jQuery(document).ready(a);

    // Make sure that a selection was provided

    a = a || jQuery.context || document;

    // Watch for when a jQuery object is passed as the selector

    if ( a.jquery )

        return $( jQuery.merge( a, [] ) );

    // Watch for when a jQuery object is passed at the context

    if ( c && c.jquery )

        return $( c ).find(a);

    // If the context is global, return a new object

    if ( window == this )

        return new jQuery(a,c);

    // Handle HTML strings

    var m = /^[^<]*(<.+>)[^>]*$/.exec(a);

    if ( m ) a = jQuery.clean( [ m[1] ] );

    // Watch for when an array is passed in

    this.get( a.constructor == Array || a.length && !a.nodeType && a[0] != undefined && a[0].nodeType ?

        // Assume that it is an array of DOM Elements

        jQuery.merge( a, [] ) :

        // Find the matching elements and save them for later

        jQuery.find( a, c ) );

  // See if an extra function was provided

    var fn = arguments[ arguments.length - 1 ];

    // If so, execute it in context

    if ( fn && fn.constructor == Function )

        this.each(fn);

}

// Map over the $ in case of overwrite

if ( $ )

    jQuery._$ = $;

// Map the jQuery namespace to the '$' one

var $ = jQuery;

二、关于window.undefined

window.undefined = window.undefined;

这样写无论window有没定义undefined，window.undefined都能正确表示它的意思，在有些早期浏览器中window并没有定义undefined变量，所以jquery1.0中这样写；

三、关于ready函数

if ( a && a.constructor == Function && jQuery.fn.ready )

        return jQuery(document).ready(a);

ready方法为jquery对象的原型方法，在源文件1093行中利用jquery的extend方法扩展的；

jquery中ready函数有两种写法：

1、直接调用原型方法ready

$(document).ready(function(){ /* do something */ })

2、直接往jQuery方法传入function对象

$(function(){ /* do something */ })

三、a = a || jQuery.context || document;

确保选中一个对象，如果a和jQuery.context都没定义，则会返回一个封装了document的jquery对象,如下：

var $obj = $()；         //$obj等同于$(document)

四、jquery对象作为参数传入

    if ( a.jquery )

        return $( jQuery.merge( a, [] ) );

注意每个jquery对象都有jquery属性，值为它的版本号，因此可用此属性判断对象是否是jquery对象；

如果是jquery对象，则返回一份它的拷贝，注意jquery对象里面的DOM对象指的还是同一个引用，其它属性有各自的空间，具体可看merge和get方法内部实现，后续会讨论到；

例：

    var objTmp = $("<p>23</p>");

    var objTmp2 = $(objTmp);

    objTmp2.jquery = 'ss';

    var test1 = objTmp.jquery;       //test1="$Rev: 509 $"

    var test2 = objTmp2.jquery;      //test2="ss"

    var objTmp = $("123<p>23</p>sds");

    var objTmp2 = $(objTmp);

    objTmp2.html("hello");

    var test1 = objTmp.html();       //test1 = "hello"

    var test2 = objTmp2.html();      //test2 = "hello"

五、返回某jquery对象context下的jquery对象

    if ( c && c.jquery )

        return $( c ).find(a);

例：

var objTmp4 = $(".testDIv", $obj); //返回$obj节点下所有clss为testDIv的jquery对象

六、new jQuery

 if ( window == this )

        return new jQuery(a,c);

如果context是全局的，则new一个jquery对象并返回；

例如：$("#id")；

该情况context是全局的，第一次运行到该语句，条件成立(window==this)，因为js代码都是在window作用于下运行的，第二次运行到该语句的时候，jquery对象已经new出来了，此时this为new出来的对象，条件不成立(window！=this)，跳过；

七、匹配处理html字符串

    var m = /^[^<]*(<.+>)[^>]*$/.exec(a);

    if ( m ) a = jQuery.clean( [ m[1] ] );

注意第一句， 该正则表达式^[^<]*(<.+>)[^>]*$，

[^<]  *       //匹配n个非<字符，

(<.+>)       // 匹配<除“\r\n”之外的任何单个字符>

[^>]*        //匹配n个非>字符，

第二句，当匹配成功时，调用clean函数处理，参数为尖括号里面的字符串，clean函数通过document.createElement("div")创建一个临时div对象，然后将参数赋给innerHTML，最后将临时div的childNodes压入数组返回给a；

八、为jquery对象里的Dom对象、length赋值

 this.get( a.constructor == Array || a.length && !a.nodeType && a[0] != undefined && a[0].nodeType ?

        jQuery.merge( a, [] ) : jQuery.find( a, c ) );

往get函数传入数组或者类数组对象，get方法通过该数组参数生成Dom对象和length值，关于这部分的get源码如下

   this.length = 0;

   [].push.apply( this, num );

   return this;

简单的说，就是在jquery对象中push进数组中的dom对象，由于jquery对象通过apply调用数组中的push方法，length也自动++；

push完成后，该jquery对象就拥有了length和一系列dom元素（如果有的话）；

通过调用merge和find函数，会返回数组；

九、最后一个参数是函数的情况

    var fn = arguments[ arguments.length - 1 ];

    if ( fn && fn.constructor == Function )

        this.each(fn);

如果最后一个参数是函数，则遍历执行；

十、全局变量$

if ( $ )

    jQuery._$ = $;

    var $ = jQuery;

如果已经定义$，则将$保存到 jQuery下，防止overwrite；

将jQuery namespace映射到$下，可少写5个字符；

相关文章