jQuery 原始碼關鍵架構

發表於 | 更新於: | 分類於 ， |

原始版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
(function (global, factory) {
    factory(global);
})(window, function (window, noGlobal) {

    //這裡才是放jquery核心程式碼的地方
    var version = "1.11.2";
    var jQuery = function (selector, context) {
        return new jQuery.fn.init(selector, context);
    }

    //這個fn身上放各種功能函式
    jQuery.fn = jQuery.prototype = {
        jquery: version,
        constructor: jQuery,
        //各種功能
        first: function (selector) {}
    };

    //這個new 物件的時候傳參進去
    var init = jQuery.fn.init = function (selector, context) {
        //拿到選擇器幹事兒
    };

    init.prototype = jQuery.fn;
    window.jQuery = window.$ = jQuery;
});

簡化版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
(function (global, factory) {
    factory(global);
})(window, function (window, noGlobal) {

    //這裡才是放jquery核心程式碼的地方
    var version = "1.11.2";
    var jQuery = function (selector, context) {
        return new jQuery.fn.init(selector, context);
    }

    // 放建構子方法
    jQuery.prototype = {
        jquery: version,
        constructor: jQuery,
        //各種功能
        first: function (selector) {}
    };

    //函數建構子
     jQuery.init = function (selector, context) {

    };
    
    jQuery.init.prototype = jQuery.prototype;
    window.jQuery = window.$ = jQuery;
});

資料來源

jQuery原始碼分析