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