Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
閱讀原始碼 - 再戰十年的 jQuery
Search
高見龍
July 31, 2022
Programming
1
700
閱讀原始碼 - 再戰十年的 jQuery
- 檢視 jQuery 設計架構
- 欣賞一些有趣的寫法
- 理解設計原理後,試著復刻一個陽春版的 jQuery
高見龍
July 31, 2022
Tweet
Share
More Decks by 高見龍
See All by 高見龍
前端模組解放運動 - importmap
eddie
0
890
Git 和 DevOps - 在混亂的流星群開發流程中找到小確幸
eddie
1
1k
模組化前端開發:從亂七八糟到組織有序
eddie
0
1.2k
被 Vue 框架耽誤的建置工具
eddie
1
860
開開心心寫測試,你的程式碼也會微笑
eddie
1
1.1k
Functional Ruby
eddie
0
220
Learn JavaScript Well
eddie
1
1.2k
How to Learn Web Framework Correctly
eddie
4
1.9k
about-5xruby
eddie
0
140
Other Decks in Programming
See All in Programming
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
39
17k
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
360
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
300
What We Can Learn From OSS
inouehi
0
400
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
290
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
Milestoner
bkuhlmann
1
400
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
400
エンターテイメント業界で利用されるAWS
demuyan
0
200
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
7
3.2k
Featured
See All Featured
Scaling GitHub
holman
457
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
The Language of Interfaces
destraynor
151
23k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Music & Morning Musume
bryan
40
5.6k
Code Review Best Practice
trishagee
54
15k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
13
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
How GitHub (no longer) Works
holman
304
140k
Transcript
ޒഒላӃ ࠶ፌेɽK2VFSZ 高見龍
ޒഒላӃ ࣗզհ
ޒഒላӃ a.k.a Eddie 愛現! 喜歡冷門的玩具 開發者 / 講師 / 電腦書作者
技術推廣、教育、技術諮詢 台灣、日本等國內外技術研討會講者 部落格:https://kaochenlong.com 高見龍 @eddiekao
ޒഒላӃ 第25刷 發售中 發售中 發售中
ޒഒላӃ 已絕版
ޒഒላӃ 敬請 期待
ޒഒላӃ 歡迎加 好友
ޒഒላӃ ຊจ։࢝
ޒഒላӃ ฏৗ༗ࡏሜ+BWB4DSJQU嗎ʁ 🙋
ޒഒላӃ ᡒ說ݱࡏେՈࡏሜ7"3
ޒഒላӃ 7"37VF "OHVMBS 3FBDU
ޒഒላӃ ྃɼؐ༗ਓ
ޒഒላӃ ؐ༗ਓࡏሜK2VFSZ嗎ʁ 🙋
ޒഒላӃ શੈքࢢ佔࠷ߴతલ݅ʁ
ޒഒላӃ ૢ࡞ᖣ᧸ثత%0.݅
ޒഒላӃ ލᖣ᧸ثࢧԉʂ
ޒഒላӃ ஐܛ݁থ
ޒഒላӃ େᢇ၊ઃҰԼ w 你ಓᏓᏐత4DPQFੋॄኄ w 你ಓॄኄੋ'VODUJPO w ἦ಄വᏐ w **'&ʢ*OUFSNFEJBUF*OWPLF'VODUJPO&YQSFTTJPOʣ
w 你ಓ+BWB4DSJQUཫత݅ಋੋዎኄճࣄ w 1SPUPUZQF᪑OFXత᮫ w 你ಓUIJTዎኄ
ޒഒላӃ -JWFʂ
ޒഒላӃ ֢ॏᴍʂ
ޒഒላӃ (function(global, factory) { ...略... })(typeof window !== "undefined" ?
window : this, ...略... L14 ~ L40 IIFE 起⼿式
ޒഒላӃ ...略... ...略..., function(window, noGlobal) { ...略... return jQuery; });
L40 ~ L10880 jQuery 本體
ޒഒላӃ var version = "3.6.0", jQuery = function(selector, context) {
return new jQuery.fn.init(selector, context); }; L157 ~ L162 jQuery 定義
ޒഒላӃ var Sizzle = ( function( window ) { var
i, ...略... return Sizzle; } )( window ); L523 ~ L2978 Sizzle.js
ޒഒላӃ jQuery.find = Sizzle; jQuery.expr = Sizzle.selectors; L2982 ~ L2983
把 Sizzle 灌給 jQuery
ޒഒላӃ 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 初始化在這裡!
ޒഒላӃ init.prototype = jQuery.fn; L3237 讓 new 出來的 jQuery 物件,享
有整個 jQuery 的 prototype
ޒഒላӃ jQuery.event = { global: {}, add: function( elem, types,
handler, data, selector ) { ...略... } ...略... }; L5190 ~ L5607 事件處理
ޒഒላӃ ajax: function( url, options ) { if ( typeof
url === "object" ) { options = url; url = undefined; } ...略... return jqXHR; }, L9378 ~ L9824 ajax
ޒഒላӃ 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 如果有衝突的話...
ޒഒላӃ if ( typeof noGlobal === "undefined" ) { window.jQuery
= window.$ = jQuery; } L10850 ~ L10868 把 jQuery 放到全域變數
ޒഒላӃ 歡迎加 好友