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

2022-03-23 07:53:41

一、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个字符；

本文转自风一样的码农博客园博客，原文链接：http://www.cnblogs.com/chenpi/p/5128225.html，如需转载请自行联系原作者

码农公寓