前端实习手计（5）：班味十足？！

椰果uu

于 2024-07-28 02:55:47 发布

阅读量343

点赞数 15

分类专栏：实习杂记文章标签：前端前端实习 vue.js javascript

本文链接：https://blog.csdn.net/m0_73560798/article/details/140744835

版权

实习杂记专栏收录该内容

5 篇文章 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; 给变量赋值就相当于给全局作用域的变量修改了值。全局作用域的变量其他函数都可以访问了。

6.写在最后

本周自评6分，学习没认真学，工作干的也不好......
昨天竟然又断断续续睡了一天，晚上才清醒，颠倒昼夜的生活哇
今天不能这样咯，出去走走....（我好像那种老年人，好淡的生活）
下个月就立秋咯，不过这里依然是夏天~挺好的
拜拜，淡淡的一周，下周撸起袖子加班学习（哈哈哈期待没想到加班不是为了工作而是为了学习）！

椰果uu

关注

15
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端实习手计（5）：班味十足？！

本周自评6分，学习没认真学，工作干的也不好......昨天竟然又断断续续睡了一天，晚上才清醒，颠倒昼夜的生活哇今天不能这样咯，出去走走....（我好像那种老年人，好淡的生活）下个月就立秋咯，不过这里依然是夏天~挺好的拜拜，淡淡的一周，下周撸起袖子加班学习（哈哈哈期待没想到加班不是为了工作而是为了学习）！
复制链接

扫一扫

专栏目录