使用設計模式之觀察者模式來實現簡單的傳送彈幕元件

2021-10-10 17:04:51 字數 1753 閱讀 3508

按下的必須是回車鍵,並且輸入框中的內容不能全為空格或者沒有內容

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 ...