在自家之达标一致首随笔里面分析了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就执行之情吧

季种植是除了上述的字符串情状之外的另字符串,意况比多位于下同样篇吧。

 

相关文章

网站地图xml地图