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. ޒഒላӃ a.k.a Eddie 愛現! 喜歡冷門的玩具 開發者 / 講師 / 電腦書作者

    技術推廣、教育、技術諮詢 台灣、日本等國內外技術研討會講者 部落格:https://kaochenlong.com 高見龍 @eddiekao
  2. ޒഒላӃ େᢇ၊ઃҰԼ w 你஌ಓᏓᏐత4DPQFੋॄኄ w 你஌ಓॄኄੋ'VODUJPO w ἦ಄വᏐ w **'&ʢ*OUFSNFEJBUF*OWPLF'VODUJPO&YQSFTTJPOʣ

    w 你஌ಓ+BWB4DSJQUཫత෺݅ಋ޲ੋዎኄճࣄ w 1SPUPUZQF᪑OFXత᮫܎ w 你஌ಓUIJTዎኄ؃
  3. ޒഒላӃ var version = "3.6.0", jQuery = function(selector, context) {

    return new jQuery.fn.init(selector, context); }; L157 ~ L162 jQuery 定義
  4. ޒഒላӃ var Sizzle = ( function( window ) { var

    i, ...略... return Sizzle; } )( window ); L523 ~ L2978 Sizzle.js
  5. ޒഒላӃ 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 初始化在這裡!
  6. ޒഒላӃ jQuery.event = { global: {}, add: function( elem, types,

    handler, data, selector ) { ...略... } ...略... }; L5190 ~ L5607 事件處理
  7. ޒഒላӃ ajax: function( url, options ) { if ( typeof

    url === "object" ) { options = url; url = undefined; } ...略... return jqXHR; }, L9378 ~ L9824 ajax
  8. ޒഒላӃ 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 如果有衝突的話...
  9. ޒഒላӃ if ( typeof noGlobal === "undefined" ) { window.jQuery

    = window.$ = jQuery; } L10850 ~ L10868 把 jQuery 放到全域變數