歌词滚动 - 技术栈

前言

在前端开发中，处理歌词显示是一个常见的需求。本文将探讨如何通过 JavaScript 和 DOM 操作来实现歌词的动态显示，并优化性能。我们将从创建歌词元素、设置偏移量、处理边界问题等方面逐步展开，最终实现一个流畅的歌词显示效果。通过本文，你将了解到如何在实际项目中应用这些技术，并掌握一些优化技巧。

写代码有意思、每一步扎实

设置歌词偏移量

为了实现歌词的滚动效果，我们需要根据当前播放时间计算出对应的歌词索引，并设置 ul 元素的偏移量。通过 findIndex() 函数找到当前播放的歌词索引，然后根据索引计算出偏移量，并处理边界情况。

findIndex()

287比最后的小标还大，找遍了都没找到，说明已经播放到最后一句了。这种情况下，显示最后一句。

js 复制代码

var doms = {
 ul: document.querySelector(".container ul");
 container: document.querySelector('.container');
}

/**
* 创建歌词元素 li
*/
function createLrcElements() {
  for(var i = 0; i < lrcData.length; i++) {
    var li = document.createElement('li')
    li.textContext = lrcData[i].words;
    doms.ul.appendChild(li); // 改动了 dom 树
  }
}

// 当出现问题的时候才优化，永远不要率先优化，是灾难性的开始

// 其实不需要优化，但学一下
function createLrcElements() {
  var frag = document.craeteDocumentFragment(); // 不会在页面上做任何显示，只是一个片段
  for(var i = 0; i < lrcData.length; i++) {
    var li = document.createElement('li')
    li.textContext = lrcData[i].words;
    frag.appendChild(li); // 改动了 dom 树
  }
  doms.ul.appendChild(frag);
}

createLrcElements();

dom.innerHTML = 111

效率较低

修改DOM树

顺序：数据逻辑、界面、事件

处理边界情况

在设置偏移量时，需要处理一些边界情况，例如当歌词滚动到最顶部或最底部时，偏移量不应超出范围。通过判断当前偏移量是否超出最大偏移量，可以确保歌词始终在可视区域内。

js 复制代码

// hard code 硬编码 写死在那了, 最后还要学多内聚低耦合，没有不耦合的代码 多个功能紧密连接紧密合作 不要走火入魔
var containerHeight = doms.container.clientHeight;
var liHeight = dom.ul.children[0].clientHeight;
// 最大偏移量
var maxOffset = doms.ul.clientHeight / 2 - containerHeight / 2;

// 设置ul的偏移量
/**
* 设置 ul 元素的偏移量
*/
function setOffset() {
  var index = findIndex();
  var offset = liHeight * index + liHeight / 2 - containerHeight / 2
  
  // 边界问题
  if (offset < 0) offset = 0
  if (offset > maxOffset) {
    offset = maxOffset
  }
  doms.ul.style.transform = `translateY(-${offset}px)`
  // 去掉之前的active样式
  var li = doms.ul.querySelector('.active')
  if (li) {
    li.classList.remove('active');
  }
  
  li = doms.ul.children[index]
  if (li) {
    li.className = 'active' // 第一种
    li.classList.add('active) // 第二种 这个更好操作
  }
}

// 声音播放变化就改变offset
document.audio.addEventListener('timeupadte', setOffset);

优化与注意事项

避免过早优化：在开发过程中，不要过早进行优化，只有在遇到性能问题时才考虑优化。
使用 DocumentFragment ：通过使用 DocumentFragment 可以减少 DOM 操作的次数，从而提高性能。
硬编码问题：在代码中尽量避免硬编码，例如容器高度、歌词行高等，可以通过动态计算来获取这些值。

总结

通过本文的学习，我们实现了一个简单的歌词显示功能，并对其进行了性能优化。我们从创建歌词元素、设置偏移量、处理边界情况等方面逐步展开，最终实现了一个流畅的歌词滚动效果。在实际开发中，合理使用 DocumentFragment、避免过早优化、处理边界情况等都是非常重要的技巧。希望本文能帮助你在前端开发中更好地处理类似的需求。