參考資料：饑人谷任務班任務42視頻，jQuery 2.0.3 源碼分析core - 整體架構
$調用方法的實現(xiàn)
jQuery 的每一個實例并沒有通過 new 來新建，而是使用 $ 和 jQuery 來新增實例并直接進行方法的調用，如：
$(".btn").on("click", function() {
console.log("do sth.");
});
jQuery.each(function() {
console.log("do sth.");
});
為使每次調用 $或 jQuery 能夠創(chuàng)建實例，在構建 jQuery 對象時，返回值應該是對象的實例。
下面嘗試以 rQuery 進行重現(xiàn)。
var rQuery = function(selector, context) {
//返回實例
}
rQuery.prototype = {};
如果直接使用 new 創(chuàng)建實例，會產(chǎn)生死循環(huán)：
var rQuery = function(selector, context) {
return new rQuery; //沒有盡頭的遞歸
}
rQuery.prototype = {};
因此，要想返回正確的實例，必須考慮其他的途徑。由于 new 需要針對方法來執(zhí)行，因此通過返回 rQuery.prototype 來創(chuàng)建實例也是不可行的。但我們可以在原型中新增一個方法，嘗試通過返回這個方法來創(chuàng)建實例：
var rQuery = function(selector, context) {
return new rQuery.prototype.init(); //返回實例
}
rQuery.prototype = {
init: function() {
return this; // this 指向實例，也就是 rQuery
}
};
不過，這種方法會帶來一個新的問題（如圖）：所返回的實例和 rQuery 對象并沒有對應的關系（淡粉色線），新的實例不能調用 rQuery 中的方法。
var rQuery = function(selector, context) {
return new rQuery.prototype.init(); //返回實例
}
rQuery.prototype = {
init: function() {
return this;
}
print: function() {
console.log(this);
}
};
rQuery.print(); // 報錯
因此，必須顯性地將 init 方法的原型定義為 rQuery 的原型（紅色線）：
var rQuery = function(selector, context) {
return new rQuery.prototype.init(); //返回實例
}
rQuery.prototype = {
init: function() {
return this;
}
};
rQuery.prototype.init.prototype = rQuery.prototype;
這樣，每次使用 rQuery 時就會產(chǎn)生新的實例，并且可以正常使用 rQuery 原型中定義的方法。
定義 window.$ = window.rQuery = rQuery 即可使用 $ 代替 rQuery 進行操作。
鏈式調用的實現(xiàn)
在 jQuery 中，可以對方法進行鏈式調用。使用鏈式調用節(jié)約代碼、提高效率，簡單優(yōu)雅，可謂 jQuery 的一大魅力。
$(this).removeClass("active").addClass("bye");
要能夠進行鏈式調用，則必須在第一個方法的調用之后返回對象本身：
var $tmp = $(this).removeClass("active"); //$tmp === $(this)
$tmp.addClass("bye"); //相當于 $(this).addClass("bye")
因此，在定義可以使用鏈式調用的方法時，需要添加 return this; 以保證鏈式調用能夠實現(xiàn)：
var rQuery = function(selector, context) {
return new rQuery.prototype.init(); //返回實例
}
rQuery.prototype = {
init: function() {
return this;
},
setName: function(name) {
this.name = name;
return this;
},
printName: function(name) {
console.log(this.name);
return this;
}
};
rQuery.prototype.init.prototype = rQuery.prototype;
rQuery().setName("Hanna").printName(); //Hanna
插件接口的定義與實現(xiàn)
同其他庫一樣，jQuery 提供可以讓開發(fā)者添加擴展的接口。開發(fā)者可以通過 jQuery.fn.extend() 來向 jQuery 中添加新的方法。
jQuery 中，同時存在 jQuery.extend() 和 jQuery.fn.extend() 兩種方法，從源碼中可以發(fā)現(xiàn)，二者實際上是指向同一個方法的不同引用：
jQuery.extend = jQuery.fn.extend = function() {
//具體實現(xiàn)
}
這樣做的用意是：通過 jQuery.extend() 實現(xiàn)對 jQuery 本身的屬性和方法的擴展；而通過 jQuery.fn.extend() 來實現(xiàn)對 jQuery.fn，即 jQuery 的原型的屬性和方法進行擴展。同時，兩種擴展都不會破壞 jQuery 原有的結構。
之所以在使用 jQuery.extend = jQuery.fn.extend的前提下仍能夠區(qū)別出 jQuery 和 jQuery.fn，是因為對 this 的運用。 this 指向的是調用方法的對象。在 jQuery.extend() 中，調用 extend() 方法的是 jQuery，所以 this 指向 jQuery，而在 jQuery.fn.extend() 中，調用方法的則是 jQuery.fn，因此這里 this 指向了 jQuery.fn，從而成功地區(qū)分出了兩種不同的擴展方式。
之前曾參考《使用jquery實現(xiàn)簡單的拖動效果》實現(xiàn)了一個拖拽效果，拿到這里來試一下 extend() 方法的使用（在線DEMO）：
//html
<div class="panel">This div is draggable</div>
//javascript
//drag()
var drag = function() {
$(this).each(function() {
var me = $(this);
var isMoved = false;
var rX, rY;
me.on("mousedown", function(event) {
isMoved = true;
rX = event.pageX - parseInt(me.css("left"));
rY = event.pageY - parseInt(me.css("top"));
me.css("cursor", "move");
return false; //解決拖拽導致的文字選中問題
});
$(document).on("mousemove", function(event) {
if (isMoved) {
var eX = event.pageX;
var eY = event.pageY;
var wX = $(window).width();
var wY = $(window).height();
var thisX = me.width();
var thisY = me.height();
var thisMarginLeft = parseInt(me.css("margin-left"));
var nowX = eX - rX;
var nowY = eY - rY;
var left, top;
var thisLeft = (thisMarginLeft > 0) ? 0 : (-thisMarginLeft);
if (nowX < thisLeft) {
left = thisLeft;
} else if (nowX > wX - thisX + thisLeft) {
left = wX - thisX + thisLeft;
} else {
left = nowX;
}
if (nowY < 0) {
top = 0;
} else if (nowY > wY - thisY) {
top = wY - thisY;
} else {
top = nowY;
}
me.css({
"left": left,
"top": top
});
}
}).on("mouseup", function() {
isMoved = false;
me.css("cursor", "auto");
});
});
};
// 添加到 jQuery 中
jQuery.fn.extend({drag: drag});
// 調用
$(".panel").drag();
可以看出，drag() 方法已成功添加到 jQuery 當中，可以用 $(".panel").drag() 進行調用，并實現(xiàn)拖拽功能。
以 drag() 為例，來看 extend() 方法的實現(xiàn)：
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[0] || {}, // 傳入的參數(shù)，以第一個參數(shù)為目標對象（這里是 {drag: drag}）
i = 1,
length = arguments.length,
deep = false; // 深拷貝的參數(shù)
// Handle a deep copy situation
if ( typeof target === "boolean" ) { // 如果第一個參數(shù)是 true/false，通常為 true
deep = target; //deep 為 true/false
target = arguments[1] || {}; // 將第二個參數(shù)作為目標對象
// skip the boolean and the target
i = 2; // 跳過前兩個參數(shù)，從第三個開始
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) { // 如果作為目標對象的參數(shù)不是對象類型
target = {};
}
// extend jQuery itself if only one argument is passed
if ( length === i ) { // 如果只有一個參數(shù)
target = this; // 就將 jQuery(.fn) 自身作為目標對象（這里，因為只傳入了 {drag: drag}，因此目標對象為 jQuery(.fn)，也就實現(xiàn)了向 jQuery 中添加對象（方法））
--i; // i=0
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) { // 這里 options = {drag: drag}
// Extend the base object
for ( name in options ) {
src = target[ name ]; // 向目標對象（這里是 jQuery(.fn)) 中添加屬性，并將屬性值賦予變量 src，如果目標對象中沒有該屬性，那么此時 src = undefined（這里 src = undefined）
copy = options[ name ]; // copy = drag (drag方法)
// Prevent never-ending loop
if ( target === copy ) { // 防止自引用 （這里防止將 jQuery(.fn) 添加到 jQuery(.fn) 中）
continue;
}
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// 如果是深拷貝(deep)，而且要拷貝的屬性值為對象（這里deep = false，不做深拷貝）
if ( copyIsArray ) { // 如果要拷貝的屬性值是數(shù)組
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else { // 要拷貝的屬性值為普通對象
clone = src && jQuery.isPlainObject(src) ? src : {}; // clone 為目標對象中的屬性值或空對象
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy ); // 遞歸
// Don't bring in undefined values
} else if ( copy !== undefined ) { // 這里 drag() 非 undefined
target[ name ] = copy; // 將屬性添加到目標對象中（這里， jQuery(.fn)[drag] = drag）
}
}
}
}
// Return the modified object
return target; // 返回目標對象（這里返回的是添加了 drag() 方法的 jQuery(.fn)）
};
