【你的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選擇器

posted on 2013-05-15 22:33 _xiaoMo_ 閱讀(616) 評論(0) 收藏舉報

刷新頁面返回頂部

墻磚攻城師

【你的jQuery？是你的jQuery】（二）——jQuery的組成

目的：

解析：

導航