• 技术文章 >web前端 >js教程

    原生JavaScript实现弹幕组件de方法

    coldplay.xixicoldplay.xixi2020-10-09 16:32:29转载84

    JavaScript栏目今天为大家介绍原生JavaScript实现弹幕组件的方法。

    前言

    如今几乎所有的视频网站都有弹幕功能,那么今天我们就自己用原生 JavaScript 封装一个弹幕类。这个类希望有如下属性和实例方法:

    属性

    方法

    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 = []
    }复制代码

    先接受好参数然后初始化,下面看看getBoxSizeinitRows

    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 pisor = getpisor(mode)
        rows = Math.ceil(box.height * pisor / height)    return rows
    }function getpisor(mode) {    let pisor = .5
        switch (mode) {        case 'half':
                pisor = .5
                break
            case 'top':
                pisor = 1 / 3
                break;        case 'full':
                pisor = 1;            break
            default:            break;
        }    return pisor
    }复制代码

    根据高度算出弹幕应该有多少行,下面会有地方用到行数。

    插入数据

    有两种插入数据的方法,一种是添加源数据,一种是持续添加。先来看添加源数据的方法:

    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 p = document.createElement('p')
                p.classList = `barrage-list barrage-list-${i}`
                p.style.height = `${this.boxSize.height*getpisor(this.mode)/this.rows}px`
                this.container.appendChild(p)
            }
        }
    }复制代码
    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 p = document.createElement('p'),
            parent = document.querySelector(`${el} .barrage-list-${i}`),
            width,
            pastTime
        p.innerHTML = item.content
        p.className = 'barrage-item'
        parent.appendChild(p)
        width = getBoxSize(p).width
        p.style = `width:${width}px;display:none`
        pastTime = this.computeTime(width) //计算出下一条弹幕应该出现的时间
        //弹幕飞一会~
        this.run(p)    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;
    }复制代码

    重新开始

    移除pause类即可

    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);复制代码

    最后

    感觉这个的实现还是有缺陷的,如果是你设计这么一个类,你会怎么设计呢?

    相关免费学习推荐:javascript(视频)

    以上就是原生JavaScript实现弹幕组件de方法的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:juejin,如有侵犯,请联系a@php.cn删除
    专题推荐:JavaScript 弹幕
    上一篇:js中json字符串怎样转json对象 下一篇:重学JavaScript 对象
    第13期线上培训班

    相关文章推荐

    • JavaScript常见的手写功能• 杜绝这五个 Javascript 错误啦• JavaScript之 这次彻底搞懂new操作符!• 深入理解JavaScript中的事件

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网