問題:
1:jQuery對(duì)象的構(gòu)建方式是什么搭独?
2:jQuery方法的調(diào)用方式是什么?
jQuery架構(gòu)的核心:
// Define a local copy of jQuery(構(gòu)造函數(shù))
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
};
jQuery.fn = jQuery.prototype = {
//原型上的方法和屬性
};
jQuery.fn.init.prototype = jQuery.fn;
常規(guī)方法調(diào)用:
//定義函數(shù)---類
var GYH = function (selector, context) {
this.selector = selector;
this.context = context;
};
//定義方法---原型上
GYH.prototype = {
getSelector: function () {
//...
},
getContext: function () {
//...
}
};
//實(shí)例化這個(gè)函數(shù)---類
var gyh = new GYH('mySelector', 'myContext');
//調(diào)用方法
gyh.getSelector();
gyh.getContext();
jQuery方法調(diào)用:
$(selector).ready(); // jQuery(selector).ready();
$(selector).css(); // jQuery(selector).css();
$().noConflict(); // jQuery().noConflict();
jQuery沒有使用new【實(shí)際上在構(gòu)造函數(shù)內(nèi)部使用new折欠,我們實(shí)際調(diào)用的時(shí)候不需要new】
應(yīng)該在構(gòu)造函數(shù)的內(nèi)部返回實(shí)例患蹂,如何使用呢?
var GYH = function (selector, context) {
//...
return new GYH(selector, context);
};
GYH.prototype = {
getSelector: function () {
//...
},
getContext: function () {
//...
}
};
GYH('mySelector', 'myContext'); // 顯然這樣的調(diào)用陷入了死循環(huán)
jQuery是這樣正確返回一個(gè)實(shí)例的:
var GYH = function (selector) {
return GYH.prototype.init();
};
GYH.prototype = {
init: function () {
return this; // 原型中的this指向的是這個(gè)構(gòu)造函數(shù)的一個(gè)實(shí)例么城菊??碉克?
},
getSelector: function () {
//...
}
};
GYH();//返回的是GYH的一個(gè)實(shí)例凌唬。不需要new。
image.png
上圖可見:調(diào)用GYH()這個(gè)構(gòu)造函數(shù)返回的是該構(gòu)造函數(shù)的一個(gè)實(shí)例漏麦,那么init中的this指向GYH這個(gè)構(gòu)造函數(shù)的一個(gè)實(shí)例客税。
為什么jQuery要將init函數(shù)也作為一個(gè)構(gòu)造器?
image.png
這樣每次調(diào)用jQuery構(gòu)造函數(shù)都new出了一個(gè)新jquery實(shí)例對(duì)象撕贞,主要是分隔了this
這樣分隔
this
帶來的問題更耻?
沒有new
init
如下:
image.png
new
了init
如下:
image.png
可以看出,new
問題就是:無法訪問GYH這個(gè)構(gòu)造器的原型(prototype)上面的屬性和方法捏膨。
jQuery是這樣解決的:
image.png
image.png
我們的例子也可以訪問GYH原型上的屬性和方法了:
image.png
為什么age
屬性返回的是18
而不是20
呢秧均?
因?yàn)槭窍炔檎覍?shí)例上的屬性和方法食侮,如果實(shí)例上沒有,再沿著原型鏈上查找屬性和方法目胡。
解釋一下jQuery.fn
:
其實(shí)沒有什么用锯七,只是對(duì)jQuery.prototype
的引用。
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
問題:jQuery的鏈?zhǔn)秸{(diào)用時(shí)如何實(shí)現(xiàn)的讶隐?
image.png
解決:方法內(nèi)最后返回this
起胰。this
是什么?巫延,this
就是當(dāng)前jQuery實(shí)例對(duì)象效五。
缺點(diǎn):所有的方法都要返回對(duì)象本身÷澹【不一定所有的方法都沒有返回值的】
優(yōu)點(diǎn):代碼更加優(yōu)雅畏妖。
問題:如何寫一個(gè)jQuery的擴(kuò)展插件?
解決:jQuery.fn.extend();
?來為jQuery實(shí)例對(duì)象擴(kuò)展新的屬性和方法疼阔。
image.png
jQuery.extend();
是對(duì)jQuery本身的屬性和方法進(jìn)行了擴(kuò)展戒劫;
jQuery.fn.extend();
是對(duì)jQuery.fn也就是jQuery.prototype上的屬性和方法進(jìn)行了擴(kuò)展。
上圖貌似表明了jQuery.fn.extend();
和jQuery.extend();
都是對(duì)同一個(gè)函數(shù)的引用婆廊,那么為什么會(huì)實(shí)現(xiàn)不同的功能呢迅细??淘邻?
答案:this
的力量茵典。不同的調(diào)用,在extend函數(shù)內(nèi)的this
的指向是不同的宾舅。
jQuery.extend();
這樣調(diào)用统阿,extend函數(shù)內(nèi)的this
是指向jQuery構(gòu)造器的。
jQuery.fn.extend();
這樣調(diào)用筹我,extend函數(shù)內(nèi)的this
是指向jQuery.prototype即原型的扶平。
(function (window, undefined) {
var
rootjQuery,
jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
};
jQuery.fn = jQuery.prototype = {
init: function () {
return this;
}
};
jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function() {
console.log(this);
};
window.$ = jQuery;
})(window);
var obj = {a: 0};
$.extend(obj);
$.fn.extend(obj);
jQuery的extend函數(shù)的實(shí)現(xiàn):【注意只傳遞一個(gè)參數(shù)的情況的分支,和this相關(guān)】
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
deep = target;
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;
--i;
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
if ( target === copy ) {
continue;
}
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
// Don't bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};
簡(jiǎn)單的對(duì)象復(fù)制:
image.png
復(fù)雜的對(duì)象復(fù)制-----淺復(fù)制
image.png
復(fù)雜的對(duì)象復(fù)制-----深復(fù)制
image.png
jQuery擴(kuò)展插件的實(shí)現(xiàn)方式:
1蔬蕊、通過jQuery.extend();
----->【在jQuery上添加了一個(gè)靜態(tài)方法】
----->【定義方式:$.extend({myPlugin: function(){...}})
】
----->【調(diào)用方式:$.myPlugin();】
----->【作用:定義一些輔助方法比較方便结澄,比如打印日志什么的】
$.extend({
log: function(message) {
var now = new Date(),
y = now.getFullYear(),
m = now.getMonth() + 1, //!JavaScript中月分是從0開始的
d = now.getDate(),
h = now.getHours(),
min = now.getMinutes(),
s = now.getSeconds(),
time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
console.log(time + '----------------My App: ----------------' + message);
}
})
$.log('initializing...'); //調(diào)用
$.log('debugging...');
image.png
----->【缺點(diǎn):無法利用jQuery強(qiáng)大的選擇器帶來的便利】
2袁串、通過jQuery.fn.myPlugin = function(){...};
----->【在jQuery原型對(duì)象上新添加了一個(gè)方法】
----->【定義方式:jQuery.fn.myPlugin = function(){...};
】