JS實現簡單的jQuery框架（非常詳細）

本節模擬 jquery 框架設計一個 Web 應用模型，訓練 JavaScript 物件導向的程式設計技能。

定義型別

在 JavaScript 中，可以把建構函式理解為一個型別，這個型別是 JavaScript 物件導向程式設計的基礎。定義一個函數就相當於構建了一個型別，然後藉助這個型別類範例化物件。

範例

下面程式碼定義一個空型別，類名為 jQuery。

var jQuery = function () {
    //函數體
}

下面為 jQuery 擴充套件原型。

var jQuery = function () {}
jQuery.prototype = {
    //擴充套件的原型物件
}

為 jQuery 的原型起個別名：fn。如果直接命名為 fn，則表示它屬於 window 物件，這樣不安全。更安全的方法是為 jQuery 型別物件定義一個靜態參照 jQuery.fn，然後把 jQuery 的原型物件傳遞給這個屬性 jQuery.fn。實現程式碼如下：

jQuery.fn = jQuery.prototype = {
    //擴充套件的原型物件
}

jQuery.fn 參照 jQuery.prototype，因此要存取 jQuery 的原型物件，可以使用 jQuery.fn，直接使用 jQuery.prototype 也是可以的。

下面為 jquery 型別起個別名：$。

var $ = jQuery = function () {}

模仿 jQuery 框架，給 jQuery 原型新增兩個成員，一個是原型屬性 version；另一個是原型方法 size()，分別定義 jQuery 框架的版本號和 jQuery 物件的長度。

var $ = jQuery = function () {}
jQuery.fn = jQuery.prototype = {
    version : "3.2.1",  //原型屬性
    size : function () {  //原型方法
        return this.length;
    }
}

返回 jQuery 物件

下面介紹如何呼叫原型成員：version 屬性和 size() 方法。

一般可以按以下方式呼叫。

var test = new $ ();  //範例化
console.log(test.version);  //讀取屬性，返回“3.2.1”
console.log(test.size());  //呼叫方法，返回undefined

但是，jQuery 框架按下面方法進行呼叫。

$().version;
$().size();

jQuery 沒有使用 new 命令呼叫 jQuery 建構函式，而是直接使用小括號運算子呼叫 jQuery() 建構函式，然後在後面直接存取原型成員。

如何實現這樣的操作呢？

範例1

可以使用 return 語句返回一個 jQuery 範例。

var $ = jQuery = function () {
    return new jQuery();  //返回類的範例
}
jQuery.fn = jQuery.prototype = {
    version : "3.2.1",  //原型屬性
    size : function (){  //原型方法
        return this.length;
    }
}

執行下面的程式碼，則會如圖出現記憶體溢位錯誤。

$().version;
$().size();

---