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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
JSONP基础知识详解
Mar 19 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
基于vue实现分页效果
Nov 06 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
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使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
使用js画图之饼图
2015/01/12 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
js常见遍历操作小结
2019/06/06 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
python将人民币转换大写的脚本代码
2013/02/10 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
文秘档案管理岗位职责
2014/03/06 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
委托公证书样本
2015/01/23 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
python基于tkinter实现gif录屏功能
2021/05/19 Python
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Django Paginator分页器的使用示例
2021/06/23 Python
Python requests用法和django后台处理详解
2022/03/19 Python