jQuery构造函数init参数分析


Posted in Javascript onMay 13, 2015

在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样。下面就来看看init这个幕后的构造函数是怎么写的:

init: function( selector, context, rootjQuery ) {

...

}

可以看到这个方法接受3个参数,其前两个参数是jQuery方法传递过来的

var jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery );

},

Selector原则上可以输入任意值,但并不是所有值都是有意义的,只有undefined、DOM 元素、字符串、函数、jQuery 对象、普通 JavaScript 对象这几种类型是有效的,这个参数是通常是填写的但是不填写也不会报错

console.log($());

//[constructor: function, init: function, selector: "", jquery: "1.7.1", size: function…]

Context作为执行上下文或者叫执行范围可以不传入,或者传入 DOM 元素、jQuery 对象、普通 JavaScript 对象之一

参数 rootjQuery:包含了 document 对象的 jQuery 对象,用于 document.getElementById() 查找失败、selector 是选择器表达式且未指定 context、selector 是函数的情况,其实就是$(document)。

下面根据参数的不同分为12种情况逐个讨论

1.selector 可以转换为false

// Handle $(""), $(null), or $(undefined)

if ( !selector ) {

return this;

}

源码中的注释已经写得很清楚了,当是这三种情况时直接return不进行任何处理

2.参数 selector 是 DOM 元素

例如: $(document)这种写法

// Handle $(DOMElement)

if ( selector.nodeType ) {

this.context = this[0] = selector;

this.length = 1;

return this;

}

只要是dom元素肯定有节点类型,然后把这个节点变成jquery对象的第一个元素并且赋值给上下文context,length属性是jQuery的原型属性默认为0

// The default length of a jQuery object is 0

length: 0,
这里有了一个元素之后就把length属性修改为1。return this 操作使得函数执行后的结果依然是jQuery对象这样就可以实现类似$(document).each()这样的链式调用了。最终得到的类似这样的{0:document,context:document,length:1....}对象,其实所有的情况最后都会变成这种形式的对象,除了jQuery原型属性和方法之外就是获取的dom节点并且按照阿拉伯数字依次排列,所以我们可以使用$(selector)[0]的形式代替$(selector).get(0)来获取dom对象。例如:

<!doctype html>

<html>

  <head>

   <title></title>

  </head>

  <body>

    <div></div>

    <div></div>

    <div></div>

  </body>

  <script src='jquery-1.7.1.js'></script>

  <script>

   console.log($('div'));

/*[div, div, div, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "div", constructor: function, init: function…]

0: div
1: div
2: div
context: document
length: 3
prevObject: jQuery.fn.jQuery.init[1]__proto__: jQuery[0]
selector: "div"
.
*/
  </script>

</html>

3.参数是特殊的字符串“body”

由于body元素在一个文档对象中只有一个所以单独列出来处理

// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

这里有3个条件必须同时满足,第二个必须没有上下文的条件我也不是太理解,$(‘body',document)这样的看起来很正常的写法也会被这种情况“忽视”     

console.log($('body',document));

 /*

 jQuery.fn.jQuery.init[1]

0: body

context: document

length: 1

prevObject: jQuery.fn.jQuery.init[1]

selector: "body"

__proto__: jQuery[0]

*/

虽然和$('body')的结果是一样的,但是却被当做两种情况来看待,可能是因为body只有一个上下文只能是document没有必要添加吧,否则又要判断上下文是不是document。第三个条件是保证document.body必须存在,那么什么情况下会前两个情况满足document.body又不存在呢?首先就是js代码先于html代码加载时会出现这个是初学者经常会犯的错误,通常我们要写成:

$(function(){...})

或者

$(document).ready(function(){...})
 
其实这两个是一样的调取的是一个方法,dom加载这一块以后在分析。对此我们可以做个测试html代码如下:

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

然后再jQuery源代码里面输出selector、context和document.body

console.log(selector+context+document.body);

// The body element only exists once, optimize finding it

if ( selector === "body" && !context && document.body ) {

this.context = document;

this[0] = document.body;

this.selector = selector;

this.length = 1;

return this;

}

虽然我们只写了一个其实执行了四次,只有最后一次才是是我们调用后的结果,最后一次的结果是bodyundefinednull这个时候前两个就是满足的但是最后一个是null。回想起第一篇jQuery总体架构架构里面undefined会被重新,那么document.body会不会被重写为null呢?当我尝试在代码中修改时就会报错看来是不会的,那这个条件就是预防没有加载html就执行的情况吧

第四种是除了上述的字符串情况之外的其他字符串,情况比较多放在下一篇吧。

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

Javascript 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
javascript 闭包详解
Jul 02 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
Vue的双向数据绑定实现原理解析
Feb 17 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
js实现鼠标经过表格行变色的方法
May 12 #Javascript
You might like
PHP入门速成教程
2007/03/19 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
Python Django使用forms来实现评论功能
2016/08/17 Python
python去掉空白行的多种实现代码
2018/03/19 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
写好自荐信的技巧
2013/11/08 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
大学生自荐信范文
2015/03/05 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers