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

el容器节点的选择器，容器节点应为绝对定位，设置好宽高

height 每条弹幕的高度

mode 弹幕模式，half则为一半容器高度，top为三分之一，full为占满

speed弹幕划过屏幕的时间

gapWidth后一条弹幕与前一条弹幕的距离
el容器节点的选择器，容器节点应为绝对定位，设置好宽高height 每条弹幕的高度mode 弹幕模式，half则为一半容器高度，top为三分之一，full为占满speed弹幕划过屏幕的时间gapWidth后一条弹幕与前一条弹幕的距离方法方法

pushData 添加弹幕元数据

addData持续加入弹幕

start开始调度弹幕

stop停止弹幕

restart 重新开始弹幕

clearData清空弹幕

close关闭

open重新显示弹幕
pushData 添加弹幕元数据addData持续加入弹幕start开始调度弹幕stop停止弹幕restart 重新开始弹幕clearData清空弹幕close关闭open重新显示弹幕PS:有一些自封装的工具函数就不贴出来了，大概知道意思就好初始化
初始化初始化引入JavaScript文件之后，我们希望如下使用，先采取默认配置。

let barrage = new Barrage({

el: '#container'
})

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 = []
}

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')))

}
}


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
}


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.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.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.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.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);
}


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动画，整体还是比较流畅的
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;
}


@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'

})
}

this.stop = function () {

let items = document.querySelectorAll(`${el} .barrage-item`);

[...items].forEach(item => {

item.className += ' pause'

})
}

.pause {

animation-play-state: paused !important;
}


.pause {

animation-play-state: paused !important;
}

重新开始
重新开始重新开始移除pause类即可

this.restart = function () {

let items = document.querySelectorAll(`${el} .barrage-item`);

[...items].forEach(item => {

removeClassName(item, '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.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))
}

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);

setInterval(() => {

let items = document.querySelectorAll(`${el} .done`);

[...items].forEach(item=>{

item.parentNode.removeChild(item)

})
}, this.speed*5);
最后
最后最后感觉这个的实现还是有缺陷的，如果是你设计这么一个类，你会怎么设计呢？