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 相关文章推荐
基于jQuery的表格操作插件
Apr 22 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
js实现随机点名小功能
Aug 17 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php 破解防盗链图片函数
2008/12/09 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
php查看当前Session的ID实例
2015/03/16 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Vue中的异步组件函数实现代码
2018/07/20 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python程序如何进行保存
2020/07/03 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
城市规划毕业生求职信
2013/10/10 职场文书
服装厂厂长岗位职责
2013/12/27 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
办公用房租赁协议书
2014/11/29 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL