关闭

JQuery3.1.1源码解读(十九)【ajax】

关于 ajax,东西太多了,我本来想避开 ajax,避而不提,但觉得 ajax 这么多内容,不说实在可惜。写在 jQuery 的 ajax 之前首先,我们还是来了解一下 js 中的 http 请求。http 协议中有请求体和响应体,对于请求的一方,无论是哪一种语言,我比较关心如下几个方面:请求的配置参数包括 url,post/get 等;请求有请求头,那么请求头的参数又该由哪个函数来设置;如何判断请...
阅读(125) 评论(0)

JQuery3.1.1源码解读(十八)【class】

眼看 jQuery 的源码就快到头了,后面还有几个重要的内容,包括 ajax 和动画操作,加油把它们看完,百度前端学院的新一批课程也开始了。百度前端学院。class 的的操作应该算是比较愉快的,因为内容不是很多,或者说,内容涉及到的原生操作不是很大,就一个 className 或 getAttribute,主要还是来看下它涉及到的一些兼容性操作。class 操作先来说一个比较有趣的 class 操作...
阅读(132) 评论(0)

JQuery3.1.1源码解读(十七)【css】

样式操作也是 jQuery 比较常用的一个操作,就我本人而言,这个 css 函数用多了,感觉自己有点傻乎乎的,主要还是自己不了解 js 中 css 的真正含义。不过现在不怕了。开始之前,先抛开 jQuery,我们来看看一个有趣的面试题(据说是一道微信面试题)。一道很有深度的面试题用原生的 js 获得一个 HTML 元素的 background-color,当然,这只是一个引入,为什么不是 color...
阅读(167) 评论(0)

JQuery3.1.1源码解读(十六)【dom-html】

上一章谈到了 dom 的几个插入操作,虽然插入的方式多种多样,但只要在懂了原生方法等基础上,代码看起来都不是很复杂。比较有意思的一个函数就是 buildFragment 方法,用来将 html 字符串转换成 dom 碎片。本章来看一下 dom 的其它方法。html、text 方法说到 elem 的操作,就必然要提一下 elem 的类型。NodeType,一个节点的 nodeType 为 1 表示元素...
阅读(122) 评论(0)

JQuery3.1.1源码解读(十五)【dom-domManip】

可能你会觉得这个名字很奇怪这个名字很奇怪,为什么叫做 domManip,即所谓的 dom 微操作。其实在 jQuery 中有很多重要的 dom 操作,这些操作使用的频率都非常高,不过这些操作普遍有一个特点,就是需要进行微调,比如将字符串转换成 elem 元素,判断是否为 script 脚本。所以 jQuery 内部一个统一的做法,就是采用 callbacks 的方式,先对要进行 dom 操作的内部函...
阅读(123) 评论(0)

JQuery3.1.1源码解读(十四)【event-trigger】

以前,我只知道,只有当对浏览器中的元素进行点击的时候,才会出发 click 事件,其它的事件也一样,需要人为的鼠标操作。后来随着学习的不断深入,才知道原来 JS 可以写函数来控制事件的执行,这样子写代码才有意思。记得很久很久以前一些恶意网站,明明鼠标没有点击,却被网站强行的点击了某个链接,大概实现的方式就是这样的吧。原生事件其实 JS 的原生事件已经做得挺好了,只是 jQuery 将其进行封装,做的...
阅读(64) 评论(0)

JQuery3.1.1源码解读(十三)【event-on】

通过前面一章对于 addEvent 库的介绍,它的兼容性超级棒,据说对于 IE4、5 都有很好的兼容性,这和 jQuery 的原理是一致的,而在 jQuery 中,有一个对象与其相对于,那就是 event。上上章就已经说过了,这个 jQuery.fn.on这个函数最终是通过 jQuery.event对象的 add 方法来实现功能的,当然,方法不局限于 add,下面就要对这些方法进行详细的介绍。关于...
阅读(53) 评论(0)

JQuery3.1.1源码解读(十二)【event-extend】

前面一章,大概是一个总览,介绍了事件绑定的初衷和使用,通过了解,知道其内部是一个什么样的流程,从哪个函数到哪个函数。无论 jQuery 的源码简单或者复杂,有一点可以肯定,jQuery 致力于解决浏览器的兼容问题,最终是服务于使用者。一些遗留问题前面介绍 bind、delegate 和它们的 un 方法的时候,经提醒,忘记提到一些内容,却是我们经常使用的。比如 $('body').click,$('...
阅读(82) 评论(0)

JQuery3.1.1源码解读(十一)【event-main】

这次的内容是来介绍关于 jQuery 的事件委托。不过在之前呢有必要先来了解一下 JS 中的事件委托与冒泡,我之前也写过类似的博客,事件冒泡与捕获由 JS 事件引入事件是 JS DOM 中极具活力的内容,你可以随时监听 DOM 的变化,并对它们及时的做出反应,如果你不是太懂 JS 中的事件,建议你先去看一些相关介绍的文章,直接看 jQuery 中的事件委托头会头大的。事件的处理顺序由两个环节,一个是...
阅读(94) 评论(0)

JQuery3.1.1源码解读(十)【hooks】

hooks 在英语中的意思表示钩子或挂钩,在 jQuery 中也有 hooks 这么一个概念,它的功能在考虑到一些兼容性和其它特殊情况的条件下,优先考虑这些特殊情况,而后才去用普通的方法处理,这种说法还是比较形象的。hooks 的使用非常用技术含量,可以支撑在原来的基础上扩展,而对于接口则无需改变,举个例子,像 fn.css() 这个函数我们都是非常熟悉的了,拿来就用,而不需要考虑浏览器的兼容性,这...
阅读(101) 评论(0)

JQuery3.1.1源码解读(九)【prevObject】

学习了 prevObject 之后发现,我之前写的一篇博客介绍 pushStack 函数那个内容是有问题的。本来我以为这个 pushStack 函数就是一个普通的函数,它接受一个 DOM (数组)参数,把该参数合并到一个 jQuery 对象中并返回该 jQuery 对象。后来我也疑惑过一段时间,为什么看不到这个函数的使用,而且为什么要把它放到 jQuery.fn 上,直到今天,才恍然大悟。jQuer...
阅读(54) 评论(0)

JQuery3.1.1源码解读(八)【Data】

不打算介绍 deferred,或者放到后面以后去介绍,因为我对于 js 的异步存在着恐惧,看了半天代码,发现,用挺好用的,一看源码,全傻眼了。数据缓存jQuery 最初以便捷 DOM 操作而流行,而 DOM 的本质其实就是对象,开发者们又习惯性的将一些标志直接扔给 DOM 本事,这会带来内存泄漏的问题。比如对于斐波那契数列,有人说用递归,用迭代,如果用 js 来写的话有一个比较有意思的方法,就是用缓...
阅读(68) 评论(0)

JQuery3.1.1源码解读(七)【Callbacks】

讲真,Sizzle 的源码真的太压抑了,以至于写 Sizzle 文章的这段时间里都非常的痛苦,刚开始觉得它还挺有意思的,越到后面越觉得代码很难读懂,烦。寒假也过完了,在家里待了两周的时间,感觉不错,这期间学习的事情都抛在脑后,学得非常少,把 cctv 的《中国通史》系列节目给看完了,对于历史迷的我来说,也算是一种心安吧。今天的主题不在时 Sizzle,停顿了两周,感觉清醒了很多,之前被 Sizzle...
阅读(63) 评论(0)

JQuery3.1.1源码解读(六)【compile】

compile讲了这么久的 Sizzle,总感觉差了那么一口气,对于一个 selector,我们把它生成 tokens,进行优化,优化的步骤包括去头和生成 seed 集合。对于这些种子集合,我们知道最后的匹配结果是来自于集合中的一部分,似乎接下来的任务也已经明确:对种子进行过滤(或者称其为匹配)。匹配的过程其实很简单,就是对 DOM 元素进行判断,而且弱是那种一代关系(>)或临近兄弟关系(+),不满...
阅读(59) 评论(0)

JQuery3.1.1源码解读(五)【select 函数】

select 函数前面已经介绍了 tokensize 函数的功能,已经生成了一个 tokens 数组,而且对它的组成我们也做了介绍,下面就是介绍对这个 tokens 数组如何处理。DOM 元素之间的连接关系大概有 > + ~ 几种,包括空格,而 tokens 数组中是 type 是有 tag、attr 和连接符之分的,区分它们 Sizzle 也是有一套规则的,比如上一章我们所讲的 Expr 对象,它...
阅读(56) 评论(0)

JQuery3.1.1源码解读(四)【Tokens 词法分析】

Tokens 词法分析其实词法分析是汇编里面提到的词汇,把它用到这里感觉略有不合适,但 Sizzle 中的 tokensize函数干的就是词法分析的活。上一章我们已经讲到了 Sizzle 的用法,实际上就是 jQuery.find 函数,只不过还涉及到 jQuery.fn.find。jQuery.find 函数考虑的很周到,对于处理 #id、.class 和 TagName 的情况,都比较简单,通过...
阅读(54) 评论(0)

JQuery3.1.1源码解读(三)【Sizzle 选择器】

Sizzle 选择器Sizzle 原本是 jQuery 中用来当作 DOM 选择器的,后来被 John Resig 单独分离出去,成为一个单独的项目,可以直接导入到项目中使用。本来我们使用 jQuery 当作选择器,选定一些 #id 或 .class,使用 document.getElementById 或 document.getElemensByClassName 就可以很快锁定 DOM 所在的...
阅读(79) 评论(0)

JQuery3.1.1源码解读(二)【init构造器】

init 构造器前面一讲[总体架构]已经介绍了 jQuery 的基本情况,这一章主要来介绍 jQuery 的入口函数 jQuery.fn.init。由于这个函数直接和 jQuery() 的参数有关,先来说下能接受什么样的参数。源码中接受 3 个参数:init: function (selector, context, root) { ... }jQuery(),空参数,这个会直接返回一个空的 j...
阅读(56) 评论(0)

JQuery3.1.1源码解读(一)【jQuery总体架构】

jQuery 总体架构首先,jQuery 是一个开发框架,它的火爆程度已经无法用言语来形容,当你随便打开一个网站,一半以上直接使用了 jQuery。或许,早几年,一个前端工程师,只要会写 jQuery,就可以无忧工作。虽说最近 react、vue 很火,但 jQuery 中许多精彩的方法和逻辑值得每一个前端人员学习。和其众多的框架一样,总要把接口放到外面来调用,内部往往是一个闭包,避免环境变量的污染...
阅读(56) 评论(0)
    个人资料
    • 访问:1001110次
    • 积分:14728
    • 等级:
    • 排名:第898名
    • 原创:311篇
    • 转载:706篇
    • 译文:72篇
    • 评论:265条
    博客专栏
    文章分类
    打赏
    如果你觉得我的文章对您有用,请随意打赏。 微信 支付宝