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

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

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