Jquery源码系列
.NET跨平台
比较认真。编程就是算法和数据结构,算法和数据结构是编程的灵魂。
展开
-
JQuery - Sizzle选择器引擎原理分析
说明:14年学习的jquery源码,搬到这里供大家交流。一、前言Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中。我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍。Sizzle发展到现在,以jQuery1.8为分水岭,大体上可以分为两个阶段,后面的版本中引入了编译函数的概念,Sizzle的源码变得更加难读、不再兼容低版本浏览器,而且看起来更加零散。本次阅读的是Sizzle第一个阶段的最终版本jQuery1.7,从中转载 2020-10-25 16:24:26 · 300 阅读 · 0 评论 -
JQuery3.1.1源码解读(十三)【event-on】
通过前面一章对于 addEvent 库的介绍,它的兼容性超级棒,据说对于 IE4、5 都有很好的兼容性,这和 jQuery 的原理是一致的,而在 jQuery 中,有一个对象与其相对于,那就是 event。上上章就已经说过了,这个 jQuery.fn.on这个函数最终是通过 jQuery.event对象的 add 方法来实现功能的,当然,方法不局限于 add,下面就要对这些方法进行详细的介绍。关于转载 2017-11-10 10:07:10 · 582 阅读 · 0 评论 -
JQuery3.1.1源码解读(十四)【event-trigger】
以前,我只知道,只有当对浏览器中的元素进行点击的时候,才会出发 click 事件,其它的事件也一样,需要人为的鼠标操作。后来随着学习的不断深入,才知道原来 JS 可以写函数来控制事件的执行,这样子写代码才有意思。记得很久很久以前一些恶意网站,明明鼠标没有点击,却被网站强行的点击了某个链接,大概实现的方式就是这样的吧。原生事件其实 JS 的原生事件已经做得挺好了,只是 jQuery 将其进行封装,做的转载 2017-11-10 10:10:05 · 554 阅读 · 0 评论 -
JQuery3.1.1源码解读(十六)【dom-html】
上一章谈到了 dom 的几个插入操作,虽然插入的方式多种多样,但只要在懂了原生方法等基础上,代码看起来都不是很复杂。比较有意思的一个函数就是 buildFragment 方法,用来将 html 字符串转换成 dom 碎片。本章来看一下 dom 的其它方法。html、text 方法说到 elem 的操作,就必然要提一下 elem 的类型。NodeType,一个节点的 nodeType 为 1 表示元素转载 2017-11-10 10:13:45 · 666 阅读 · 0 评论 -
JQuery3.1.1源码解读(十五)【dom-domManip】
可能你会觉得这个名字很奇怪这个名字很奇怪,为什么叫做 domManip,即所谓的 dom 微操作。其实在 jQuery 中有很多重要的 dom 操作,这些操作使用的频率都非常高,不过这些操作普遍有一个特点,就是需要进行微调,比如将字符串转换成 elem 元素,判断是否为 script 脚本。所以 jQuery 内部一个统一的做法,就是采用 callbacks 的方式,先对要进行 dom 操作的内部函转载 2017-11-10 10:12:09 · 618 阅读 · 0 评论 -
JQuery3.1.1源码解读(十七)【css】
样式操作也是 jQuery 比较常用的一个操作,就我本人而言,这个 css 函数用多了,感觉自己有点傻乎乎的,主要还是自己不了解 js 中 css 的真正含义。不过现在不怕了。开始之前,先抛开 jQuery,我们来看看一个有趣的面试题(据说是一道微信面试题)。一道很有深度的面试题用原生的 js 获得一个 HTML 元素的 background-color,当然,这只是一个引入,为什么不是 color转载 2017-11-10 10:15:49 · 642 阅读 · 0 评论 -
JQuery3.1.1源码解读(十八)【class】
眼看 jQuery 的源码就快到头了,后面还有几个重要的内容,包括 ajax 和动画操作,加油把它们看完,百度前端学院的新一批课程也开始了。百度前端学院。class 的的操作应该算是比较愉快的,因为内容不是很多,或者说,内容涉及到的原生操作不是很大,就一个 className 或 getAttribute,主要还是来看下它涉及到的一些兼容性操作。class 操作先来说一个比较有趣的 class 操作转载 2017-11-10 10:24:36 · 565 阅读 · 0 评论 -
JQuery3.1.1源码解读(十九)【ajax】
关于 ajax,东西太多了,我本来想避开 ajax,避而不提,但觉得 ajax 这么多内容,不说实在可惜。写在 jQuery 的 ajax 之前首先,我们还是来了解一下 js 中的 http 请求。http 协议中有请求体和响应体,对于请求的一方,无论是哪一种语言,我比较关心如下几个方面:请求的配置参数包括 url,post/get 等;请求有请求头,那么请求头的参数又该由哪个函数来设置;如何判断请转载 2017-11-11 10:05:08 · 2370 阅读 · 1 评论 -
jQuery源码阅读(一)---jQuery源码整体架构
之前用jQuery库写了两个小例子(结合Apache、PHP实现的简易聊天室以及音乐播放器),详见我的上两篇博客jQuery aJax技术以及PHP实现简单聊天室、 利用jQuery实现音乐播放器。为了更加深入了解jQuery库的架构以及巩固原生JS的基础和深度,决定刨一刨jQuery源码。jQuery源码架构首先,jQuery源码的整体构架如下:(此图来源于“jQuery技术内幕:深入解析j...转载 2019-08-13 23:59:28 · 994 阅读 · 0 评论 -
JQuery3.1.1源码解读(十二)【event-extend】
前面一章,大概是一个总览,介绍了事件绑定的初衷和使用,通过了解,知道其内部是一个什么样的流程,从哪个函数到哪个函数。无论 jQuery 的源码简单或者复杂,有一点可以肯定,jQuery 致力于解决浏览器的兼容问题,最终是服务于使用者。一些遗留问题前面介绍 bind、delegate 和它们的 un 方法的时候,经提醒,忘记提到一些内容,却是我们经常使用的。比如 $('body').click,$('转载 2017-11-10 09:24:37 · 445 阅读 · 0 评论 -
JQuery3.1.1源码解读(十一)【event-main】
这次的内容是来介绍关于 jQuery 的事件委托。不过在之前呢有必要先来了解一下 JS 中的事件委托与冒泡,我之前也写过类似的博客,事件冒泡与捕获由 JS 事件引入事件是 JS DOM 中极具活力的内容,你可以随时监听 DOM 的变化,并对它们及时的做出反应,如果你不是太懂 JS 中的事件,建议你先去看一些相关介绍的文章,直接看 jQuery 中的事件委托头会头大的。事件的处理顺序由两个环节,一个是转载 2017-11-10 09:21:30 · 529 阅读 · 0 评论 -
JQuery3.1.1源码解读(十)【hooks】
hooks 在英语中的意思表示钩子或挂钩,在 jQuery 中也有 hooks 这么一个概念,它的功能在考虑到一些兼容性和其它特殊情况的条件下,优先考虑这些特殊情况,而后才去用普通的方法处理,这种说法还是比较形象的。hooks 的使用非常用技术含量,可以支撑在原来的基础上扩展,而对于接口则无需改变,举个例子,像 fn.css() 这个函数我们都是非常熟悉的了,拿来就用,而不需要考虑浏览器的兼容性,这转载 2017-11-10 09:16:34 · 467 阅读 · 0 评论 -
JQuery3.1.1源码解读(一)【jQuery总体架构】
jQuery 总体架构首先,jQuery 是一个开发框架,它的火爆程度已经无法用言语来形容,当你随便打开一个网站,一半以上直接使用了 jQuery。或许,早几年,一个前端工程师,只要会写 jQuery,就可以无忧工作。虽说最近 react、vue 很火,但 jQuery 中许多精彩的方法和逻辑值得每一个前端人员学习。和其众多的框架一样,总要把接口放到外面来调用,内部往往是一个闭包,避免环境变量的污染转载 2017-11-09 10:51:22 · 992 阅读 · 0 评论 -
JQuery3.1.1源码解读(三)【Sizzle 选择器】
Sizzle 选择器Sizzle 原本是 jQuery 中用来当作 DOM 选择器的,后来被 John Resig 单独分离出去,成为一个单独的项目,可以直接导入到项目中使用。本来我们使用 jQuery 当作选择器,选定一些 #id 或 .class,使用 document.getElementById 或 document.getElemensByClassName 就可以很快锁定 DOM 所在的转载 2017-11-09 11:15:13 · 588 阅读 · 0 评论 -
JQuery3.1.1源码解读(四)【Tokens 词法分析】
Tokens 词法分析其实词法分析是汇编里面提到的词汇,把它用到这里感觉略有不合适,但 Sizzle 中的 tokensize函数干的就是词法分析的活。上一章我们已经讲到了 Sizzle 的用法,实际上就是 jQuery.find 函数,只不过还涉及到 jQuery.fn.find。jQuery.find 函数考虑的很周到,对于处理 #id、.class 和 TagName 的情况,都比较简单,通过转载 2017-11-09 11:16:45 · 686 阅读 · 0 评论 -
JQuery3.1.1源码解读(五)【select 函数】
select 函数前面已经介绍了 tokensize 函数的功能,已经生成了一个 tokens 数组,而且对它的组成我们也做了介绍,下面就是介绍对这个 tokens 数组如何处理。DOM 元素之间的连接关系大概有 > + ~ 几种,包括空格,而 tokens 数组中是 type 是有 tag、attr 和连接符之分的,区分它们 Sizzle 也是有一套规则的,比如上一章我们所讲的 Expr 对象,它转载 2017-11-09 11:26:24 · 467 阅读 · 0 评论 -
JQuery3.1.1源码解读(六)【compile】
compile讲了这么久的 Sizzle,总感觉差了那么一口气,对于一个 selector,我们把它生成 tokens,进行优化,优化的步骤包括去头和生成 seed 集合。对于这些种子集合,我们知道最后的匹配结果是来自于集合中的一部分,似乎接下来的任务也已经明确:对种子进行过滤(或者称其为匹配)。匹配的过程其实很简单,就是对 DOM 元素进行判断,而且弱是那种一代关系(>)或临近兄弟关系(+),不满转载 2017-11-09 11:29:11 · 550 阅读 · 0 评论 -
JQuery3.1.1源码解读(七)【Callbacks】
讲真,Sizzle 的源码真的太压抑了,以至于写 Sizzle 文章的这段时间里都非常的痛苦,刚开始觉得它还挺有意思的,越到后面越觉得代码很难读懂,烦。寒假也过完了,在家里待了两周的时间,感觉不错,这期间学习的事情都抛在脑后,学得非常少,把 cctv 的《中国通史》系列节目给看完了,对于历史迷的我来说,也算是一种心安吧。今天的主题不在时 Sizzle,停顿了两周,感觉清醒了很多,之前被 Sizzle转载 2017-11-09 11:32:54 · 448 阅读 · 0 评论 -
JQuery3.1.1源码解读(八)【Data】
不打算介绍 deferred,或者放到后面以后去介绍,因为我对于 js 的异步存在着恐惧,看了半天代码,发现,用挺好用的,一看源码,全傻眼了。数据缓存jQuery 最初以便捷 DOM 操作而流行,而 DOM 的本质其实就是对象,开发者们又习惯性的将一些标志直接扔给 DOM 本事,这会带来内存泄漏的问题。比如对于斐波那契数列,有人说用递归,用迭代,如果用 js 来写的话有一个比较有意思的方法,就是用缓转载 2017-11-09 11:42:13 · 490 阅读 · 0 评论 -
JQuery3.1.1源码解读(九)【prevObject】
学习了 prevObject 之后发现,我之前写的一篇博客介绍 pushStack 函数那个内容是有问题的。本来我以为这个 pushStack 函数就是一个普通的函数,它接受一个 DOM (数组)参数,把该参数合并到一个 jQuery 对象中并返回该 jQuery 对象。后来我也疑惑过一段时间,为什么看不到这个函数的使用,而且为什么要把它放到 jQuery.fn 上,直到今天,才恍然大悟。jQuer转载 2017-11-10 09:10:16 · 3031 阅读 · 0 评论 -
JQuery3.1.1源码解读(二)【init构造器】
init 构造器前面一讲[总体架构]已经介绍了 jQuery 的基本情况,这一章主要来介绍 jQuery 的入口函数 jQuery.fn.init。由于这个函数直接和 jQuery() 的参数有关,先来说下能接受什么样的参数。源码中接受 3 个参数:init: function (selector, context, root) { ...}jQuery(),空参数,这个会直接返回一个空的 j转载 2017-11-09 10:58:12 · 692 阅读 · 0 评论