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

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

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

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

Dbfa12cd7e1ff8b06a588609369d6e49?s=128

高見龍

July 31, 2022
Tweet

More Decks by 高見龍

Other Decks in Programming

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"37VF "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. ޒഒላӃ 歡迎加 好友