前端实习手计（5）：班味十足？！_业界新闻

发布时间:2024-08-03 06:07

阅读量:0

自我感觉没有班味！！！每天还是快快乐乐上班哇，是愉快的一周~这周没有太多活咯，基本就是修修改改改代码+学习。真的感觉自己写的代码就是乱七八糟，只要能跑起来有效果就行（我不是合格的处女座哈哈哈怎么能这么宽容）。然后呢就把写的一个动画反复修改，有点“艰难”（我好慢哦），每次改都是不一样的问题，其实收获还蛮多的。

1.第一版

先来看看第一版，惨不忍睹的代码.......我自己还觉得写的挺好，其实这个连预期效果都没出来呢（好丢人）。存在的问题目前先说这几个：

代码没有语义化（比如id和class命名不够明确）
没有代码注释（不知道写的代码是为了干什么）
节点选择有全局污染（document.querySelector选择到的是项目里面全部具有这个类名的节点！）
函数代码行过多（让人看过去很难理解都做了什么）

<template>     <div class="scroll" id="scroll">         <div class="scroll__animation">             <video :src="video.src" muted autoplay preload id="scroll-video"></video>             <div class="scroll__video-placeholder"></div>         </div>         <div class="scroll__text-container" id="scroll-text-container">             <div class="scroll__text-section">                 <slot name="text"></slot>             </div>         </div>     </div> </template>  <script lang="ts" setup>     import { onMounted, ref } from 'vue';     defineProps({         video: {             default: () => ({                 src: '',             }),         },     });      onMounted(() => {         const textSections = Array.from(document.querySelectorAll('.scroll__text-section'));          const videoElement = document.getElementById('scroll-video');         const textContainer = document.getElementById('scroll-text-container');          const videoLoadingDelay = xx;          const setUpScrollBehavior = () => {             videoElement.pause();             videoElement.currentTime = 0;              if (videoElement.readyState > 0) {                 document.querySelector('.scroll__animation').style =xxxx;                 document.querySelector('.scroll__video-placeholder').style.opacity = '0';                  const videoDuration = videoElement.duration;                 const textContainerRect = textContainer.getBoundingClientRect();                   const animationStartOffset = 0.5;                 const animationEndOffset = 0.55;                  const scrollStartPos =xxxx;                 const scrollEndPos = yyyy;                 const scrollLength =zzzz;                  const updateVideoTime = () => {                     const scrollPercentage = (window.scrollY - scrollStartPos) / scrollLength;                     const newTime = videoDuration * scrollPercentage;                     videoElement.currentTime = isNaN(newTime) ? 0 : newTime;                 };                  window.addEventListener('scroll', () => {                     if (window.scrollY >= scrollStartPos && window.scrollY <= scrollEndPos) {                         window.requestAnimationFrame(updateVideoTime);                     }                 });             } else {                 window.setTimeout(() => {                     setUpScrollBehavior();                 }, videoLoadingDelay);             }         };         setUpScrollBehavior();     }); </script>

那就看看怎么一步一步修改吧！

2.第二版（语义化）

其实在第一版的class和id以及定义的变量和函数名都不太规范，在命名的时候尽量把命名更加语义化，让人看一眼就知道这个是用于哪里、做什么的。下面是常用的的三种命名方法。

（1）BEM命名法

Block: 块。页面上的独立组成部分，例如.header。
Element: 元素。Block内的组成部分，例如.header__logo。
Modifier: 修饰符。修改Block或Element的状态，例如.header--fixed。
块__元素__修饰符：product__button--recommanded。
如果一个单词不足以表达，就使用“-”隔开，比如product-card__purchase-button--has-background。
适用于：最适合CSS的class和id命名法。

（2）驼峰命名法

小驼峰法：

当变量名或者函数名是由一个或者多个单词连在一起，第一个单词以小写字母开始，从第二个单词之后每个首字母都大写，没有连接符。例如：myFirstName、updateVideoTime
适用于：变量和函数名，常用于js变量和函数名。

大驼峰法：

每个单词的首字母都是大写，没有连接符。例如DataBaseUser。
适用于：在许多编程语言中用于类名、接口名、构造函数、函数名等。

（3）下划线命名法

单词之间全部采用下划线连接，都采用小写字母。例如page_header
适用情况：某些语言和库中，如Python 。偶尔用于class命名。

所以最适合用于css的class和id命名还是BEM命名法。

由此可以将第一版不明确的class和id命名：

<template>   <div class="scroll" id="scroll">     <div class="scroll__animation">       <video :src="video.path" id="scroll-video"></video>       <div class="scroll__video-placeholder"></div>     </div>     <div class="scroll__text-container" id="scroll-text-container">       <div class="scroll__text-section">         <slot name="text"></slot>       </div>     </div>   </div> </template>

改为如下命名：

<template>   <div class="animation-text-scroll" id="animation-text-scroll">     <div class="animation-text-scroll__animation">       <video :src="video.path" id="animation-text-scroll__video"></video>       <div class="animation-text-scroll__video-placeholder"></div>     </div>     <div class="animation-text-scroll__text-container" id="animation-text-scroll__text-container">       <div class="animation-text-scroll__text-section">         <slot name="content"></slot>       </div>     </div>   </div> </template>

3.第三版（代码注释）

接下来是关于代码注释的。可以看到之前写的代码我是一点注释没写哇（除了自己知道写的什么，可能时间越久自己也忘了写的啥）。想一下当你接手某个人写的代码，一点注释也没写，那得好好吐槽咯......主要有以下几点：

避免显而易见的注释：如果代码本身就非常直观，就不需要额外的注释
文档注释：用于描述函数、方法或类的作用和用法。

/**  * 设置滚动行为，根据滚动位置的百分比调整视频的播放进度  */ const setUpScrollBehavior = () => {...};

解释性注释：用于解释代码中非显而易见的部分。

// 触发滚动行为之前，将视频状态初始化，确保视频播放与滚动行为同步 videoElement.pause(); videoElement.currentTime = 0;

警告性注释：用于指出需要注意的地方，比如潜在的问题或遗留代码。

4.第四版（节点选择，避免全局污染）

在最开始使用document.getElementById和document.querySelector其实选择的都是整个项目里面具有这个类名和id的DOM节点，其实你想选择的只是这个组件里面的DOM节点。那怎么只选择到当前组件的节点呢？

第一种思路是使用ref，给需要选择到的节点打上ref标识。然后使用ref定义的命名来获取相应的dom节点。（有点小问题）

<template>     <div>       <video ref="videoElement"></video>     </div> </template>  <script lang="ts" setup>   import { onMounted, ref } from 'vue';    const videoElement = ref(null);     onMounted(() => {      console.log(videoElement.value);      videoElement.value.pause();    }); </script>

第二种方法（推荐）是先通过 getCurrentInstance返回当前Vue组件实例，在通过 getCurrentInstance.ctx.$el获取当前Vue组件实例的根DOM元素。一旦获得了组件的根DOM元素，就可以使用DOM API（如querySelector和querySelectorAll，querySelector('#id') 或者querySelector('.类名')）来选择该组件内的元素。

onMounted(() => {         const currentDocument = getCurrentInstance().ctx.$el;         const textSections = Array.from(currentDocument.querySelectorAll('.index-scroll__text-section'));         const videoElement = currentDocument.querySelector('#index-scroll-video'); });

5.第五版（代码行数优化）

经过几次修改感觉没问题了，但是还有一个很重要的没有修改！一般函数的代码行数不超过20行，但是会发现我写的onMounted钩子函数里面代码非常多，一下子看过去也不知道在干嘛！那要怎么优化呢？

将一件事情拆分细化为几件不同的事件，然后在onMounted里面按照这个顺序调用就好了。总体来说做的事情有以下几件：

（1）获取必要节点

（2）视频初始化。const setVideoInitStatus = () =>{};

（3）等待视频准备好（就读取相关数据）。const waitVideoReady = () => {};

（4）读取滚动相关数据，为计算做准备。const setUpScrollBehavior = () => {};

（5）监听滚动范围是否在动画范围内（更新视频时间）

（6）更新视频时间。const updateVideoTime = () => {};

然后将onMounted里面的事件拆分为这几个，就一目了然了。

onMounted(() => {   // 获取必要节点   currentDocument = getCurrentInstance().ctx.$el;   textSections = Array.from(currentDocument.querySelectorAll('.index-scroll__text-section'));   videoElement = currentDocument.querySelector('#index-scroll-video');   textContainer = currentDocument.querySelector('#index-scroll-text-container');   videoLoadingDelay = navigator.connection ? Math.max(1750 / navigator.connection.downlink, 150) : 300;    // 视频初始化   setVideoInitStatus();   // 等待视频准备好（就读取相关数据）   waitVideoReady(setUpScrollBehavior);   // 监听滚动范围是否在动画范围内（更新视频时间）   window.addEventListener('scroll', () => {     if (window.scrollY >= scrollStartPos && window.scrollY <= scrollEndPos) {       window.requestAnimationFrame(updateVideoTime);     }   }); });

其实还有一个点，因为在不同的函数作用域里面，变量是无法访问到的。（好吧又是作用域）所以要在使用变量之前，先在全局作用域里面声明变量，比如let videoElement; 其他函数里面videoElement = xxxxx; 给变量赋值就相当于给全局作用域的变量修改了值。全局作用域的变量其他函数都可以访问了。