jQuery构造函数init参数分析续


Posted in Javascript onMay 13, 2015

如果selector是其他字符串情况就比较多了比较复杂了

// Handle HTML strings
if ( typeof selector === "string" ) {...}

开始分不同的情况处理

// 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 );
}

If里面先判断第一个字符是“<”最后一个字符是“>”并且长度大于3就假设此时的selector是html简单标签 ,比如$(‘<div>')但是记住仅仅是假设”assume”比如$(‘<sdfadfadf>')这样的也会走这里。然后把match数组修改成[null,selector,null],这里的match是在init函数里面声明的变量,主要是用来作为区分是参数类型的工具稍后在将可能情况列出,下面是源码中声明的四个变量

init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;

如果不满足if的条件就会调用一个正则去得到match的结果,quickExpr是jQuery构造函数里面声明的变量

// A simple way to check for HTML strings or ID strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

这个正则主要是为了区别html字符串和id字符串的,第二个注释中讲到了为了避免基于 location.hash的 XSS 攻击,于是在 quickExpr 中增加了 #(#9521)的意思是我们可以在jQuery官网找到相关解释。

首先访问http://bugs.jquery.com/然后搜索对应的值即可

quickExpr.exec( selector )执行的结果可以是一个数组,数组的第一个元素是匹配的元素,剩下的分别是分组匹配的元素,这个正则有两个分组(<[\w\W]+>)[^>]和([\w\-]*)一个是标签一个是id值。最终会把结果交给match。下面就来分析下match的各种情况首先单标签不用正则式是 [ null, selector, null ]的形式,下面在代码中证明:

<!doctype html>
<html>
  <head>
   <title></title>
    <script src='jquery-1.7.1.js'></script>
  </head>
  <body>
    <div id='div'></div> 
  </body>
  <script>
    $('<div>');
  </script>
</html>

在html里面我们创建一个jQuery对象然后再init方法里面输出得到的match结果:

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 );
}
 console.log(match); // [null, "<div>", null];

下面我们修改一下参数改为$(‘#div')然后再看一下结果

["#div", undefined, "div", index: 0, input: "#div"]

还有一种比较特殊的情况$(‘<div>123')然后我们再看一下结果

["<div>dewrwe", "<div>", undefined, index: 0, input: "<div>dewrwe"]

我们可以看到id总是在第三个元素而标签值在第二个元素保存着,对于最后一种情况而言跟$(‘<div>')是没有什么区别的因为生成dom元素时是不会处理第一个元素的。基于这个结果可以接着来分析下一个判断了。

接下来的会根据match的结果分为三种情况

if ( match && (match[1] || !context) ) {

     ...

} else if ( !context || context.jquery ) {

    ...

} else {

  ...

}

第一种情况满足的条件是match一定要有值,match[1]就是第二个元素就是保存标签的这个有值或者不存在上下文,但是好像没有id什么事啊?其实不是的通过分析match的结果可以知道第二个元素没有值肯定就是id选择器得到的结果,而id是唯一的,不需要写上下文(其实写了上下文也会正常执行只不过会使用Sizzle而不是在这里处理了跟body是一样的)。好了第一个条件进来的情况就是

1.标签 

$(‘<div>')  $(‘<div>123')  $(‘<div>23213213</div>')...

2.没有上下文的id  $(‘#div')

第一个条件内部又进行了细分:

// HANDLE: $(html) -> $(array)
if ( match[1] ) {

  ...

// HANDLE: $("#id")

}else{

}

很显然if是处理标签的else是处理id的,先来看看是怎么处理标签的吧

context = context instanceof jQuery ? context[0] : context;
doc = ( context ? context.ownerDocument || context : document );
 
// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
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 = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
}
 
return jQuery.merge( this, selector);

首先修正一下context的值,如果是jQuery对象就把他变成dom元素就是使用下标的方法这个原理之前说过了,然后有处理了doc变量,如果context不存在就把document赋值给doc如果存在且有ownerDocument属性那就是dom元素了这个值还是document如果不是dom元素比如普通的js对象的话那就把这个对象赋值给doc变量。紧接着对selector又进行了一个正则判断,这个正则也是在jQuery构造函数里面声明的目的是判断单标签  比如<div>这样的

// Match a standalone tag

rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,

然后把结果交给ret变量,基于ret的值又进行划分按照单标签和复杂标签分开处理ret值存在那就是匹配到了单标签然后再根据context是不是普通对象又分为两种情况isPlainObject是检测是不是普通对象的方法,如果是普通对象,就利用js原生方法createElement传入标签创建元素并放在一个数组里面,之所以这样是为了以后跟jquery对象合并方便,然后把数组赋值给selector,后采用对象冒充的方法调用attr方法,这里attr居然有3个参数,而平常我们使用的api里面是两个参数,其实jQuery中有很多类似的情况,同样的方法有着对内对外两个接口。第二个参数就是对象形式的上下文,因为attr可以像

$("img").attr({ src: "test.jpg", alt: "Test Image" });

这给我们的其实就是我们以后可以$(‘<div>',{id:'div'})这样写了也是支持的。如果不是对象就直接创建元素不考虑属性。还是把创建的元素放在数组里面。如果ret没有值那就是复杂的标签了比如$(‘<div>231</div>')这样的这个时候原生的js就搞不定啦需要调取另外一个方法jQuery.buildFragment来处理,这个方法实现以后在学习吧,总之最后都会创建dom元素。最后返回合并后的结果

return jQuery.merge( this, selector );

不像之前的return this这里是返回merge执行后的结果其实他的任务就是把放在数组里面的创建好的的dom元素合并到jquery元素中去,最终变成{0:div,length:1...}这样的对象形式。这样的话简标签情况就处理完毕。

然后else里面处理的是id的情况

elem = document.getElementById( match[2] );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
// Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;

很简单直接调用原生js的id选择器但是有一些系统会出现bug

注释说的很清楚黑莓系统,就是元素已经不存在了但是依然能够匹配得到所以再加上父节点,不存在的元素肯定没有父节点的。还有一种情况就是ie和opera浏览器会出现按name值匹配的情况所以在做了一个判断

if ( elem.id !== match[2] ) {

如果真的不幸出现了那就不能使用原生方法而是用find方法也就是使用sizzle引擎了,在大多数正常情况下就直接将获取到的元素放到this里面就可以啦然后修改下context的值。Ok终于把第一个大分支分析完了。然后再看根据match的第二个分支

else if ( !context || context.jquery ) {
  return ( context || rootjQuery ).find( selector );
}

这里是如果没有上下文或者上下文是jquery对象的时候这个比较简单就是直接用find方法了rootjQuery 就是$(document)

最后字符串的情况上面都不属于的话

return this.constructor( context ).find( selector );

This.constructor就是jQuery其实还是使用find方法。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS 强制设为首页的代码
Jan 31 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
jQuery构造函数init参数分析
May 13 #Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 #Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 #Javascript
js实现带按钮的上下滚动效果
May 12 #Javascript
js验证上传图片的方法
May 12 #Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 #Javascript
js实现一个链接打开两个链接地址的方法
May 12 #Javascript
You might like
十天学会php之第四天
2006/10/09 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
动态加载js的几种方法
2006/10/23 Javascript
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
Python基础知识_浅谈用户交互
2017/05/31 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
校园安全演讲稿
2014/05/09 职场文书
卖房协议书样本
2014/10/30 职场文书
表扬信范文
2019/04/22 职场文书