Upgrade to Pro — share decks privately, control downloads, hide ads and more …

閱讀原始碼 - 再戰十年的 jQuery

閱讀原始碼 - 再戰十年的 jQuery

- 檢視 jQuery 設計架構
- 欣賞一些有趣的寫法
- 理解設計原理後,試著復刻一個陽春版的 jQuery

高見龍

July 31, 2022
Tweet

More Decks by 高見龍

Other Decks in Programming

Transcript

  1. ޒഒላӃ
    ࠶ፌे೥ɽK2VFSZ
    高見龍

    View Slide

  2. ޒഒላӃ
    ࣗզհ঺

    View Slide

  3. ޒഒላӃ
    a.k.a Eddie
    愛現! 喜歡冷門的玩具


    開發者 / 講師 / 電腦書作者


    技術推廣、教育、技術諮詢


    台灣、日本等國內外技術研討會講者


    部落格:https://kaochenlong.com
    高見龍 @eddiekao

    View Slide

  4. ޒഒላӃ
    第25刷 發售中 發售中
    發售中

    View Slide

  5. ޒഒላӃ
    已絕版

    View Slide

  6. ޒഒላӃ
    敬請
    期待

    View Slide

  7. ޒഒላӃ
    歡迎加
    好友

    View Slide

  8. ޒഒላӃ
    ຊจ։࢝

    View Slide

  9. ޒഒላӃ
    ฏৗ༗ࡏሜ+BWB4DSJQU嗎ʁ
    🙋

    View Slide

  10. ޒഒላӃ
    ᡒ說ݱࡏେՈ౎ࡏሜ7"3

    View Slide

  11. ޒഒላӃ
    7"37VF "OHVMBS 3FBDU

    View Slide

  12. ޒഒላӃ
    ౎೥ྃɼؐ༗ਓ

    View Slide

  13. ޒഒላӃ
    ؐ༗ਓࡏሜK2VFSZ嗎ʁ
    🙋

    View Slide

  14. ޒഒላӃ
    શੈքࢢ佔཰࠷ߴతલ୺౟݅ʁ

    View Slide

  15. ޒഒላӃ
    ૢ࡞ᖣ᧸ثత%0.෺݅

    View Slide

  16. ޒഒላӃ
    ލᖣ᧸ثࢧԉʂ

    View Slide

  17. ޒഒላӃ
    ஐܛ݁থ

    View Slide

  18. ޒഒላӃ
    େᢇ၊ઃҰԼ
    w 你஌ಓᏓᏐత4DPQFੋॄኄ
    w 你஌ಓॄኄੋ'VODUJPO
    w ἦ಄വᏐ
    w **'&ʢ*OUFSNFEJBUF*OWPLF'VODUJPO&YQSFTTJPOʣ
    w 你஌ಓ+BWB4DSJQUཫత෺݅ಋ޲ੋዎኄճࣄ
    w 1SPUPUZQF᪑OFXత᮫܎
    w 你஌ಓUIJTዎኄ؃

    View Slide

  19. ޒഒላӃ
    -JWFʂ

    View Slide

  20. ޒഒላӃ
    ֢ॏᴍʂ

    View Slide

  21. ޒഒላӃ
    (function(global, factory) {


    ...略...


    })(typeof window !== "undefined" ? window : this, ...略...
    L14 ~ L40
    IIFE 起⼿式

    View Slide

  22. ޒഒላӃ
    ...略...


    ...略..., function(window, noGlobal) {


    ...略...


    return jQuery;


    });
    L40 ~ L10880
    jQuery 本體

    View Slide

  23. ޒഒላӃ
    var


    version = "3.6.0",


    jQuery = function(selector, context) {


    return new jQuery.fn.init(selector, context);


    };
    L157 ~ L162
    jQuery 定義

    View Slide

  24. ޒഒላӃ
    var Sizzle =


    ( function( window ) {


    var i,


    ...略...


    return Sizzle;


    } )( window );
    L523 ~ L2978
    Sizzle.js

    View Slide

  25. ޒഒላӃ
    jQuery.find = Sizzle;


    jQuery.expr = Sizzle.selectors;
    L2982 ~ L2983
    把 Sizzle 灌給 jQuery

    View Slide

  26. ޒഒላӃ
    init = jQuery.fn.init = function( selector, context, root ) {


    var match, elem;


    // HANDLE: $(""), $(null), $(undefined), $(false)


    if ( !selector ) {


    return this;


    }


    ...略...


    return jQuery.makeArray( selector, this );


    };
    L3137 ~ L3234
    初始化在這裡!

    View Slide

  27. ޒഒላӃ
    init.prototype = jQuery.fn;
    L3237
    讓 new 出來的 jQuery 物件,享
    有整個 jQuery 的 prototype

    View Slide

  28. ޒഒላӃ
    jQuery.event = {


    global: {},


    add: function( elem, types, handler, data, selector ) {


    ...略...


    }


    ...略...


    };
    L5190 ~ L5607
    事件處理

    View Slide

  29. ޒഒላӃ
    ajax: function( url, options ) {


    if ( typeof url === "object" ) {


    options = url;


    url = undefined;


    }


    ...略...


    return jqXHR;


    },
    L9378 ~ L9824
    ajax

    View Slide

  30. ޒഒላӃ
    var


    _jQuery = window.jQuery,


    _$ = window.$;


    jQuery.noConflict = function(deep) {


    if (window.$ === jQuery) {


    window.$ = _$;


    }


    if (deep && window.jQuery === jQuery) {


    window.jQuery = _jQuery;


    }


    return jQuery;


    };
    L10850 ~ L10868
    如果有衝突的話...

    View Slide

  31. ޒഒላӃ
    if ( typeof noGlobal === "undefined" ) {


    window.jQuery = window.$ = jQuery;


    }
    L10850 ~ L10868
    把 jQuery 放到全域變數

    View Slide

  32. ޒഒላӃ
    歡迎加
    好友

    View Slide