观察者模式实现弹幕功能"/>
基于原生JS结合观察者模式实现弹幕功能
基于原生JS结合观察者模式实现弹幕功能
原理：
1.每一条弹幕都是一个有文本内容的div元素,当发送弹幕之后,该元素将会通过绝对定位显示在视频区域上面,开始自右向左移动,当元素从视频左边移除时,我们需要将其元素删除(从dom树及堆中)。所以需要将弹幕元素对象单独封装成一个类,当主页面input框输入信息提交时,即时创建div元素并开始在视频区域移动。
2.封装一个观察者类,并声明一个静态属性为其本身创建的一个实例化对象,当每有一个弹幕元素对象创建时,都将其放在这个实例化对象中的属性里储存,并且当观察者实例化对象内部有元素时就开始设置定时器每帧执行一次内部所有弹幕元素对象的update方法移动
3.当弹幕元素判断x轴移动位置在视频外时,从update中触发删除元素,并从观察者实例化对象的属性中删除该元素,当观察者实例化对象的属性中没有元素之后清除定时器。即有元素加入之后设置定时器开始update,当无元素时清除定时器。
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>input {width: 528px;height: 30px;font-size: 20px;}.div0 {width: 536px;height: 540px;position: relative;overflow: hidden;}</style></head><body><div class="div0"><video src="./test3.mp4" controls></video><br /><input type="text" placeholder="发个友善的弹幕见证当下"/></div><script type="module">import Bullet from "./observer/Bullet.js";var input = document.querySelector("input"<更多推荐
基于原生JS结合观察者模式实现弹幕功能
发布评论