杰晶网络

jQuery构造函数init参数分析续
网络编程 2024/11/9 佚名
3 2

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

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

开始分不同的情况处理

// Are we dealing with HTML string or an ID"<" && 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 = /^("http://bugs.jquery.com/">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 "codetitle">复制代码 代码如下:

// Match a standalone tag

rsingleTag = /^<(\w+)\s*\/"codetitle">复制代码 代码如下:

$("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方法。


以上所述就是本文的全部内容了，希望大家能够喜欢。
标签：
jQuery,构造函数,init参数
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“jQuery构造函数init参数分析续”
暂无“jQuery构造函数init参数分析续”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网