按下的必須是回車鍵,並且輸入框中的內容不能全為空格或者沒有內容。
lang
="en"
>
>
charset
="utf-8"
/>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
/>
>
彈幕title
>
>
input
.div0
style
>
head
>
>
class
="div0"
>
src=
"./test.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
// 根據傳入的內容生成彈幕的內容
createelem
(txt));
div.textcontent = txt;
return div;
}(parent));
this
.x =
this
.rect.width;
this
.width =
this
.elem.offsetwidth;
// 將當前例項化的彈幕物件新增到timemanager.instance所對應的list集合中
timemanager.instance.
add(
this);
}update()
}}
設計模式之觀察者模式
首先說了乙個自己的小例子吧,前兩天我的乙個朋友來找我玩,因為路途比較遠,我需要知道他的位置,然後安排好時間去接他,那麼在這個例子中,我就是乙個觀察者,需要時時刻刻觀察他的位置,我的朋友就是乙個被觀察者。那麼需要知道我朋友的位置,就有兩種方式,第一,我自己打 問,第二,我的朋友告訴我,下面我們來看看這...
設計模式之觀察者模式
一 作用 讓多個觀察者監視某一物件的變化,如果物件變化,則通知所有觀察者。二 例子 抽象主題類 public abstract class subject 移除觀察者 public void detach observer observer 向觀察者 們 發出通知 public void notif...
設計模式之觀察者模式
觀察者模式的定義是 定義物件間的一種一對多的依賴關係。當乙個物件的狀態發生變化時,所有依賴它的物件都會得到通知並自動更新 報社跟讀者的例子 我們用報社和讀者之間的關係來模擬觀察者模式。包含以下主體 報社 news office 讀者介面 reader 具體讀者 reader 二逼青年 reader ...