jquery构造器的实现代码小结-jquery

网页设计 跟版网
跟版精品模板网提供构造器,等网页设计素材资源，提供相关网页设计资源的教程和免费下载。跟版网，专业织梦网页设计模板资源站。。
显然，能做到这一步，其实现是相当的复杂，这个实现就是它的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方法的运作，因为这两个实在太常用了，但也是最耗性能的。
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

移动端，手机端 响应式布局头部代码
将如下代码加到你网页的头部之间： meta name=viewport content=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no meta name=apple-mobile-web-app-capable content=yes / meta name=apple-mobile-web-app-statu
javascript实现禁止鼠标右键的功能
遇到网页上有精美图片或者精彩文字想保存时，通常大家都是选中目标后按鼠标右键，在弹出菜单中选择图片另存为或复制来达到我们的目的。但是，目前有许多网页都屏蔽了鼠标右键，那么用js如何实现禁止鼠标右键的功能呢？ 1、与禁止鼠标右键相关的JS说明 script
js实现点击按钮复制文本功能
最近遇到一个需求，需要点击按钮，复制 p 标签中的文本到剪切板 之前做过复制输入框的内容，原以为差不多，结果发现根本行不通 尝试了各种办法，最后使了个障眼法，实现了下面的效果 一、原理分析 浏览器提供了 copy 命令 ，可以复制选中的内容 document.exe
如何去掉html中input的边框
这里不能用css样式选择器选择input组件，设置 border:none;或border: 0px;outline:none;cursor: pointer; 亲测没有用处，只有写这种格式时生效，如下： input type=text style=border:none;
js 判断字符串中是否包含某个字符串
String对象的方法 方法一: indexOf() (推荐) var str = 123;console.log(str.indexOf(3) != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。 方法二: search() var str = 1
video标签设置autoplay在手机浏览器无法自动播放视频的解决方案
在video标签上加个autoplay属性，在PC端浏览器里面运行流畅，但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的，只有与用户进行了一次交互动作，才可以播放视频。（音频同理） 方案一： 在页面上加一个弹框，用户点击了
html教程css教程前端开发cms教程seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发php编程java编程建站技巧Python编程
织梦资讯网 织梦模板 dede 外语学校 织梦鬼故事 竞价网站源码 竞价培训网 门户网站 织梦二次开发 织梦笑话网 dedecms笑话网 织梦源码 网站建设 搞笑图片 织梦教程 旅游网站源码 织梦旅游网 学校培训 html5 企业织梦源码 医院源码 后台样式 移动营销页 整形医院 大学医院 新手建站 客服代码 洗衣机维修 企业网站 淘宝客 导航菜单 教育网站 学校源码 装修网站 装修模板 美容整形 女性健康 妈妈网 机械源码 建站公司 珠宝首饰 苹果网站 手机资讯 美女图片 织梦模版打包 妇科源码 安卓市场源码 男性时尚网 健康之家 app应用网站 笑话网站 下载站 美女图片网 中医院网站 家装网站源码 QQ网站 标牌网站 魔兽世界网 淘宝客源码 YY网站源码 别墅设计网站 服装搭配网 宝宝起名网 站长网站 婚庆网站 脑科医院源码 笑话源码 肝胆医院 意外怀孕源码 工作室