jQuery 源码学习之路六（jQuery api 核心==>内部构件）

发表于

jquery, jQuery.error, length, pushStack

1. 核心==>内部构件 ==>.jquery

.jquery原型指向jQuery的原型， 通常被称为它的别名$.fn。它是一个字符串，其中包含的jQuery的版本号，如“3.1.1”或“1.9.1”。

(1)用法：
1
console.log($('body').jquery);    //"3.1.1"
(2)源码：
1
2
var version = "3.1.1";
jquery: version ;   //指向版本号

2. 核心==>内部构件 ==>jQuery.error( message )

message 将要发出的消息.
这个方法主要是为了让插件开发人员可以重载此方法，并以更好的方式显示错误消息，或者提供更多相关信息。

(1)用法：
1
jQuery.error = console.error;
(2)源码：
1
2
3
4
//这里我觉得没有什么解释的必要了
error: function( msg ) {
	throw new Error( msg );
}

3. 核心==>内部构件 ==>length

描述: 在jQuery对象中元素的数量。

(1)用法：
1
2
3
4
5
6
7
8
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<script>
  console.log($("li").length);    //3
</script>
(2)源码：

其实这里也是很好理解的， $(“li”) 是一个类数组的对象，所以具有 length 的属性。就会返回对应的长度。

4. 核心==>内部构件 ==>.pushStack()

描述: 将一个DOM元素集合加入到jQuery栈。
.pushStack( elements )
elements 类型: Array 将要压入jQuery栈的元素，用于生成一个新的jQuery对象
.pushStack( elements, name, arguments )
elements 类型: Array 将要压入jQuery栈的元素，用于生成一个新的jQuery对象。
name 类型: String 将要压入jQuery栈的元素，用于生成一个新的jQuery对象。
arguments 类型: Array 传递给jQuery方法的参数(用于序列化)。
.pushStack()这个方法在写个涉及DOM遍历的插件时,它就会显得尤其有用.

(1)用法：
1
jQuery([]).pushStack( document.getElementsByTagName("div") ).remove().end();
(2)源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
pushStack: function( elems ) {
	//栈的实现，先进后出。
	// Build a new jQuery matched element set
	//构建一个新的jQuery匹配元素集(jQuery和传入新对象（集合）)
	// this.constructor()就是jQuery的构造函数init，所以this.constructor()返回一个jQuery对象.
	
	var ret = jQuery.merge( this.constructor(), elems );
	// Add the old object onto the stack (as a reference)
	// 这句话是用来做回溯处理的，比如$("ul").find("li").css("color","red");
	//想在上面的链式调用，再接着链式操作来找到$("ul"),来操作$("ul")的样式
	//$("ul").find("li").css("color","red").end().css("padding","20px");
	// 新构建的这个 jquery 对象的 prevObject 指向 this
	
	ret.prevObject = this; 
	// Return the newly-formed element set
	//返回这个新构建的jquery对象
	return ret;
}

注释：.selector属性在jQuery 1.7中已经不赞成使用，在jQuery 1.9中已经被移除。所以也就没什么可说的了。
pushStack 这个方法真的要好好掌握，虽然平时基本不会用到，但是在 jquery 内部代码实现上，很多地方都调用了pushStack这个方法，了解这个方法很利于我们了解jquery的运行原理。

链接:

(ps:之前写文章的时候，看的一些其他人文章链接都忘记保留了，从这篇开始，以后会保留自己学习过程中看到的有用的相关链接)
http://www.52ij.com/jishu/javascript/144135.html
http://www.jb51.net/article/60686.htm

2017-11-24