一步步带你解析jquery

原创 梦柯 随笔 前端 334阅读 2017-03-08 14:06:25 举报

jquery是我们大家都很熟悉的操作dom框架,接下来让我带着大家一步步解析jquery,虽然我这是一步步的来。不需要基础那是说大话。跟着我一步步的来。我相信你在web前端提到一大段位。那我们就马上开始吧

step-1为什么我们需要解析jquery源码

大家都很有疑问我们只要会用jquery,在我们开发中熟练的使用就可以了啊!那么想就是大错特错了,我们要是用一年的工作经验在公司待上十年,甚至更多。公司裁人的话,你可能就在名单之中。我们要明白为什么jquery这么写。在我们开发中应用到jquery的好点子,岂不是井上添花呢。废话不多说了。我们赶快开始吧

step-2jquery整体框架

下面是我抽象出来的jquery整体(2.0.3版jquery)
javascript 代码

1.jquery所有的方法都包含在了自执行函数中,就不在对全局变量污染
2.jQuery把jQuery对象挂到了window对象上,这样就把jQuery对象暴露了出去,提供给我们使用
3.自执行函数传进了window对象这样,可以使window对象变为局部变量(即把参数作为局部变量使用),这样当在jquery代码块中访问window对象时不需要将作用域链回退到顶层作用域,从而可以更快地访问window对象。另外window对象作为参数传入,可以在压缩代码时进行优化,例如
javascript 代码

4.这里又有疑问了为啥自调用函数设置参数undefined呢?这是因为
javascript 代码

上面代码在各个浏览器中运行结果不同,尤其是ie低版本浏览器

1.大家注意到自执行函数后面的分号了么?是这样的在JavaScript中,如果语句分别放置在不同的行中,则分号(;)是可选的,但是对于自调用匿名函数来说,在之前之后都会引起语法错误的,例如下面的代码
javascript 代码

在上面代码中如果自调用匿名函数的前一行末尾没有加分号,则自调用匿名函数的第一对括号就会被当作函数调用;在我们开发中是很有必要加分号的(;)

step-3jQuery对象

构造jQuery对象模块的总体源码结构如下实例
javascript 代码

1.为什么要在构造函数jQuery()内部用运算符new创建并返回另一个构造函数的实例?jQuery是为了省去构造函数jQuery()前面的运算符new,即我们创建jQuery对象时,可以省略运算符new直接写JQuery(),为了拼写更方便jQuery()还定义了别名$();

2.为什么要执行jQuery.fn = jQuery.prototype,这是因为jQuery.fn 是 jQuery.prototype的简写,可以少写7个字符,以方便拼写;

3.既然调用构造函数jQuery()返回的jQuery对象实际上是构造函数jQuery.fn.init()的实例,为什么能在构造函数jQuery.fn.init()的实例上调用构造函数jQuery()的原型方法和属性的?例如$(‘#id’).length和$(‘#id’).size(),这是因为在执行jQuery.fn.init.prototype = jQuery.fn时,用构造函数jQuery()的原型对象覆盖了构造函数jQuery.fn.init()的原型对象,从而使构造函数jQuery.fn.init()的实例也可以访问jQuery()的原型方法。

step-4 jQuery变量和函数(21,94)
1.rootjQuery : 在886行rootjQuery = jQuery(document)有这个赋值操作;

2.readyList :与dom加载有关

3.core_strundefined :存在的是字符串undefined(typeof undefined === “undefined”)为什么需要这样判断?

javascript 代码

4.下面这几个变量就没有什么好说的了
html 代码

5.jQuery = window.jQuery,与 $ = window.$,是为了避免与其他模块的jQuery和$发生冲突,这样就很巧妙的避免了

6.class2type{} : 在使用$.type()的时候会用到,做类型判断用
7.core_deletedIds[]:数据存储,缓存方式,在2.0.3在数据存储中已经用面向对象得方法了
8.core_version :版本号
9.(52,58)行都是关于数据存储的方法
10.jQuery函数就是我们在第三节讲的
11.core_pnum : 是数字的匹配,包括了正负数,和科学技术法的数学表示。
12.core_rnotwhite : 非空白
13.rquickExpr : 表示的是html标签必须是”<字符>字符”或者是”#字符”
14.rsingleTag : 表示的是html标签;这里面出现了括号的引用。
15.rmsPrefix : 表示css的前缀,判断ie
16.rdashAlpha :表示有链接符“-”的数字或字符
17.fcamelCase() : 转驼峰回调函数
18.completed() : DOM加载完成后触发

step-5 jQuery对象添加方法属性(96,283)
首先我给大家抽象出来的jQuery原型对象
javascript 代码

第一个jQuery与第二个constructor这两个属性就没有什么好说的了

init()
我们重点来解析一下这个init函数。

1.我们看看这是一个什么样的函数
javascript 代码

要是我们这样使用的话jQuery对象就给我们返回一个
javascript 代码

1.这个函数接受三个参数,第三个参数我们已经说了其实rootjQuery = jQuery(document)
javascript 代码

上面这段代码意思就是在文档中查找所有的ul下的li元素,那么第二个参数context就是执行的上下文

1.首先init函数中需要判断得类型有
javascript 代码

非法字符

首先传入的是非法字符
javascript 代码

jQuery就会给我们返回一个 jQuery对象,这个没什么好说的

字符串
javascript 代码

以上是jQuery源码,我给大家抽象一下

javascript 代码

1.match各种情况都给大家分配好了
javascript 代码

当创建li标签的时候jQuery把ifream情况也加了进去。
javascript 代码

这时候大家会有疑问为什么把
javascript 代码

这是因为在我们用到的链式编程当我们使用$(‘li’).appendTo(ul);
$(‘li’)返回的this对象,appendTo()方法中可以拿到这个this对象进行遍历
接下来我们就走到了

javascript 代码

上面这个if中必须满足字符串是但标签,第二参数context必须是对象字面量形式
进来之后呢就有了一个forin循环了
javascript 代码

就是判断jQuery下面是不是有一个jQuery.html()//假设第二个参数有一个属性是html
如果有就进行函数调用了。如果jQuery对象中没有这个方法比如上面例子中的title
那么就开始执行attr方法了。
javascript 代码

这里面151行代码就没有什么好解释了,
第155行代码是做兼容性的,是兼容Blackberry 4.6,这个我们很少用了
第161,162行代码把document对象给context,selector赋值给selector

1.接下来就剩下$(‘.box’),$(‘div’),$(‘#div1 div.box’)
javascript 代码

当不存在context的情况下,大家都能看懂如果存在context的呢
javascript 代码

这样解释就看懂了吧,字符串的所有情况都给大家解析了
【怎么学好web前端】web前端注重的是实战项目,你要是真心学web前端可以来这个群学习:【539400920】,群里每天都会有web前端的视频教程更新,还有人交流学习互相帮助解决各种问题web前端问题,有专人讲解上课。只要自己认真,在加上一起交流,你会学到很多的在别的地方学不到的web前端的最新技术和知识以及项目实战!

我会继续更新的。有什么好的建议希望大家能提出。。谢谢大家

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复