【你的jQuery?是你的jQuery】(二)——jQuery的組成
目的:
了解什么是jQuery對象,以及jQuery對象的原型方法和靜態方法
解析:
復制上一篇中“二”部分的代碼:
一、
1 (function (window, undefined) { 2 var jQuery = window.jQuery = window.$ = function (selector, context) { 3 return new jQuery.fn.init(selector, context); 4 } 5 jQuery.fn = jQuery.prototype = { 6 init: function (selector, context) { 7 }, 8 jquery: "xxx", 9 css:function(){ 10 }, 11 attr:function(){ 12 }, 13 } 14 jQuery.fn.init.prototype = jQuery.fn; 15 })(window) 16 alert($().jquery) //成功構造出$(oo).xx這種東西
構造出來的東西就是jQuery對象,也就是new一個jQuery.fn.init的實例,這個實例天生獲得的方法就是jQuery對象的原型方法,也就是代碼中的紅色部分。
那么什么又是靜態方法呢?
先來看一個函數:
二、
1 jQuery.extend = jQuery.fn.extend = function (obj, target) { 2 target = target || this; //若不傳target的話,默認擴展自己,也就是jQuery 3 for (var name in obj) { 4 target[name] = obj[name]; 5 } 6 return target; 7 } 8 jQuery.extend({ 9 each:function(){}, 10 trim:function(){} 11 })
當然源碼的extend要比這個牛逼,我這只是提出了簡單的復制屬性的部分,而這足夠咱拓展jQuery新方法或屬性用的了,這個拓展新的東西就是靜態方法,也就是說不用實例化就能用,形如$.each(),$.trim()這種。
這樣,了解了原型方法和靜態方法,我們就可以大刀闊斧的進行擴展了,要jQuery對象天生就有的東西,就往jQuery.prototype={}里面寫,要直接擴展jQuery.XX的話,就在jQuery.extend({})里面寫。
(本篇至此,其他內容未完,待續……)
下一節提示:
重點來了!利用Sizzle從右到左的思路,打造自己的CSS選擇器
浙公網安備 33010602011771號