摘要:事件刪除可有可無。創(chuàng)建了一個(gè)類,然后在構(gòu)造函數(shù)里初始化一個(gè)類的屬性,這個(gè)屬性不需要要繼承任何東西,所以用了。但這不是必要的,因?yàn)閷?shí)例化一個(gè)都會調(diào)用構(gòu)造函數(shù),皆為初始狀態(tài),應(yīng)該是不可能已經(jīng)定義了的,可去掉。成功執(zhí)行結(jié)束后返回。
GitHub地址:JavaScript EventEmitter博客地址:JavaScript EventEmitter
水平有限,歡迎批評指正
2個(gè)多月前把 Github 上的 eventemitter3 和 Node.js 下的事件模塊 events 的源碼抄了一遍,才終于對 JavaScript 事件有所了解。
上個(gè)周末花點(diǎn)時(shí)間根據(jù)之前看源碼的理解自己用 ES6 實(shí)現(xiàn)了一個(gè) eventemitter8,然后也發(fā)布到 npm 上了,讓我比較意外的是才發(fā)布兩天在沒有 readme 介紹,沒有任何宣傳的情況下居然有45個(gè)下載,我很好奇都是誰下載的,會不會用。我花了不少時(shí)間半抄半原創(chuàng)的一個(gè) JavaScript 時(shí)間處理庫 now.js (npm 傳送門:now.js) ,在我大力宣傳的情況下,4個(gè)月的下載量才177。真是有心栽花花不開,無心插柳柳成蔭!
eventemitter8 大部分是我根據(jù)看源碼理解后寫出來的,有一些方法如listeners,listenerCount 和 eventNames 一下子想不起來到底做什么,回頭重查。測試用例不少是參考了 eventemitter3,在此對 eventemitter3 的開發(fā)者們和 Node.js 事件模塊的開發(fā)者們表示感謝!
下面來講講我對 JavaScript 事件的理解:
從上圖可以看出,JavaScript 事件最核心的包括事件監(jiān)聽 (addListener)、事件觸發(fā) (emit)、事件刪除 (removeListener)。
事件監(jiān)聽(addListener)首先,監(jiān)聽肯定要有監(jiān)聽的目標(biāo),或者說是對象,那為了達(dá)到區(qū)分目標(biāo)的目的,名字是不可少的,我們定義為 type。
其次,監(jiān)聽的目標(biāo)一定要有某種動作,對應(yīng)到 JavaScript 里實(shí)際上就是某種方法,這里定義為 fn。
譬如可以監(jiān)聽一個(gè) type 為 add,方法為某一個(gè)變量 a 值加1的方法 fn = () => a + 1的事件。如果我們還想監(jiān)聽一個(gè)使變量 b 加2的方法,我們第一反應(yīng)可能是創(chuàng)建一個(gè) type 為 add2,方法 為 fn1 = () => b + 2 的事件。你可能會想,這太浪費(fèi)了,我能不能只監(jiān)聽一個(gè)名字,讓它執(zhí)行多于一個(gè)方法的事件。當(dāng)然是可以的。
那么怎么做呢?
很簡單,把監(jiān)聽的方法放在一個(gè)數(shù)組里,遍歷數(shù)組順序執(zhí)行就可以了。以上例子變?yōu)?type 為 add,方法為[fn, fn1]。
如果要細(xì)分的話還可以分為可以無限次執(zhí)行的事件 on 和 只允許執(zhí)行一次的事件 once (執(zhí)行完后立即將事件刪除)。待后詳述。
事件觸發(fā)(emit)單有事件監(jiān)聽是不夠的,必須要有事件觸發(fā)才能算完成整個(gè)過程。emit 就是去觸發(fā)監(jiān)聽的特定 type 對應(yīng)的單個(gè)事件或者一系列事件。拿前面的例子來說單個(gè)事件就是去執(zhí)行 fn,一系列事件就是去遍歷執(zhí)行 fn 和 fn1。
事件刪除(removeListener)嚴(yán)格意義上來講,事件監(jiān)聽和事件觸發(fā)已經(jīng)能完成整個(gè)過程。事件刪除可有可無。但很多時(shí)候,我們還是需要事件刪除的。比如前面講的只允許執(zhí)行一次事件 once,如果不提供刪除方法,很難保證你什么時(shí)候會再次執(zhí)行它。通常情況下,只要是不再需要的事件,我們都應(yīng)該去刪除它。
核心部分講完,下面簡單的對 eventemitter8的源碼進(jìn)行解析。
源碼解析全部源碼:
const toString = Object.prototype.toString; const isType = obj => toString.call(obj).slice(8, -1).toLowerCase(); const isArray = obj => Array.isArray(obj) || isType(obj) === "array"; const isNullOrUndefined = obj => obj === null || obj === undefined; const _addListener = function(type, fn, context, once) { if (typeof fn !== "function") { throw new TypeError("fn must be a function"); } fn.context = context; fn.once = !!once; const event = this._events[type]; // only one, let `this._events[type]` to be a function if (isNullOrUndefined(event)) { this._events[type] = fn; } else if (typeof event === "function") { // already has one function, `this._events[type]` must be a function before this._events[type] = [event, fn]; } else if (isArray(event)) { // already has more than one function, just push this._events[type].push(fn); } return this; }; class EventEmitter { constructor() { if (this._events === undefined) { this._events = Object.create(null); } } addListener(type, fn, context) { return _addListener.call(this, type, fn, context); } on(type, fn, context) { return this.addListener(type, fn, context); } once(type, fn, context) { return _addListener.call(this, type, fn, context, true); } emit(type, ...rest) { if (isNullOrUndefined(type)) { throw new Error("emit must receive at lease one argument"); } const events = this._events[type]; if (isNullOrUndefined(events)) return false; if (typeof events === "function") { events.call(events.context || null, rest); if (events.once) { this.removeListener(type, events); } } else if (isArray(events)) { events.map(e => { e.call(e.context || null, rest); if (e.once) { this.removeListener(type, e); } }); } return true; } removeListener(type, fn) { if (isNullOrUndefined(this._events)) return this; // if type is undefined or null, nothing to do, just return this if (isNullOrUndefined(type)) return this; if (typeof fn !== "function") { throw new Error("fn must be a function"); } const events = this._events[type]; if (typeof events === "function") { events === fn && delete this._events[type]; } else { const findIndex = events.findIndex(e => e === fn); if (findIndex === -1) return this; // match the first one, shift faster than splice if (findIndex === 0) { events.shift(); } else { events.splice(findIndex, 1); } // just left one listener, change Array to Function if (events.length === 1) { this._events[type] = events[0]; } } return this; } removeAllListeners(type) { if (isNullOrUndefined(this._events)) return this; // if not provide type, remove all if (isNullOrUndefined(type)) this._events = Object.create(null); const events = this._events[type]; if (!isNullOrUndefined(events)) { // check if `type` is the last one if (Object.keys(this._events).length === 1) { this._events = Object.create(null); } else { delete this._events[type]; } } return this; } listeners(type) { if (isNullOrUndefined(this._events)) return []; const events = this._events[type]; // use `map` because we need to return a new array return isNullOrUndefined(events) ? [] : (typeof events === "function" ? [events] : events.map(o => o)); } listenerCount(type) { if (isNullOrUndefined(this._events)) return 0; const events = this._events[type]; return isNullOrUndefined(events) ? 0 : (typeof events === "function" ? 1 : events.length); } eventNames() { if (isNullOrUndefined(this._events)) return []; return Object.keys(this._events); } } export default EventEmitter;
代碼很少,只有151行,因?yàn)閷懙暮唵伟妫矣玫?ES6,所以才這么少;Node.js的事件和 eventemitter3可比這多且復(fù)雜不少,有興趣可自行深入研究。
const toString = Object.prototype.toString; const isType = obj => toString.call(obj).slice(8, -1).toLowerCase(); const isArray = obj => Array.isArray(obj) || isType(obj) === "array"; const isNullOrUndefined = obj => obj === null || obj === undefined;
這4行就是一些工具函數(shù),判斷所屬類型、判斷是否是 null 或者 undefined。
constructor() { if (isNullOrUndefined(this._events)) { this._events = Object.create(null); } }
創(chuàng)建了一個(gè) EventEmitter 類,然后在構(gòu)造函數(shù)里初始化一個(gè)類的 _events 屬性,這個(gè)屬性不需要要繼承任何東西,所以用了 Object.create(null)。當(dāng)然這里 isNullOrUndefined(this._events) 還去判斷了一下 this._events 是否為 undefined 或者 null,如果是才需要?jiǎng)?chuàng)建。但這不是必要的,因?yàn)閷?shí)例化一個(gè) EventEmitter 都會調(diào)用構(gòu)造函數(shù),皆為初始狀態(tài),this._events 應(yīng)該是不可能已經(jīng)定義了的,可去掉。
addListener(type, fn, context) { return _addListener.call(this, type, fn, context); } on(type, fn, context) { return this.addListener(type, fn, context); } once(type, fn, context) { return _addListener.call(this, type, fn, context, true); }
接下來是三個(gè)方法 addListener、on、once ,其中 on 是 addListener 的別名,可執(zhí)行多次。once 只能執(zhí)行一次。
三個(gè)方法都用到了 _addListener 方法:
const _addListener = function(type, fn, context, once) { if (typeof fn !== "function") { throw new TypeError("fn must be a function"); } fn.context = context; fn.once = !!once; const event = this._events[type]; // only one, let `this._events[type]` to be a function if (isNullOrUndefined(event)) { this._events[type] = fn; } else if (typeof event === "function") { // already has one function, `this._events[type]` must be a function before this._events[type] = [event, fn]; } else if (isArray(event)) { // already has more than one function, just push this._events[type].push(fn); } return this; };
方法有四個(gè)參數(shù),type 是監(jiān)聽事件的名稱,fn 是監(jiān)聽事件對應(yīng)的方法,context 俗稱爸爸,改變 this 指向的,也就是執(zhí)行的主體。once 是一個(gè)布爾型,用來標(biāo)志是否只執(zhí)行一次。
首先判斷 fn 的類型,如果不是方法,拋出一個(gè)類型錯(cuò)誤。fn.context = context;fn.once = !!once 把執(zhí)行主體和是否執(zhí)行一次作為方法的屬性。const event = this._events[type] 把該對應(yīng) type 的所有已經(jīng)監(jiān)聽的方法存到變量 event。
// only one, let `this._events[type]` to be a function if (isNullOrUndefined(event)) { this._events[type] = fn; } else if (typeof event === "function") { // already has one function, `this._events[type]` must be a function before this._events[type] = [event, fn]; } else if (isArray(event)) { // already has more than one function, just push this._events[type].push(fn); } return this;
如果 type 本身沒有正在監(jiān)聽任何方法,this._events[type] = fn 直接把監(jiān)聽的方法 fn 賦給 type 屬性 ;如果正在監(jiān)聽一個(gè)方法,則把要添加的 fn 和之前的方法變成一個(gè)含有2個(gè)元素的數(shù)組 [event, fn],然后再賦給 type 屬性,如果正在監(jiān)聽超過2個(gè)方法,直接 push 即可。最后返回 this ,也就是 EventEmitter 實(shí)例本身。
簡單來講不管是監(jiān)聽多少方法,都放到數(shù)組里是沒必要像上面細(xì)分。但性能較差,只有一個(gè)方法時(shí) key: fn 的效率比 key: [fn] 要高。
再回頭看看三個(gè)方法:
addListener(type, fn, context) { return _addListener.call(this, type, fn, context); } on(type, fn, context) { return this.addListener(type, fn, context); } once(type, fn, context) { return _addListener.call(this, type, fn, context, true); }
addListener 需要用 call 來改變 this 指向,指到了類的實(shí)例。once 則多傳了一個(gè)標(biāo)志位 true 來標(biāo)志它只需要執(zhí)行一次。這里你會看到我在 addListener 并沒有傳 false 作為標(biāo)志位,主要是因?yàn)槲覒?,但并不會影響到程序的邏輯。因?yàn)榍懊娴?fn.once = !!once 已經(jīng)能很好的處理不傳值的情況。沒傳值 !!once 為 false。
接下來講 emit
emit(type, ...rest) { if (isNullOrUndefined(type)) { throw new Error("emit must receive at lease one argument"); } const events = this._events[type]; if (isNullOrUndefined(events)) return false; if (typeof events === "function") { events.call(events.context || null, rest); if (events.once) { this.removeListener(type, events); } } else if (isArray(events)) { events.map(e => { e.call(e.context || null, rest); if (e.once) { this.removeListener(type, e); } }); } return true; }
事件觸發(fā)需要指定具體的 type 否則直接拋出錯(cuò)誤。這個(gè)很容易理解,你都沒有指定名稱,我怎么知道該去執(zhí)行誰的事件。if (isNullOrUndefined(events)) return false,如果 type 對應(yīng)的方法是 undefined 或者 null ,直接返回 false 。因?yàn)閴焊鶝]有對應(yīng) type 的方法可以執(zhí)行。而 emit 需要知道是否被成功觸發(fā)。
接著判斷 evnts 是不是一個(gè)方法,如果是, events.call(events.context || null, rest) 執(zhí)行該方法,如果指定了執(zhí)行主體,用 call 改變 this 的指向指向 events.context 主體,否則指向 null ,全局環(huán)境。對于瀏覽器環(huán)境來說就是 window。差點(diǎn)忘了 rest ,rest 是方法執(zhí)行時(shí)的其他參數(shù)變量,可以不傳,也可以為一個(gè)或多個(gè)。執(zhí)行結(jié)束后判斷 events.once ,如果為 true ,就用 removeListener 移除該監(jiān)聽事件。
如果 evnts 是數(shù)組,邏輯一樣,只是需要遍歷數(shù)組去執(zhí)行所有的監(jiān)聽方法。
成功執(zhí)行結(jié)束后返回 true 。
removeListener(type, fn) { if (isNullOrUndefined(this._events)) return this; // if type is undefined or null, nothing to do, just return this if (isNullOrUndefined(type)) return this; if (typeof fn !== "function") { throw new Error("fn must be a function"); } const events = this._events[type]; if (typeof events === "function") { events === fn && delete this._events[type]; } else { const findIndex = events.findIndex(e => e === fn); if (findIndex === -1) return this; // match the first one, shift faster than splice if (findIndex === 0) { events.shift(); } else { events.splice(findIndex, 1); } // just left one listener, change Array to Function if (events.length === 1) { this._events[type] = events[0]; } } return this; }
removeListener 接收一個(gè)事件名稱 type 和一個(gè)將要被移除的方法 fn 。if (isNullOrUndefined(this._events)) return this 這里表示如果 EventEmitter 實(shí)例本身的 _events 為 null 或者 undefined 的話,沒有任何事件監(jiān)聽,直接返回 this 。
if (isNullOrUndefined(type)) return this 如果沒有提供事件名稱,也直接返回 this 。
if (typeof fn !== "function") { throw new Error("fn must be a function"); }
fn 如果不是一個(gè)方法,直接拋出錯(cuò)誤,很好理解。
接著判斷 type 對應(yīng)的 events 是不是一個(gè)方法,是,并且 events === fn 說明 type 對應(yīng)的方法有且僅有一個(gè),等于我們指定要?jiǎng)h除的方法。這個(gè)時(shí)候 delete this._events[type] 直接刪除掉 this._events 對象里 type 即可。
所有的 type 對應(yīng)的方法都被移除后。想一想 this._events[type] = undefined 和 delete this._events[type] 會有什么不同?
差異是很大的,this._events[type] = undefined 僅僅是將 this._events 對象里的 type 屬性賦值為 undefined ,type 這一屬性依然占用內(nèi)存空間,但其實(shí)已經(jīng)沒什么用了。如果這樣的 type 一多,有可能造成內(nèi)存泄漏。delete this._events[type] 則直接刪除,不占內(nèi)存空間。前者也是 Node.js 事件模塊和 eventemitter3 早期實(shí)現(xiàn)的做法。
如果 events 是數(shù)組,這里我沒有用 isArray 進(jìn)行判斷,而是直接用一個(gè) else ,原因是 this._events[type] 的輸入限制在 on 或者 once 中,而它們已經(jīng)限制了 this._events[type] 只能是方法組成的數(shù)組或者是一個(gè)方法,最多加上不小心或者人為賦成 undefined 或 null 的情況,但這個(gè)情況我們也在前面判斷過了。
因?yàn)?isArray 這個(gè)工具方法其實(shí)運(yùn)行效率是不高的,為了追求一些效率,在不影響運(yùn)行邏輯情況下可以不用 isArray 。而且 typeof events === "function" 用 typeof 判斷方法也比 isArray 的效率要高,這也是為什么不先判斷是否是數(shù)組的原因。用 typeof 去判斷一個(gè)方法也比 Object.prototype.toSting.call(events) === "[object Function] 效率要高。但數(shù)組不能用 typeof 進(jìn)行判斷,因?yàn)榉祷氐氖?object, 這眾所周知。雖然如此,在我面試過的很多人中,仍然有很多人不知道。。。
const findIndex = events.findIndex(e => e === fn) 此處用 ES6 的數(shù)組方法 findIndex 直接去查找 fn 在 events 中的索引。如果 findIndex === -1 說明我們沒有找到要?jiǎng)h除的 fn ,直接返回 this 就好。如果 findIndex === 0 ,是數(shù)組第一個(gè)元素,shift 剔除,否則用 splice 剔除。因?yàn)?shift 比 splice 效率高。
findIndex 的效率其實(shí)沒有 for 循環(huán)去查找的高,所以 eventemitter8 的效率在我沒有做 benchmark 之前我就知道肯定會比 eventemitter3 效率要低不少。不那么追求執(zhí)行效率時(shí)當(dāng)然是用最懶的方式來寫最爽。所謂的懶即正義。。。
最后還得判斷移除 fn 后 events 剩余的數(shù)量,如果只有一個(gè),基于之前要做的優(yōu)化,this._events[type] = events[0] 把含有一個(gè)元素的數(shù)組變成一個(gè)方法,降維打擊一下。。。
最后的最后 return this 返回自身,鏈?zhǔn)秸{(diào)用還能用得上。
removeAllListeners(type) { if (isNullOrUndefined(this._events)) return this; // if not provide type, remove all if (isNullOrUndefined(type)) this._events = Object.create(null); const events = this._events[type]; if (!isNullOrUndefined(events)) { // check if type is the last one if (Object.keys(this._events).length === 1) { this._events = Object.create(null); } else { delete this._events[type]; } } return this; }
removeAllListeners 指的是要?jiǎng)h除一個(gè) type 對應(yīng)的所有方法。參數(shù) type 是可選的,如果未指定 type ,默認(rèn)把所有的監(jiān)聽事件刪除,直接 this._events = Object.create(null) 操作即可,跟初始化 EventEmitter 類一樣。
如果 events 既不是 null 且不是 undefined 說明有可刪除的 type ,先用 Object.keys(this._events).length === 1 判斷是不是最后一個(gè) type 了,如果是,直接初始化 this._events = Object.create(null),否則 delete this._events[type] 直接刪除 type 屬性,一步到位。
最后返回 this 。
到目前為止,所有的核心功能已經(jīng)講完。
listeners(type) { if (isNullOrUndefined(this._events)) return []; const events = this._events[type]; // use `map` because we need to return a new array return isNullOrUndefined(events) ? [] : (typeof events === "function" ? [events] : events.map(o => o)); } listenerCount(type) { if (isNullOrUndefined(this._events)) return 0; const events = this._events[type]; return isNullOrUndefined(events) ? 0 : (typeof events === "function" ? 1 : events.length); } eventNames() { if (isNullOrUndefined(this._events)) return []; return Object.keys(this._events); }
listeners 返回的是 type 對應(yīng)的所有方法。結(jié)果都是一個(gè)數(shù)組,如果沒有,返回空數(shù)組;如果只有一個(gè),把它的方法放到一個(gè)數(shù)組中返回;如果本來就是一個(gè)數(shù)組,map 返回。之所以用 map 返回而不是直接 return this._events[type] 是因?yàn)?map 返回一個(gè)新的數(shù)組,是深度復(fù)制,修改數(shù)組中的值不會影響到原數(shù)組。this._events[type] 則返回原數(shù)組的一個(gè)引用,是淺度復(fù)制,稍不小心改變值會影響到原數(shù)組。造成這個(gè)差異的底層原因是數(shù)組是一個(gè)引用類型,淺度復(fù)制只是指針拷貝。這可以多帶帶寫一篇文章,不展開了。
listenerCount 返回的是 type 對應(yīng)的方法的個(gè)數(shù),代碼一眼就明白,不多說。
eventNames 這個(gè)返回的是所有 type 組成的數(shù)組,沒有返回空數(shù)組,否則用 Object.keys(this._events) 直接返回。
最后的最后,export default EventEmitter 把 EventEmitter 導(dǎo)出。
結(jié)語我是先看了兩個(gè)庫才知道怎么寫的,其實(shí)最好的學(xué)習(xí)方法是知道 EventEmitter 是干什么用的以后自己動手寫,寫完以后再和那些庫進(jìn)行對比,找出差距,修正再修正。
但也不是說先看再寫沒有收獲,至少比只看不寫和看都沒看的有收獲不是。。。
水平有限,代碼錯(cuò)漏或者文章講不清楚之處在所難免,歡迎大家批評指正。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/93679.html
摘要:發(fā)布訂閱模式訂閱者把自己想訂閱的事件注冊到調(diào)度中心,當(dāng)發(fā)布者發(fā)布該事件到調(diào)度中心,也就是該事件觸發(fā)時(shí),由調(diào)度中心統(tǒng)一調(diào)度訂閱者注冊到調(diào)度中心的處理代碼。 發(fā)布-訂閱模式,看似陌生,其實(shí)不然。工作中經(jīng)常會用到,例如 Node.js EventEmitter 中的 on 和 emit 方法;Vue 中的 $on 和 $emit 方法。他們都使用了發(fā)布-訂閱模式,讓開發(fā)變得更加高效方便。 一...
摘要:觀察者模式觀察者模式廣泛的應(yīng)用于語言中,瀏覽器事件如鼠標(biāo)單擊,鍵盤事件都是該模式的例子??梢钥吹?,這就是觀察者模式的訂閱方法實(shí)現(xiàn)。小結(jié)通過創(chuàng)建可觀察的對象,當(dāng)發(fā)生一個(gè)感興趣的事件時(shí)可將該事件通告給所有觀察者,從而形成松散的耦合。 觀察者模式 觀察者模式(observer)廣泛的應(yīng)用于javascript語言中,瀏覽器事件(如鼠標(biāo)單擊click,鍵盤事件keyDown)都是該模式的例子。...
摘要:使用構(gòu)造函數(shù)的原型繼承相比使用原型的原型繼承更加復(fù)雜,我們先看看使用原型的原型繼承上面的代碼很容易理解。相反的,使用構(gòu)造函數(shù)的原型繼承像下面這樣當(dāng)然,構(gòu)造函數(shù)的方式更簡單。 五天之前我寫了一個(gè)關(guān)于ES6標(biāo)準(zhǔn)中Class的文章。在里面我介紹了如何用現(xiàn)有的Javascript來模擬類并且介紹了ES6中類的用法,其實(shí)它只是一個(gè)語法糖。感謝Om Shakar以及Javascript Room中...
摘要:以下總結(jié)了異步編程的種方式回調(diào)函數(shù)回調(diào)函數(shù)異步編程的最基本的方式。由小組的成員在規(guī)范中提出,目的是為異步編程提供統(tǒng)一接口。結(jié)尾參考文章異步編程參考文章使用詳解 前言 Javascript語言的執(zhí)行環(huán)境是單線程。 單線程: 一次只能完成一個(gè)任務(wù)。如果有多個(gè)任務(wù),就必須排隊(duì),前面一個(gè)任務(wù)完成,再執(zhí)行后面一個(gè)任務(wù)。 單線程的好處是執(zhí)行環(huán)境簡單,壞處是在一些耗時(shí)的任務(wù)上會堵塞進(jìn)程。比如讀取一個(gè)...
環(huán)境:Node v8.2.1; Npm v5.3.0;OS Windows10 1、 Node事件介紹 Node大多數(shù)核心 API 都采用慣用的異步事件驅(qū)動架構(gòu),其中某些類型的對象(觸發(fā)器)會周期性地觸發(fā)命名事件來調(diào)用函數(shù)對象(監(jiān)聽器)。 所有能觸發(fā)事件的對象都是 EventEmitter 類的實(shí)例。 這些對象開放了一個(gè) eventEmitter.on() 函數(shù),允許將一個(gè)或多個(gè)函數(shù)綁定到會被對象...
閱讀 1602·2021-11-16 11:44
閱讀 7504·2021-09-22 15:00
閱讀 4539·2021-09-02 10:20
閱讀 1972·2021-08-27 16:20
閱讀 2403·2019-08-26 14:00
閱讀 2917·2019-08-26 11:44
閱讀 1650·2019-08-23 18:33
閱讀 1882·2019-08-22 17:28