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
830
閱讀原始碼 - 再戰十年的 jQuery
- 檢視 jQuery 設計架構
- 欣賞一些有趣的寫法
- 理解設計原理後,試著復刻一個陽春版的 jQuery
高見龍
July 31, 2022
Tweet
Share
More Decks by 高見龍
See All by 高見龍
為你自己學 Python
eddie
0
620
Generative AI 年會小聚 - AI 教我寫程式
eddie
0
93
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
620
AI 時代的程式語言學習法
eddie
0
130
前端模組解放運動 - importmap
eddie
0
1.4k
Git 和 DevOps - 在混亂的流星群開發流程中找到小確幸
eddie
1
1.2k
模組化前端開發:從亂七八糟到組織有序
eddie
0
1.6k
被 Vue 框架耽誤的建置工具
eddie
2
1k
開開心心寫測試,你的程式碼也會微笑
eddie
1
1.3k
Other Decks in Programming
See All in Programming
Select API from Kotlin Coroutine
jmatsu
1
210
Create a website using Spatial Web
akkeylab
0
310
ニーリーにおけるプロダクトエンジニア
nealle
0
710
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
GoのGenericsによるslice操作との付き合い方
syumai
3
710
エンジニア向け採用ピッチ資料
inusan
0
180
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
410
Deep Dive into ~/.claude/projects
hiragram
10
2.2k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
277
23k
The Pragmatic Product Professional
lauravandoore
35
6.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Writing Fast Ruby
sferik
628
62k
How GitHub (no longer) Works
holman
314
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Automating Front-end Workflow
addyosmani
1370
200k
KATA
mclloyd
30
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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 放到全域變數
ޒഒላӃ 歡迎加 好友