jquery构造器的实现代码小结


Posted in Javascript onMay 16, 2011

显然,能做到这一步,其实现是相当的复杂,这个实现就是它的init方法,jQuery的真实构造器。它功能也随着版本的升级而升级,越来越长。
2009-01-13发布的1.3版

init: function( selector, context ) { 
// Make sure that a selection was provided 
selector = selector || document; 
// 处理节点参数,直接添加属性到新实例上 
if ( selector.nodeType ) { 
this[0] = selector; 
this.length = 1; 
this.context = selector; 
return this; 
} 
// 处理字符串参数 
if ( typeof selector === "string" ) { 
// 判定是否为HTML片断还是ID 
var match = quickExpr.exec( selector ); 
if ( match && (match[1] || !context) ) { 
// 如果是HTML片断,转换一个由节点构造的数组 
if ( match[1] ) 
selector = jQuery.clean( [ match[1] ], context ); 
// 如果是ID,则查找此元素,如果找到放进空数组中 
else { 
var elem = document.getElementById( match[3] ); 
// Make sure an element was located 
if ( elem ){ 
// 处理 IE and Opera 混淆ID与NAME的bug 
if ( elem.id != match[3] ) 
return jQuery().find( selector ); 
var ret = jQuery( elem ); 
ret.context = document; 
ret.selector = selector; 
return ret; 
} 
selector = []; 
} 
} else 
//使用Sizzle处理其他CSS表达式,生成实例并返回 
return jQuery( context ).find( selector ); 
// 处理函数参数,直接domReady 
} else if ( jQuery.isFunction( selector ) ) 
return jQuery( document ).ready( selector ); 
//处理jQuery对象参数,简单地将其两个属性赋给新实例 
if ( selector.selector && selector.context ) { 
this.selector = selector.selector; 
this.context = selector.context; 
} 
//将上面得到节点数组,用setArray方法把它们变成实例的元素 
return this.setArray(jQuery.makeArray(selector)); 
},

2009-02-19发布的1.32版
init: function( selector, context ) { 
// Make sure that a selection was provided 
selector = selector || document; 
// 处理节点参数,直接添加属性到新实例上 
if ( selector.nodeType ) { 
this[0] = selector; 
this.length = 1; 
this.context = selector; 
return this; 
} 
//处理字符串参数 
if ( typeof selector === "string" ) { 
//判定是否为HTML片断还是ID 
var match = quickExpr.exec( selector ); 
if ( match && (match[1] || !context) ) { 
// 如果是HTML片断,转换一个由节点构造的数组 
if ( match[1] ) 
selector = jQuery.clean( [ match[1] ], context ); 
else { 
var elem = document.getElementById( match[3] ); 
// 如果是ID,则查找此元素,如果找到放进空数组中 
if ( elem && elem.id != match[3] ) 
return jQuery().find( selector ); 
//这里对1.3版做了些优化,更简洁 
var ret = jQuery( elem || [] ); 
ret.context = document; 
ret.selector = selector; 
return ret; 
} 
} else 
//使用Sizzle处理其他CSS表达式,生成实例并返回 
return jQuery( context ).find( selector ); 
// 处理函数参数,进行domReady操作 
} else if ( jQuery.isFunction( selector ) ) 
return jQuery( document ).ready( selector ); 
//处理jQuery对象参数,简单地将其两个属性赋给新实例 
if ( selector.selector && selector.context ) { 
this.selector = selector.selector; 
this.context = selector.context; 
} 
//这里对1.3版做了些扩展,允许传珍上元素集合(HTMLCollection)与节点集合(NodeList), 
//元素数组可能是我们用字符串转换过来的,也可以是用户直接传进来的 
return this.setArray(jQuery.isArray( selector ) ? selector : jQuery.makeArray(selector)); 
},

2010-01-13发布的1.4版
init: function( selector, context ) { 
var match, elem, ret, doc; 
//处理空白字符串,null,undefined参数(新增),返回一个非常纯净的实例 
if ( !selector ) { 
return this; 
} 
// 处理节点参数,直接添加属性到新实例上 
if ( selector.nodeType ) { 
this.context = this[0] = selector;//写法上优化 
this.length = 1; 
return this; 
} 
//处理字符串参数 
if ( typeof selector === "string" ) { 
// 判定是否为HTML片断还是ID 
match = quickExpr.exec( selector ); 
if ( match && (match[1] || !context) ) { 
//如果是HTML片断 
if ( match[1] ) { 
//取得文档对象 
doc = (context ? context.ownerDocument || context : document); 
// 如果是单个标签,直接使用 document.createElement创建此节点并放入数组中 
ret = rsingleTag.exec( selector ); 
if ( ret ) { 
//如果后面跟着一个纯净的JS对象,则为此节点添加相应的属性或样式 
if ( jQuery.isPlainObject( context ) ) { 
selector = [ document.createElement( ret[1] ) ]; 
jQuery.fn.attr.call( selector, context, true ); 
} else { 
selector = [ doc.createElement( ret[1] ) ]; 
} 
} else { 
//改由buildFragment来生成节点集合(NodeList) 
ret = buildFragment( [ match[1] ], [ doc ] ); 
selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes; 
} 
} else { 
// 如果是ID,则查找此元素,如果找到放进空数组中 
elem = document.getElementById( match[2] ); 
if ( elem ) { 
// 处理 IE and Opera 混淆ID与NAME的bug 
if ( elem.id !== match[2] ) { 
return rootjQuery.find( selector ); 
} 
//这里也做了一些优化,原来是很傻地再生成一个jQuery实例 
this.length = 1; 
this[0] = elem; 
} 
this.context = document; 
this.selector = selector; 
return this; 
} 
// 如果字符是很简单的标签选择器,那基本没有必要走Sizzle路线,直接getElementsByTagName,很好的优化 
} else if ( !context && /^\w+$/.test( selector ) ) { 
this.selector = selector; 
this.context = document; 
selector = document.getElementsByTagName( selector ); 
// 如果第二个参数不存在或者是jQuery对象,那么用它或rootjQuery调用find查找目标节点(走Sizzle路线) 
} else if ( !context || context.jquery ) { 
return (context || rootjQuery).find( selector ); 
// HANDLE: $(expr, context) 
// (which is just equivalent to: $(context).find(expr) 
} else { 
//如果第二个参数已指定为某元素节点,转为jQuery对象,走Sizzle路线 
return jQuery( context ).find( selector ); 
} 
// 处理函数参数,直接domReady 
} else if ( jQuery.isFunction( selector ) ) { 
return rootjQuery.ready( selector ); 
} 
//处理jQuery对象参数,简单地将其两个属性赋给新实例 
if (selector.selector !== undefined) { 
this.selector = selector.selector; 
this.context = selector.context; 
} 
//这里又做了些许修改,缘于makeArray可以接受第二个参数(可以是数组或类数组,这时相当合并操作) 
return jQuery.isArray( selector ) ? 
this.setArray( selector ) ://内部用push方法,迅速将一个普通对象变成类数组对象 
jQuery.makeArray( selector, this ); 
},

接着是广受欢迎的2010-02-13发布的1.42版
init: function( selector, context ) { 
var match, elem, ret, doc; 
// 处理空白字符串,null,undefined参数 
if ( !selector ) { 
return this; 
} 
// 处理节点参数 
if ( selector.nodeType ) { 
this.context = this[0] = selector; 
this.length = 1; 
return this; 
} 
// 处理body参数(新增) 
if ( selector === "body" && !context ) { 
this.context = document; 
this[0] = document.body; 
this.selector = "body"; 
this.length = 1; 
return this; 
} 
// 处理字符串参数,分七种情形: 
//①单个标签,带对象属性包 ---> jQuery.merge 
//②单个标签,不带对象属性包 ---> attr + jQuery.merge 
//③复杂的HTML片断 ---> buildFragment + jQuery.merge 
//④ID选择器,与找到的元素的ID不同 ---> getElementById + Sizzle + pushStack 
//⑤ID选择器,与找到的元素的ID相同 ---> getElementById + 简单属性添加 
//⑥标签选择器 ---> getElementsByTagName + jQuery.merge 
//⑦其他CSS表达式 ---> Sizzle + pushStack 
if ( typeof selector === "string" ) { 
match = quickExpr.exec( selector ); 
if ( match && (match[1] || !context) ) { 
if ( match[1] ) { 
doc = (context ? context.ownerDocument || context : document); 
ret = rsingleTag.exec( selector ); 
if ( ret ) { 
if ( jQuery.isPlainObject( context ) ) { 
selector = [ document.createElement( ret[1] ) ]; 
jQuery.fn.attr.call( selector, context, true ); 
} else { 
selector = [ doc.createElement( ret[1] ) ]; 
} 
} else { 
ret = buildFragment( [ match[1] ], [ doc ] ); 
selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes; 
} 
return jQuery.merge( this, selector ); 
} else { 
elem = document.getElementById( match[2] ); 
if ( elem ) { 
if ( elem.id !== match[2] ) { 
return rootjQuery.find( selector ); 
} 
this.length = 1; 
this[0] = elem; 
} 
this.context = document; 
this.selector = selector; 
return this; 
} 
} else if ( !context && /^\w+$/.test( selector ) ) { 
this.selector = selector; 
this.context = document; 
selector = document.getElementsByTagName( selector ); 
return jQuery.merge( this, selector ); 
} else if ( !context || context.jquery ) { 
return (context || rootjQuery).find( selector ); 
} else { 
return jQuery( context ).find( selector ); 
} 
// 处理函数参数,直接domReady 
} else if ( jQuery.isFunction( selector ) ) { 
return rootjQuery.ready( selector ); 
} 
//处理jQuery对象参数 
if (selector.selector !== undefined) { 
this.selector = selector.selector; 
this.context = selector.context; 
} 
//无论是数组还是类数组(如NodeList),统统使用jQuery.makeArray来为实例添加新的元素 
return jQuery.makeArray( selector, this ); 
},

另附上makeArray方法与merge方法,merge方法好神奇啊,
makeArray: function( array, results ) { 
var ret = results || []; 
if ( array != null ) { 
// The window, strings (and functions) also have 'length' 
// The extra typeof function check is to prevent crashes 
// in Safari 2 (See: #3039) 
if ( array.length == null || typeof array === "string" || jQuery.isFunction(array) || (typeof array !== "function" && array.setInterval) ) { 
push.call( ret, array ); 
} else { 
jQuery.merge( ret, array ); 
} 
} 
return ret; 
}, 
merge: function( first, second ) { 
var i = first.length, j = 0; 
if ( typeof second.length === "number" ) { 
for ( var l = second.length; j < l; j++ ) { 
first[ i++ ] = second[ j ]; 
} 
} else { 
while ( second[j] !== undefined ) { 
first[ i++ ] = second[ j++ ]; 
} 
} 
first.length = i; 
return first; 
},

2011-01-23发布的1.5版,其init方法与1.42的变化不大:只有两处做了改动:
//1.42 
- ret = buildFragment( [ match[1] ], [ doc ] ); 
- selector = (ret.cacheable ? ret.fragment.cloneNode(true) : ret.fragment).childNodes; 
//1.5 
+ ret = jQuery.buildFragment( [ match[1] ], [ doc ] ); 
+ selector = (ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment).childNodes; 
//1.42 
- return jQuery( context ).find( selector ); 
//1.5 
+ return this.constructor( context ).find( selector );//目的就是为了不再生成新实例

2011-05-02发布的jquery1.6,变化不大,只是对HTML片断进行了更严密的判定:
// Are we dealing with HTML string or an ID? 
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { 
// Assume that strings that start and end with <> are HTML and skip the regex check 
match = [ null, selector, null ]; 
} else { 
match = quickExpr.exec( selector ); 
}

总体来说,jQuery的构造器已经做得非常之完美,基本上达到“改无可改”的地步了。但是要保证其高效运作,我们还需要一点选择器的知识与了解buildFragment方法的运作,因为这两个实在太常用了,但也是最耗性能的。
Javascript 相关文章推荐
Javascript 去除数组的重复元素
May 04 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
了解JavaScript中的选择器
May 24 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 #Javascript
模仿百度三维地图的js数据分享
May 12 #Javascript
javascript数组去掉重复
May 12 #Javascript
javascript 弹出层组件(升级版)
May 12 #Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 #Javascript
关于js获取radio和select的属性并控制的代码
May 12 #Javascript
js 第二代身份证号码的验证机制代码
May 12 #Javascript
You might like
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
Python版的文曲星猜数字游戏代码
2013/09/02 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
酒店led欢迎词
2014/01/09 职场文书
优秀员工演讲稿
2014/05/19 职场文书
出售房屋委托书范本
2014/09/24 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
教学督导岗位职责
2015/04/10 职场文书
2015年教师节广播稿
2015/08/19 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python
Django框架中表单的用法
2022/06/10 Python