利用觀察者模式實現彈幕傳送效果

2021-10-10 17:17:29 字數 1772 閱讀 6790

html**編寫

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

head

>

>

/* 文字輸入框樣式 */

input

.div0

style

>

>

class

="div0"

>

src=

"./test3.mp4"

controls

>

video

>

>

type

="text"

>

div>

type

="module"

>

import bullet from

"./bullet.js"

;var input=document.

queryselector

("input");

//獲取輸入框

document.

addeventlistener

("keyup"

,keyhandler)

;//監聽鍵盤事件

// 鍵盤事件函式

function

keyhandler

(e)script

>

body

>

html

>

timemanager.js**編寫

export

default

class

timemanager

static

getinstance()

)}return timemanager._instance;

}//新增

add(elem)

//刪除

remove

(elem)

}//更新

update()

)}}

bullet.js**編寫

import timemanager from

"./timemanager.js"

;export

default

class

bullet

createlem

(txt)

) div.textcontent=txt;

//將文字傳進來

return div;

}(parent));

this

.x=this

.rect.width;

this

.width=

this

.elem.offsetwidth;

timemanager.instance.

add(

this);

}update()

}}

被觀察者:可能不是乙個,可能有若干個,如果有若干個就要放在乙個列表中,觀察者去觀察被觀察者的變化,或者通知所有被觀察者去發生變化,這裡的彈幕就是被觀察者。

觀察者模式實現

公升級觀察者 var observer function 定義介面 return else trigger方法用於觸發觀察者物件中的事件 type 要觸發的事件名稱 trigger用於觸發觀察者物件中的事件 trigger function type,val off方法用於移除某個事件 off fu...

原生JS物件導向式程式設計實現彈幕,利用觀察者模式

直接上源 html檔案 lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle input button div0 style head class div0 src...

PHP實現觀察者模式

特點 觀察者模式定義物件的一對多依賴,這樣一來,當乙個物件改變狀態時,它的所有依賴者都會收到通知並自動更新 觀察者模式利用 組合 將許多觀察者組合進主題中。物件 觀察者 主題 之間的這種關係不是通過繼承產生的,而是在執行時利用組合的方式產生的。多用組合,少用繼承!觀察者模式的優點和缺點 觀察者模式的...