Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
閱讀原始碼 - 再戰十年的 jQuery
高見龍
July 31, 2022
Programming
1
460
閱讀原始碼 - 再戰十年的 jQuery
- 檢視 jQuery 設計架構
- 欣賞一些有趣的寫法
- 理解設計原理後,試著復刻一個陽春版的 jQuery
高見龍
July 31, 2022
Tweet
Share
More Decks by 高見龍
See All by 高見龍
Learn JavaScript Well
eddie
1
1.1k
How to Learn Web Framework Correctly
eddie
4
1.8k
about-5xruby
eddie
0
90
Ruby on Rails 2018 年進化論
eddie
0
120
10 years in learning Ruby
eddie
5
1.3k
傳說中可以治百病的區塊鏈是怎麼一回事?
eddie
0
1.7k
Git Branch
eddie
0
320
Refactoring (Ruby edition)
eddie
0
220
非科班阿宅之 自我技術精進之道
eddie
0
290
Other Decks in Programming
See All in Programming
AWSとCPUのムフフな関係
cmdemura
0
450
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
110
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
610
Azure Functionsをサクッと開発、サクッとデプロイ/vscodeconf2023-baba
nina01
1
330
Writing Greener Java Applications
hollycummins
0
330
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
390
フロントエンドで 良いコードを書くために
t_keshi
3
1.6k
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
120
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
140
%q is for Quine
koic
0
400
Git Rebase
bkuhlmann
10
1.2k
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
340
Featured
See All Featured
Clear Off the Table
cherdarchuk
79
290k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
KATA
mclloyd
12
9.7k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
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 放到全域變數
ޒഒላӃ 歡迎加 好友