博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery1.0源码【1-60行】构造函数及全局$变量
阅读量:5927 次
发布时间:2019-06-19

本文共 4493 字,大约阅读时间需要 14 分钟。

一、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 variablewindow.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 overwriteif ( $ )    jQuery._$ = $;// Map the jQuery namespace to the '$' onevar $ = 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 = $("

23

"); var objTmp2 = $(objTmp); objTmp2.jquery = 'ss'; var test1 = objTmp.jquery; //test1="$Rev: 509 $" var test2 = objTmp2.jquery; //test2="ss" var objTmp = $("123

23

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个字符;

 

转载于:https://www.cnblogs.com/chenpi/p/5128225.html

你可能感兴趣的文章
学会批处理
查看>>
软件测试定义和分类
查看>>
我的友情链接
查看>>
Linux openssl 实现
查看>>
eclispe 启动报错
查看>>
Open×××的路由问题一则
查看>>
如何优雅的升级Ruby项目
查看>>
iOS 9适配系列教程:改用更安全的HTTPS
查看>>
介绍MyBatis代码生成网站(三) --- [ Mapper接口类 ] 实际生成效果
查看>>
Nginx中413 request entity too large问题
查看>>
JS json object 与 string 相互转换
查看>>
sudo命令用法介绍
查看>>
如何修改docker中gwbridge的address?
查看>>
Nginx RTMP模块 nginx-rtmp-module指令详解
查看>>
dojo toolkit 的query
查看>>
Apache和Nginx防盗链的几种配置方法
查看>>
Spring依赖注入基础以及实现原理
查看>>
1.4.2.1 在Windows xp、Windows 2003、Windows 7 等平台上设置环
查看>>
POJ 1912 A highway and the seven dwarfs 《挑战程序设计竞赛》
查看>>
层叠HMM-Viterbi角色标注模型下的地名识别
查看>>