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

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

Transcript

1. ޒഒላӃ ࠶ፌे೥ɽK2VFSZ 高見龍
2. ޒഒላӃ ࣗզհ঺
3. ޒഒላӃ a.k.a Eddie 愛現! 喜歡冷門的玩具 開發者 / 講師 / 電腦書作者 技術推廣、教育、技術諮詢 台灣、日本等國內外技術研討會講者 部落格：https://kaochenlong.com 高見龍 @eddiekao
4. ޒഒላӃ 第25刷 發售中 發售中 發售中
5. ޒഒላӃ 已絕版
6. ޒഒላӃ 敬請 期待
7. ޒഒላӃ 歡迎加 好友
8. ޒഒላӃ ຊจ։࢝
9. ޒഒላӃ ฏৗ༗ࡏሜ
   +BWB4DSJQU
   嗎ʁ 🙋
10. ޒഒላӃ ᡒ說ݱࡏେՈ౎ࡏሜ
    7"3
11. ޒഒላӃ 7"3
    
    7VF
    "OHVMBS
    3FBDU
12. ޒഒላӃ ౎
    
    ೥ྃɼؐ༗ਓ
13. ޒഒላӃ ؐ༗ਓࡏሜ
    K2VFSZ
    嗎ʁ 🙋
14. ޒഒላӃ શੈքࢢ佔཰࠷ߴతલ୺౟݅ʁ
15. ޒഒላӃ ૢ࡞ᖣ᧸ثత
    %0.
    ෺݅
16. ޒഒላӃ ލᖣ᧸ثࢧԉʂ
17. ޒഒላӃ ஐܛ݁থ
18. ޒഒላӃ େᢇ၊ઃҰԼ w 你஌ಓᏓᏐత
    4DPQF
    ੋॄኄ
    w 你஌ಓॄኄੋ
    'VODUJPO
    w ἦ಄വᏐ
    w **'&ʢ*OUFSNFEJBUF
    *OWPLF
    'VODUJPO
    &YQSFTTJPOʣ
    w 你஌ಓ
    +BWB4DSJQU
    ཫత෺݅ಋ޲ੋዎኄճࣄ
    w 1SPUPUZQF
    ᪑
    OFX
    త᮫܎
    w 你஌ಓ
    UIJT
    ዎኄ؃
19. ޒഒላӃ -JWFʂ
20. ޒഒላӃ ֢ॏᴍʂ
21. ޒഒላӃ (function(global, factory) { ...略... })(typeof window !== "undefined" ? window : this, ...略... L14 ~ L40 IIFE 起⼿式
22. ޒഒላӃ ...略... ...略..., function(window, noGlobal) { ...略... return jQuery; }); L40 ~ L10880 jQuery 本體
23. ޒഒላӃ var version = "3.6.0", jQuery = function(selector, context) { return new jQuery.fn.init(selector, context); }; L157 ~ L162 jQuery 定義
24. ޒഒላӃ var Sizzle = ( function( window ) { var i, ...略... return Sizzle; } )( window ); L523 ~ L2978 Sizzle.js
25. ޒഒላӃ jQuery.find = Sizzle; jQuery.expr = Sizzle.selectors; L2982 ~ L2983 把 Sizzle 灌給 jQuery
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 初始化在這裡！
27. ޒഒላӃ init.prototype = jQuery.fn; L3237 讓 new 出來的 jQuery 物件，享 有整個 jQuery 的 prototype
28. ޒഒላӃ jQuery.event = { global: {}, add: function( elem, types, handler, data, selector ) { ...略... } ...略... }; L5190 ~ L5607 事件處理
29. ޒഒላӃ ajax: function( url, options ) { if ( typeof url === "object" ) { options = url; url = undefined; } ...略... return jqXHR; }, L9378 ~ L9824 ajax
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 如果有衝突的話...
31. ޒഒላӃ if ( typeof noGlobal === "undefined" ) { window.jQuery = window.$ = jQuery; } L10850 ~ L10868 把 jQuery 放到全域變數
32. ޒഒላӃ 歡迎加 好友