Собственный JavaScript реализует компонент экрана маркеров

JavaScript

предисловие

В настоящее время почти все видео-сайты имеют функцию заграждения, поэтому сегодня мы будем использовать нативнуюJavaScriptИнкапсулирует класс заграждения. Этот класс ожидает следующие свойства и методы экземпляра:

Атрибуты

  • elСелектор узла-контейнера, узел-контейнер должен быть абсолютно позиционирован, установить ширину и высоту
  • heightВысота каждой бомбовой завесы
  • modeПакетный режим, ПОЛОВИНА - высота половины контейнера, верх - одна треть, полная полнота
  • speedВремя, за которое шквал перемещается по экрану
  • gapWidthРасстояние между следующим заграждением и предыдущим заграждением

метод

  • pushDataДобавить метаданные даммаку
  • addDataПродолжайте присоединяться к заграждению
  • startНачните планировать заграждение
  • stopостановить обстрел
  • restartвозобновить заграждение
  • clearDataОчистить заграждение
  • closeзакрытие
  • openПовторно отобразить заградительный огонь

PS: есть некоторые самоинкапсулированные функции инструмента, которые не будут опубликованы, возможно, если вы знаете значение

инициализация

После введения файлов JavaScript мы надеемся использовать следующее, сначала примите конфигурацию по умолчанию.

let barrage = new Barrage({
    el: '#container'
})

Инициализация параметра:

function Barrage(options) {
    let {
        el,
        height,
        mode,
        speed,
        gapWidth,
    } = options
    this.container = document.querySelector(el)
    this.height = height || 30
    this.speed = speed || 15000 //2000ms
    this.gapWidth = gapWidth || 20
    this.list = []
    this.mode = mode || 'half'
    this.boxSize = getBoxSize(this.container)
    this.perSpeed = Math.round(this.boxSize.width / this.speed)
    this.rows = initRows(this.boxSize, this.mode, this.height)
    this.timeoutFuncs = []
    this.indexs = []
    this.idMap = []
}

Сначала примите параметры, а затем инициализируйте, давайте посмотримgetBoxSizeа такжеinitRows

function getBoxSize(box) {
    let {
        height,
        width
    } = window.getComputedStyle(box)
    return {
        height: px2num(height),
        width: px2num(width)
    }

    function px2num(str) {
        return Number(str.substring(0, str.indexOf('p')))
    }
}

пройти черезgetComputedStyleAPI вычисляет ширину и высоту блока, которые используются здесь для расчета ширины и высоты контейнера, которые будут использоваться позже.

function initRows(box, mode, height) {
    let divisor = getDivisor(mode)
    rows = Math.ceil(box.height * divisor / height)
    return rows
}

function getDivisor(mode) {
    let divisor = .5
    switch (mode) {
        case 'half':
            divisor = .5
            break
        case 'top':
            divisor = 1 / 3
            break;
        case 'full':
            divisor = 1;
            break
        default:
            break;
    }
    return divisor
}

Рассчитайте, сколько линий должно быть у заграждения по высоте, и количество линий будет использовано в следующих местах.

вставить данные

Есть два способа вставки данных: один — добавить исходные данные, а другой — постоянное добавление. Давайте сначала рассмотрим метод добавления исходных данных:

this.pushData = function (data) {

    this.initDom()
    if (getType(data) == '[object Object]') {
        //插入单条
        this.pushOne(data)
    }
    if (getType(data) == '[object Array]') {
        //插入多条
        this.pushArr(data)
    }
}

this.initDom = function () {
    if (!document.querySelector(`${el} .barrage-list`)) {
        //注册dom节点
        for (let i = 0; i < this.rows; i++) {
            let div = document.createElement('div')
            div.classList = `barrage-list barrage-list-${i}`
            div.style.height = `${this.boxSize.height*getDivisor(this.mode)/this.rows}px`
            this.container.appendChild(div)
        }
    }
}

this.pushOne = function (data) {
    for (let i = 0; i < this.rows; i++) {
        if (!this.list[i]) this.list[i] = []

    }

    let leastRow = getLeastRow(this.list) //获取弹幕列表中最少的那一列，弹幕列表是一个二维数组
    this.list[leastRow].push(data)
}
this.pushArr = function (data) {
    let list = sliceRowList(this.rows, data)
    list.forEach((item, index) => {
        if (this.list[index]) {
            this.list[index] = this.list[index].concat(...item)
        } else {
            this.list[index] = item
        }
    })
}
//根据行数把一维的弹幕list切分成rows行的二维数组
function sliceRowList(rows, list) {
    let sliceList = [],
        perNum = Math.round(list.length / rows)
    for (let i = 0; i < rows; i++) {
        let arr = []
        if (i == rows - 1) {
            arr = list.slice(i * perNum)
        } else {
            i == 0 ? arr = list.slice(0, perNum) : arr = list.slice(i * perNum, (i + 1) * perNum)
        }
        sliceList.push(arr)
    }
    return sliceList
}

Метод непрерывного добавления данных просто вызывает метод добавления исходных данных и запускает планирование.

this.addData = function (data) {
    this.pushData(data)
    this.start()
}

огненный шквал

Давайте посмотрим на логику запуска заграждения

this.start = function () {
    //开始调度list
    this.dispatchList(this.list)
}

this.dispatchList = function (list) {
    for (let i = 0; i < list.length; i++) {
        this.dispatchRow(list[i], i)
    }
}

this.dispatchRow = function (row, i) {
    if (!this.indexs[i] && this.indexs[i] !== 0) {
        this.indexs[i] = 0
    }
    //真正的调度从这里开始，用一个实例变量存储好当前调度的下标。
    if (row[this.indexs[i]]) {
        this.dispatchItem(row[this.indexs[i]], i, this.indexs[i])
    }
}

this.dispatchItem = function (item, i) {
    //调度过一次的某条弹幕下一次在调度就不需要了
    if (!item || this.idMap[item.id]) {
        return
    }
    let index = this.indexs[i]
    this.idMap[item.id] = item.id
    let div = document.createElement('div'),
        parent = document.querySelector(`${el} .barrage-list-${i}`),
        width,
        pastTime
    div.innerHTML = item.content
    div.className = 'barrage-item'
    parent.appendChild(div)
    width = getBoxSize(div).width
    div.style = `width:${width}px;display:none`
    pastTime = this.computeTime(width) //计算出下一条弹幕应该出现的时间
    //弹幕飞一会~
    this.run(div)
    if (index > this.list[i].length - 1) {
        return
    }
    let len = this.timeoutFuncs.length
    //记录好定时器，后面清空
    this.timeoutFuncs[len] = setTimeout(() => {
        this.indexs[i] = index + 1
        //递归调用下一条
        this.dispatchItem(this.list[i][index + 1], i, index + 1)
    }, pastTime);
}

//用css动画，整体还是比较流畅的
this.run = function (item) {
    item.classList += ' running'
    item.style.left = "left:100%"
    item.style.display = ''
    item.style.animation = `run ${this.speed/1000}s linear`
    //已完成的打一个标记
    setTimeout(() => {
        item.classList+=' done'
    }, this.speed);
}

//根据弹幕的宽度和gapWth，算出下一条弹幕应该出现的时间
this.computeTime = function (width) {
    let length = width + this.gapWidth
    let time = Math.round(length / this.boxSize.width * this.speed/2)
    return time
}

Анимация css выглядит следующим образом

@keyframes run {
    0% {
        left: 100%;
    }

    50% {
        left: 0
    }

    100% {
        left: -100%;
    }
}
.run {
    animation-name: run;
}

остальные методы

остановка

Используйте свойство paused анимации, чтобы остановить

this.stop = function () {
    let items = document.querySelectorAll(`${el} .barrage-item`);
    [...items].forEach(item => {
        item.className += ' pause'
    })
}

.pause {
    animation-play-state: paused !important;
}

начать сначала

Просто удалите класс паузы

this.restart = function () {
    let items = document.querySelectorAll(`${el} .barrage-item`);
    [...items].forEach(item => {
        removeClassName(item, 'pause')
    })
}

Открыто закрыто

Сделайте шоу-скрытую логику

this.close = function () {
    this.container.style.display = 'none'
}
this.open = function () {
    this.container.style.display = ''
}

Очистить заграждение

this.clearData = function () {
    //清除list
    this.list = []
    //清除dom
    document.querySelector(`${el}`).innerHTML = ''
    //清除timeout
    this.timeoutFuncs.forEach(fun => clearTimeout(fun))
}

Наконец, истек срок очистки заграждения:

setInterval(() => {
    let items = document.querySelectorAll(`${el} .done`);
    [...items].forEach(item=>{
        item.parentNode.removeChild(item)
    })
}, this.speed*5);

наконец

Я чувствую, что реализация этого все еще ошибочна.Если бы вы разработали такой класс, как бы вы его разработали?

Категории