$()創建對象的實現
-
首先我們來看一下需求
- $("div")可以創建一個對象
- 該對象可以調用所有jq的元素公用方法
- 該對象的方法可以產生鏈式調用
-
思考過程
- $("div")中$是函數名,而$("div")是運行該函數,所以可以判斷該函數返回值肯定是一個對象，該對象代表了jquery.
- $("div")可以調用所有元素的公用方法，所以可以知道，元素的方法都是綁定在jq原型上的.
- $("div")的方法可以鏈式調用，則說明每個方法返回值都是一個當前jquery對象。
模擬實現
下面用jQ的嘗試實現下.
function jQ(selector,context){
// return a jQ instance
}
jQ.prototype={
constructor:jQ//修正構造函數
};
由于要求返回的對象可以使用公用方法，那我們直接返回原型吧。
function jQ(selector,context){
// return a jQ instance
return jQ.prototype;
}
jQ.prototype={
constructor:jQ//修正構造函數
};
這樣我們返回的對象中就可以直接使用公用的方法了，但是問題來了，怎么保證可以傳參數？而且返回的是原型指針，萬一我修改了原型指針指向的對象，那不是所有jQ的公用方法都無法使用了，所以我們返回的值必須是new 出來的。
那我們試試new jQ呢？
function jQ(selector,context){
// return a jQ instance
return new jQ(selector,context);
}
jQ.prototype={
constructor:jQ//修正構造函數
};
感覺很完美，又有new，又能使用公用方法，是不是就這樣好了呢？來，跑一跑看一下，哎喲，死循環了~為什么，哎喲，原來遞歸了，還沒有終止條件,所以我們不能使用jQ作為構造函數，需要另外找一個構造函數.
所以最終版本思路是這樣的，在原型上掛一個別的初始化函數，然后把參數給他，最后修改下他的原型修改成為jQ的原型。這樣即保證了new，還保證了公用方法使用。
最終代碼如下
function jQ (selector, context) {
return new rQuery.prototype.init(); //返回實例
}
rQuery.prototype = {
init: function() {
return this;
},
constructor:jQ//修正構造函數
};
rQuery.prototype.init.prototype = rQuery.prototype;
沒想到吧，其實我也沒想到，由此可見，代碼是一個考驗智商的活。
簡單關系圖如下:
Paste_Image.png
- 鏈式調用
對于鏈式調用，例如$("div").on().off();
這樣的形式只要保證on和off函數中的return 是this就可以了，這邊主要注意一個點:**哪個對象調用函數，函數中的this值就是那個對象**。
#### extend作為插座的實現 ####
- 這里面extend分為兩種，$.fn.extend和$.extend，前一個是對實例方法的擴展，也就是在$的對象上擴展方法，其實本質就是在$的原型上添加方法，后一個就是對靜態方法的擴展，也就是在$這個函數上擴展方法，當然能做到這一切得益于js是一門隨意的語言-動態語言，且函數(方法)他又是對象還是變量，對象上的屬性可以隨意綁定和解綁，甚至函數名在初始化之后還能隨意換，因為他只是一個指針名。
- 雖然作用不同，但是實現過程一致，具體實現過程如下
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[0] || {},
// 傳入的參數，以第一個參數為目標對象（這里是 {drag: drag}）
i = 1,
length = arguments.length,
deep = false; // 深拷貝的參數
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
// 如果第一個參數是 true/false，通常為 true
deep = target;
//deep 為 true/false target = arguments[1] || {};
// 將第二個參數作為目標對象
// skip the boolean and the target
i = 2;
// 跳過前兩個參數，從第三個開始
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
// 如果作為目標對象的參數不是對象類型
target = {};
}
// extend jQuery itself if only one argument is passed\
if ( length === i ) {
// 如果只有一個參數
target = this;
// 就將 jQuery(.fn) 自身作為目標對象（這里，因為只傳入了 {drag: drag}，因此目標對象為 jQuery(.fn)，也就實現了向 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 ) {
// 如果要拷貝的屬性值是數組
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）
}
}
}
}
