jQuery.API源码深入剖析以及应用实现(1) － 核心函数篇
前言
Jquery(http://jquery.com/)是一个轻量级，快速简洁的Javascript框架，它的容量小巧，简洁和简短的语法， 容易记；用户能更方便地处理HTML DOM、Events、实现动画效果，并且提供Ajax的支持。目前最新版本为jQuery 1.3.1（http://jqueryjs.googlecode.com/files/jquery-1.3.1.js），这系列文章将对该版本的源码进行阐述。
现在开始本系列的第一篇，Jquery核心函数，内容主要包括：
分析
1. 在Jquery的应用开发中，我们经常看到这样的代码：
$("div.container").css("display","none");//将div节点下样式值为container的节点设置为不显示
varwidth=$("div.container").width();//得到div节点下样式值为container的宽度
varhtml=$(document.getElementById("result")).html();//得到id为result的节点的innerHTML值
$("#result",document.forms[0]).css("color","red");//将在第一个Form节点下id为result的字体颜色设置为红色
$("<div>hello,world</div>").appendTo("#result");//将HTML字符串信息内部追加到id为result的节点末尾
那么$(...)里面的参数，Jquery API中是怎样辨认参数是表达式，id，HTML字符串，还是DOM元素呢？
现在我们来深入剖析Jquery源码。
2. 这里，我先来做个测试，我将Jquery API简化为这样的代码：
(function(){
varwindow=this,
jQuery=window.jQuery=window.$=function(selector,context){
returnnewjQuery.fn.init(selector,context);
};
jQuery.fn=jQuery.prototype={
init:function(selector,context){
alert(selector);//弹出警告框
}
};
})();
window.onload=function(){
$("div.container");//得到“div.container”
$("#result");//得到“#result”
$("<div>hello,world</div>");//得到“<div>hello,world</div>”
$(document.getElementById("result"));//得到“[object]”
}
从这里我们可以得出，实际上$里面的参数(表达式字符串，ID字符串，HTML字符串，DOM对象)，主要就是在init方法中各自实现它们自己的逻辑。
现在列出init方法的具体实现：
init:function(selector,context){
//Makesurethataselectionwasprovided
selector=selector||document;
//Handle$(DOMElement)
if(selector.nodeType){
this[0]=selector;
this.length=1;
this.context=selector;
returnthis;
}
//HandleHTMLstrings
if(typeofselector==="string"){
//ArewedealingwithHTMLstringoranID?
varmatch=quickExpr.exec(selector);
//Verifyamatch,andthatnocontextwasspecifiedfor#id
if(match&&(match[1]||!context)){
//HANDLE:$(html)->$(array)
if(match[1])
selector=jQuery.clean([match[1]],context);
//HANDLE:$("#id")
else{
varelem=document.getElementById(match[3]);
//HandlethecasewhereIEandOperareturnitems
//bynameinsteadofID
if(elem&&elem.id!=match[3])
returnjQuery().find(selector);
//Otherwise,weinjecttheelementdirectlyintothejQueryobject
varret=jQuery(elem||[]);
ret.context=document;
ret.selector=selector;
returnret;
}
//HANDLE:$(expr,[context])
//(whichisjustequivalentto:$(content).find(expr)
}else
returnjQuery(context).find(selector);
//HANDLE:$(function)
//Shortcutfordocumentready
}elseif(jQuery.isFunction(selector))
returnjQuery(document).ready(selector);
//Makesurethatoldselectorstateispassedalong
if(selector.selector&&selector.context){
this.selector=selector.selector;
this.context=selector.context;
}
returnthis.setArray(jQuery.makeArray(selector));
}
3. 现在分析 表达式，id，HTML字符串，DOM元素等等各自的实现：
1）形如 $(document.getElementById("result")) 【jQuery(elements)】DOM元素的实现，通过init方法中的以下代码：
//Handle$(DOMElement)
if(selector.nodeType){
this[0]=selector;
this.length=1;
this.context=selector;
returnthis;
}
selector.nodeType判断当selector为元素节点时，将length置为1，并且赋值于context，实际上context作为init的第二个参数，它意味着它的上下文节点就是selector该点，返回它的$(...)对象。
2）形如 $("<div>hello,world</div>") 【jQuery(html,[ownerDocument])】HTML字符串的实现，通过init方法中的以下代码：
//判断selector为字符串
if(typeofselector==="string"){
//quickExpr=/^[^<]*(<(.|s)+>)[^>]*$|^#([w-]+)$/
//利用检查正则表达式HTML字符串还是元素ID字符串
varmatch=quickExpr.exec(selector);
if(match&&(match[1]||!context)){
//处理HTML字符串
if(match[1])
selector=jQuery.clean([match[1]],context);
//处理形如$("#id")
else{
//……
}
}
//处理形如$("div.container")的表达式字符串
else
//……
}
//处理形如$(function)，$(document).ready(function(){})的表示
elseif(jQuery.isFunction(selector)){
}
//……
关键看到这样的一句代码，selector = jQuery.clean( [ match[1] ], context ); 继续查看clean都做了些什么：
clean:function(elems,context,fragment){
context=context||document;
//!context.createElementfailsinIEwithanerrorbutreturnstypeof'object'
if(typeofcontext.createElement==="undefined")
context=context.ownerDocument||context[0]&&context[0].ownerDocument||document;
//Ifasinglestringispassedinandit'sasingletag
//justdoacreateElementandskiptherest
if(!fragment&&elems.length===1&&typeofelems[0]==="string"){
varmatch=/^<(w+)s*/?>$/.exec(elems[0]);
if(match)
return[context.createElement(match[1])];
}
varret=[],scripts=[],div=context.createElement("div");
jQuery.each(elems,function(i,elem){
if(typeofelem==="number")
elem+='';
if(!elem)
return;
//ConverthtmlstringintoDOMnodes
if(typeofelem==="string"){
//Fix"XHTML"-styletagsinallbrowsers
elem=elem.replace(/(<(w+)[^>]*?)/>/g,function(all,front,tag){
returntag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)?
all:
front+"></"+tag+">";
});
//Trimwhitespace,otherwiseindexOfwon'tworkasexpected
vartags=jQuery.trim(elem).toLowerCase();
varwrap=
//optionoroptgroup
!tags.indexOf("<opt")&&
[1,"<selectmultiple='multiple'>","</select>"]||
!tags.indexOf("<leg")&&
[1,"<fieldset>","</fieldset>"]||
tags.match(/^<(thead|tbody|tfoot|colg|cap)/)&&
[1,"<table>","</table>"]||
!tags.indexOf("<tr")&&
[2,"<table><tbody>","</tbody></table>"]||
//<thead>matchedabove
(!tags.indexOf("<td")||!tags.indexOf("<th"))&&
[3,"<table><tbody><tr>","</tr></tbody></table>"]||
!tags.indexOf("<col")&&
[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"]||
//IEcan'tserialize<link>and<script>tagsnormally
!jQuery.support.htmlSerialize&&
[1,"div<div>","</div>"]||
[0,"",""];
//Gotohtmlandback,thenpeeloffextrawrappers
div.innerHTML=wrap[1]+elem+wrap[2];
//Movetotherightdepth
while(wrap[0]--)
div=div.lastChild;
//RemoveIE'sautoinserted<tbody>fromtablefragments
if(!jQuery.support.tbody){
//Stringwasa<table>,*may*havespurious<tbody>
vartbody=!tags.indexOf("<table")&&tags.indexOf("<tbody")<0?
div.firstChild&&div.firstChild.childNodes:
//Stringwasabare<thead>or<tfoot>
wrap[1]=="<table>"&&tags.indexOf("<tbody")<0?
div.childNodes:
[];
for(varj=tbody.length-1;j>=0;--j)
if(jQuery.nodeName(tbody[j],"tbody")&&!tbody[j].childNodes.length)
tbody[j].parentNode.removeChild(tbody[j]);
}
//IEcompletelykillsleadingwhitespacewheninnerHTMLisused
if(!jQuery.support.leadingWhitespace&&/^s/.test(elem))
div.insertBefore(context.createTextNode(elem.match(/^s*/)[0]),div.firstChild);
elem=jQuery.makeArray(div.childNodes);
}
if(elem.nodeType)
ret.push(elem);
else
ret=jQuery.merge(ret,elem);
});
if(fragment){
for(vari=0;ret[i];i++){
if(jQuery.nodeName(ret[i],"script")&&(!ret[i].type||ret[i].type.toLowerCase()==="text/javascript")){
scripts.push(ret[i].parentNode?ret[i].parentNode.removeChild(ret[i]):ret[i]);
}else{
if(ret[i].nodeType===1)
ret.splice.apply(ret,[i+1,0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))));
fragment.appendChild(ret[i]);
}
}
returnscripts;
}
returnret;
}
这么长的一串代码 实际上最后访问的是一个ret为变量的数组，而数组中的元素变为以DOM元素的对象，而它的innerHTML正好就是刚才的HTML字符串。
3）形如 $("#result") 【jQuery(expression,[context])】ID字符串的实现，通过init方法中的以下代码：
//处理形如$("#result")
else{
//match[3]得到ID的值如：result
varelem=document.getElementById(match[3]);
if(elem&&elem.id!=match[3])
returnjQuery().find(selector);
//调用jQuery(elements)方式
varret=jQuery(elem||[]);
//默认上下文DOM为window.document
ret.context=document;
ret.selector=selector;
returnret;
}
根据match[3]可以得到DOM对象elem，并且调用2)介绍的jQuery(elements)，最后返回一个ret为变量的jquery对象。
4）形如 $("div .container") 【jQuery(expression,[context])】表达式字符串的实现，通过init方法中的以下代码：
//处理形如$("div.container")的表达式字符串
else
returnjQuery(context).find(selector);
关键看到这样的一句代码，jQuery().find( selector ); 继续查看find都做了些什么：
find:function(selector){
//当表达式不包含“,”符号时候
if(this.length===1&&!/,/.test(selector)){
varret=this.pushStack([],"find",selector);
ret.length=0;
jQuery.find(selector,this[0],ret);
returnret;
}
//当表达式包含“,”符号时候
else{
varelems=jQuery.map(this,function(elem){
returnjQuery.find(selector,elem);
});
returnthis.pushStack(/[^+>][^+>]/.test(selector)?
jQuery.unique(elems):
elems,"find",selector);
}
}
先看下表达式不包含“,”符号的时候，调用pushStack方法，方法为：
/将一系列元素推入栈中
pushStack:function(elems,name,selector){
varret=jQuery(elems);
//将上个对象的引用推入栈中
ret.prevObject=this;
ret.context=this.context;
//关键字为find时，在原有selector的基础上，继续增加selector
//如$("div").find("p")意思就是$("divp")
if(name==="find")
ret.selector=this.selector+(this.selector?"":"")+selector;
elseif(name)
ret.selector=this.selector+"."+name+"("+selector+")";
//返回最新的Jquery对象
returnret;
}
注意这里看到 ret.prevObject= this; 这个方法在$(...).andSelf()和$(...).end()中调用，对于筛选或查找后的元素，返回前一次元素状态它是很有用的。
接着调用 jQuery.find( selector, this[0], ret ); ，首先我们看到有这样的几句代码：
jQuery.find=Sizzle; jQuery.filter=Sizzle.filter; jQuery.expr=Sizzle.selectors; jQuery.expr[":"]=jQuery.expr.filters; //…… window.Sizzle=Sizzle;
jQuery.find方法转去调用全局的Sizzle对象了（实际上这里运用到了Javascript设计模式中的适配器模式，jquery.find 实际上调用的是Sizzle的对象。关于Javascript适配器模式，我将接下来的Javascript乱弹设计模式系列文章中具体叙 述），Sizzle对象定义为：
varSizzle=function(selector,context,results,seed){
results=results||[];
context=context||document;
if(context.nodeType!==1&&context.nodeType!==9)
return[];
if(!selector||typeofselector!=="string"){
returnresults;
}
varparts=[],m,set,checkSet,check,mode,extra,prune=true;
//Resetthepositionofthechunkerregexp(startfromhead)
chunker.lastIndex=0;
while((m=chunker.exec(selector))!==null){
parts.push(m[1]);
if(m[2]){
extra=RegExp.rightContext;
break;
}
}
if(parts.length>1&&origPOS.exec(selector)){
if(parts.length===2&&Expr.relative[parts[0]]){
set=posProcess(parts[0]+parts[1],context);
}else{
set=Expr.relative[parts[0]]?
[context]:
Sizzle(parts.shift(),context);
while(parts.length){
selector=parts.shift();
if(Expr.relative[selector])
selector+=parts.shift();
set=posProcess(selector,set);
}
}
}else{
varret=seed?
{expr:parts.pop(),set:makeArray(seed)}:
Sizzle.find(parts.pop(),parts.length===1&&context.parentNode?context.parentNode:context,isXML(context));
set=Sizzle.filter(ret.expr,ret.set);
if(parts.length>0){
checkSet=makeArray(set);
}else{
prune=false;
}
while(parts.length){
varcur=parts.pop(),pop=cur;
if(!Expr.relative[cur]){
cur="";
}else{
pop=parts.pop();
}
if(pop==null){
pop=context;
}
Expr.relative[cur](checkSet,pop,isXML(context));
}
}
if(!checkSet){
checkSet=set;
}
if(!checkSet){
throw"Syntaxerror,unrecognizedexpression:"+(cur||selector);
}
if(toString.call(checkSet)==="[objectArray]"){
if(!prune){
results.push.apply(results,checkSet);
}elseif(context.nodeType===1){
for(vari=0;checkSet[i]!=null;i++){
if(checkSet[i]&&(checkSet[i]===true||checkSet[i].nodeType===1&&contains(context,checkSet[i]))){
results.push(set[i]);
}
}
}else{
for(vari=0;checkSet[i]!=null;i++){
if(checkSet[i]&&checkSet[i].nodeType===1){
results.push(set[i]);
}
}
}
}else{
makeArray(checkSet,results);
}
if(extra){
Sizzle(extra,context,results,seed);
}
returnresults;
};
呵呵，好长的一段代码，实际最关键的一句代码：Sizzle.find(parts.pop(),parts.length===1&&context.parentNode?context.parentNode:context,isXML(context));
对表达式字符串进行解析，最后返回一个jQuery对象，它就是 表达式字符串 最后想要的jQuery对象。
当表达式包含“,”符号的时候，查看这样的一句代码：return this.pushStack( /[^+>] [^+>]/.test( selector ) ? jQuery.unique( elems ) : elems, "find", selector );
它的意思是当表达式字符串包含“+”，“>”作为选择器（比如$("form > input") 或者 $("label + input") ）的时候，将作为jQuery.map返回值的elems数组删除重复的元素，这个是有必要的。
最后也是返回一个jQuery对象，它就是 表达式字符串 最后想要的jQuery对象。
5）最后一点，形如 $(function) ， $(document).ready(function(){})的表示，通过init方法中的以下代码来实现：
//处理形如$(function)，$(document).ready(function(){})的表示
elseif(jQuery.isFunction(selector))
returnjQuery(document).ready(selector);
如果判断selector是函数的话，将执行jQuery(document).ready(selector);
ready方法具体为：
ready:function(fn){
//绑定事件监听
bindReady();
if(jQuery.isReady)
fn.call(document,jQuery);
else
jQuery.readyList.push(fn);
returnthis;
}
bindReady方法将事件绑定在文档加载完毕之后，最后通过调用fn.call( document, jQuery );来激发事件的执行。
好了，jQuery的核心函数的原理机制就是这样的，下一篇我将谈下jQuery对象访问和数据缓存的原理机制。