JS实现视频弹幕效果

使用ES6的模块化开发及观察者模式来实现。观察者模式有很多种形式，这里是使用“注册—通知—撤销注册”的形式。TimeManager类可以返回一个单例，每一条弹幕作为一个观察者，注册到TimeManager类的单例的set表中，当单例的set中有数据时，被观察者状态被改变，执行动画，并通知所有观察者进行update状态更新。弹幕移动超过视频宽度时，从TimeManager中注销。当TimeManager单例的set表中所有被观察弹幕都注销时，setInterval停止执行。

1、Bullet.js：

观察者：实现弹幕样式，和自身状态更新update()方法.

2、TimeManager.js

被观察者和Subject：可以增加和删除观察者对象，状态改变时通知所有观察者并更新状态。

3、Player.js

播放器组件：简单的播放器样式，控制按钮等都是默认样式。。。

4、实现效果：

5、具体实现：

import TimeManager from './TimeManager.js';

export default class Bullet{
    
    elem;
    x;
    speedX=2;
    width;

    constructor(txt){
        this.elem = this.createElem(txt);
    }
    createElem(txt){
        if(this.elem) return
        let div = document.createElement("div");
        Object.assign(div.style,{
            position:"absolute",
            whiteSpace: "nowrap",
            fontSize:"16px",
            // color:"#000",
            color:"#e00",
        })
        div.textContent = txt;
        return div
    }
    appendTo(parent){
        if(typeof parent === "string") parent = document.querySelector(parent);
        parent.appendChild(this.elem);
        let rect = parent.getBoundingClientRect();
        this.el