jQuery 源码深入分析笔记(2) 变量列表

2019-07-26 10:48栏目:编程学习

jQuery的焦点是Write Less, Do More。它对JavaScript的支出风格侵入性不及YUI那么强,当然也不比Dojo和YUI如此变得壮大。它巨大的简化了JavaScript的平凡支付专业,首要是DOM元素的操作(从名字Query就能够见到)。别的一个关键职业便是每种前端开拓者都亟待直面包车型客车浏览器包容性。jQuery包容全体主流浏览器的大部版本,从万恶的IE6开首直到Firefox,Chrome等当代浏览器。除了处于主导的一小部分代码之外,剩下的jQuery都是安枕无忧的函数,增加性很强。
jQuery代码的头顶是License声明。采用了GPLv2和MIT双共谋。而在jQuery注明下是另二个品种的申明:Sizzle。那是jQuery作者其它的三个开源项目,在MIT、BSD和GPL下发布。它是一个独自的selector完结(pure-JavaScript CSS selector engine),能够独立行使。它的回退版本唯有3KB多或多或少,堪称效能最高的采取器达成。jQuery从1.3起来应用Sizzle替代了原先的selector落成。
JS代码中有大批量的()和{},这里运用的是Vim阅读,因为%命令能够高速的找到相称的括号。
代码总体布局和变量
jQuery的代码全部上就是一个佚名函数调用:

_jQuery = window.jQuery;
_$ = window.$;
那三个变量是jQuery独一使用的四个全局变量。在jQuery.noConflict()函数中,会把那五个变量复苏回去。
对此浏览器检验,jQuery使用的是检查UserAgent,而并没有使用天性检验。
rwebkit = /(webkit)[ /]([w.] )/,
ropera = /(opear)(?:.*version)?[ /](w )/,
rmsie = /(msie) ([w.] )/,
rmozilla = /(mozilla)(?:.*? rv:([w.] ))?/,
开端化函数init
jQuery对JS对象的拍卖相比较绕,而最终目标就是把jQuery选用器得到的结果产生和数组差不离的二个对象。有length,first,last等。因为$("...")正是从DOM树从选取部分节点出来。不过,$还也会有为数十分的多另外职能,比方常用的$(function() { ... })用来页面加载后初始化实行,$("<..>...</...>")来直接获得一个节点,用来append到DOM树中。
接下去从93行早先就是不短的一段init函数。Init: function(selector, context, rootjQuery)
步骤:
1、Selector是不法参数:空字符,null和undefined则直接重返this。即有暗中同意属性的jQuery对象。
2、Selector是DOMElement。即用原生的JS,譬喻getElementById等得到的因素。那么,相当于把原生的DOM对象用$包装一次。把这几个因素放到里面数组的第一个职分,并把length设置为1。然后重返。
3、特殊优化管理$("body")。即document.body成分。
4、Selector是以<开首,以>结尾的字符串。那么只若是想用字符串新建多少个DOM元素。例如$("<a href='
quickExpr = /^(?:[^<]*(<[wW] >)[^>]*$|#([w-]*)$)/。在quickExpr.exec(selector)后,倘使是HTML字符串,那么会猎取[match, match, undefined],而#id情势会获得[#id, undefined, id]的结果。那样就把字符串分歧开了。
对此HTML字符串,假诺唯有三个tag,那么间接调用createElement。不然调用四个createFragment帮助函数,那几个函数使用createDocumentFragment,然后把富有tag都插进去。
createFragment完成在5892行,这里有四个值得注意的地方就是jQuery对于HTML片段做了缓存管理。而且对于不一致的浏览器和因素有两样的处理,笔者写了大段的批注表达。归咎起来正是(1)只缓存小于0.5KB的小部分。(2)selected状态不缓存。(3)IE6的<object>和<embed>成分不缓存。(4)WebKit不缓存元素的checked属性。以上这一个不缓存的案由是jQuery使用克隆(Clone)节点的方法举办缓存,而2-4事关的图景在Clone时会错过。jQuery使用了正则,只怕jQuery.support协理函数来实行是或不是缓存的计谋判别。这里先略过。jQuery.support牵扯非常多浏览器相关主题素材。
5、假如在4中反省到是#id,则一向调用document.getElementById
6、如若selector是function,则把这几个函数当作是document.ready的事件管理函数
7、剩余的种种情状,譬喻传入了context等。统一调用三个find(selector)来拍卖。那些函数今后再议。(5109行,jQuery.find = Sizzle; jQuery.expr = Sizzle.selectors; 注脚,别的复杂的selector表明式都扔给Sizzle项目了)
jQuery基本成员
jQuery被规划成一个行事和数组很像的目的。所以要求一些调换方法和着力品质。
1、jquery:版本号。最简便易行的得到版本号的方法:$().jquery
2、length和size():长度。
3、toArray():转换成JS数组
4、get(num):再次回到第N个要素。假设传入null,则直接再次来到toArray()的结果。这里重回的就是DOMElement了。
5、pushStack():参见 。内部new了二个新的jQuery对象,然后把elems和selector获得的结果合併进去,然后回到这么些新的jQuery对象。这里有个prevObject属性的安装,往下看end()函数。
6、each(callback, args):遍历数组内的要素。内部调用了$.each Utiltiy。
7、ready(fn):其实和$(function() { })是等价的。
8、eq(i):i允许正负数字,并且回去的还是是jQuery对象,只可是独有二个要素了。其实只是slice的卷入。
9、first()和last():其实正是eq(0)和eq(-1),很简单的多少个打包。
10、slice():依据参数获得数组一部分的引用。内部使用pushStack完结的。所以回来的也是四个新的jQuery对象。
11、map(callback):对每一个成分依次调用callback。把本来的成分A的数组映射为成分B的数组。callback正是成分A->成分B的映射函数。函数式编制程序(FP)里很基础的一个定义。
12、end(): 参见 。那个是重回选拔器的上二个场地。重回的是jQuery.prevObject属性。那天特性是在pushStack函数里面安装的,它在回去新的jQuery对象此前,把那些新指标的prevObject设置为this。那样频仍pushStack之后就成为了一个链表(chain)。而end()正是本着链表往前走叁个节点。经过了selector之后,根的prevObject是document。比方$("body div").prevObject便是Document。
extend函数
在jQuery基本成员之后,全体其余成员都以用extend加上去的。证明:
jQuery.extend = jQuery.fn.extend = function() { }
把target前面包车型客车有所object参数的天性全体赋值到target上,假若第三个参数是boolean值,则用来钦点是不是深拷贝。然后回来修改过的target(不是新目标,extend函数直接更换原对象)。

复制代码 代码如下:

你或然感兴趣的稿子:

  • jQuery 源码解析笔记(7) Queue
  • jQuery 源码深入分析笔记(5) jQuery.support
  • jQuery 源码深入分析笔记(6) jQuery.data
  • jQuery 源码解析笔记(4) Ready函数
  • jQuery源码解析之Event事件解析
  • jQuery 源码解析笔记(3) Deferred机制

(function (window, undefined) {
// ...
})(window);

这是为了防止污染全局对象,同期也得以低价的田间管理实施上下文。这几个技术在JS代码中有时见到,在jQuery代码中也很常见。比方,在jQuery和别的JS库同不经常候利用时,$符号恐怕早就被利用了。为了还是接纳$符号:

复制代码 代码如下:

(function ($) {
// $("...")... 照常使用$
})(jQuery);

在此处流传真正的jQuery对象。
下边进入真正的贯彻部分,首先是$,约等于jQuery对象的宣示,其中最中央的八个成员也列出来了:

复制代码 代码如下:

var jQuery = (function() {
var jQuery = function(selector, context) {
// 真正的开首化函数
return new jQuery.fn.init(selector, context, rootjQuery);
},
// 第一次全国代表大会堆变量评释
// fn是生死攸关的函数达成点,也是jQuery插件的起源。实际上正是JS原型
jQuery.fn = jQuery.prototype = {
};
// 叁个恢弘对象用的函数,能够动态地往对象上加成员。未来往jQuery内部加成员都以用extend函数实现的。
jQuery.extend = jQuery.fn.extend = function() {
};
// ...
return jQuery;
})();

jQuery对象是着力目标,全数$(...)得到的都以jQuery对象,除了少部分直接达成在jQuery下的Utility函数之外,大多数函数都以用extend方法加到jQuery对象里的。

你或者感兴趣的稿子:

  • jQuery 源码深入分析笔记(5) jQuery.support
  • jQuery 源码深入分析笔记(6) jQuery.data
  • jQuery 源码分析笔记(4) Ready函数
  • jQuery 源码剖判笔记(2) 变量列表
  • jQuery源码深入分析之伊芙nt事件剖析
  • jQuery 源码剖析笔记(7) Queue

版权声明:本文由威尼斯人app发布于编程学习,转载请注明出处:jQuery 源码深入分析笔记(2) 变量列表