前端实习手计(5):班味十足?!
自我感觉没有班味!!!每天还是快快乐乐上班哇,是愉快的一周~这周没有太多活咯,基本就是修修改改改代码+学习。真的感觉自己写的代码就是乱七八糟,只要能跑起来有效果就行(我不是合格的处女座哈哈哈怎么能这么宽容)。然后呢就把写的一个动画反复修改,有点“艰难”(我好慢哦),每次改都是不一样的问题,其实收获还蛮多的。
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分,学习没认真学,工作干的也不好......
- 昨天竟然又断断续续睡了一天,晚上才清醒,颠倒昼夜的生活哇
- 今天不能这样咯,出去走走....(我好像那种老年人,好淡的生活)
- 下个月就立秋咯,不过这里依然是夏天~挺好的
- 拜拜,淡淡的一周,下周撸起袖子加班学习(哈哈哈期待没想到加班不是为了工作而是为了学习)!
相关文章:
前端实习手计(5):班味十足?!
自我感觉没有班味!!!每天还是快快乐乐上班哇,是愉快的一周~这周没有太多活咯,基本就是修修改改改代码学习。真的感觉自己写的代码就是乱七八糟,只要能跑起来有效果就行(我不是合格的处女座哈哈哈…...

Duix AI 太上瘾,让我熬夜体验的AI女友
✨点击这里✨:🚀原文链接:(更好排版、视频播放、社群交流、最新AI开源项目、AI工具分享都在这个公众号!) Duix AI 太上瘾,让我熬夜体验的AI女友 开启 Duix AI 女友的奇妙之旅_ Hi,这…...
php判断某个目录下是否存在文件
/*** 判断字符串是否以什么结尾* param String $haystack 字符串* param String $needle 结尾* return Boolean*/ function endWith($haystack, $needle) {$length strlen($needle);if ($length 0) {return true;}return (substr($haystack, -$length) $needle); } /***…...
重塑互联网生态:探索Web 3.0、大数据与隐私保护的新篇章
引言:互联网的新纪元 随着互联网技术的日新月异,我们正迈入一个全新的时代,其中Web 3.0、大数据以及隐私保护成为塑造未来互联网生态的三大核心力量。它们不仅改变了我们与互联网交互的方式,更深刻地影响着社会的方方面面。 Web…...
HR模块中PA信息类型的相关函数
目录 1、新增、删除,修改:HR_INFOTYPE_OPERATION新增:INS删除:DEL修改:MOD 2、读取PA信息类型:HR_READ_INFOTYPE3、入职,生成新工号用:HR_PAD_HIRE_EMPLOYEE4、加锁:BAPI…...
c# 日期类型变量默认值
DateTime类型是比较常用的变量类型,但是以前处理都比较业余,下面总结2中常用方式 这次把它总结下: DateTime t1 default(DateTime); DateTime t2 DateTime.MinValue; 这样t1,t2 的值都是 {0001/1/1 0:00:00} PS: 由于DateTi…...
设计模式实战:任务调度系统的设计与实现
问题描述 设计一个任务调度系统,支持任务的创建、调度、执行和状态管理。系统需要确保任务的执行过程可以被灵活调度,并且支持任务状态的跟踪和通知功能。 设计分析 命令模式 命令模式用于将请求封装成对象,从而使我们可以用不同的请求、队列或日志来参数化其他对象。任…...
代码中的特殊注释
代码中特殊注释——TODO、FIXME、XXX、HACK_fix me todo hack-CSDN博客 代码中特殊注释——TODO、FIXME、XXX、HACK TODO:英语翻译为待办事项,备忘录。如果代码中有该标识,说明在标识处有功能代码待编写,待实现的功能在说明中会…...

ubuntu20.04.6 安装Skywalking 10.0.1
1.前置准备 1.1. **jdk17(Skywalking10 jdk22不兼容,用17版本即可)**安装: https://blog.csdn.net/CsethCRM/article/details/140768670 1.2. elasticsearch安装: https://blog.csdn.net/CsethCRM/article/details…...

C++:map和set
hello,各位小伙伴,本篇文章跟大家一起学习《C:map和set》,感谢大家对我上一篇的支持,如有什么问题,还请多多指教 ! 如果本篇文章对你有帮助,还请各位点点赞!!…...
深入理解二叉搜索树:定义、操作及平衡二叉树
引言 二叉搜索树(Binary Search Tree,BST)是一种特殊的二叉树结构,每个节点的左子树节点值小于根节点值,而右子树节点值大于根节点值。二叉搜索树在计算机科学中有着广泛的应用,尤其在动态查找表和优先队列…...
vue3组件通信(二)
组件通信 一.$attrs(祖>孙间接)二、$refs()父>子, $parent()子>父三.provide,inject(祖>孙直接)四.pinia五.slot1.默认插槽2.具名插槽3.作用域插槽 一.$attrs(祖>孙间接) $attrs用于实现当前组件的父组…...

关键词查找【Boyer-Moore 算法】
1、【Boyer-Moore 算法】 【算法】哪种算法有分数复杂度?- BoyerMoore字符串匹配_哔哩哔哩_bilibili BM算法的精华就在于BM(text, pattern),也就是BM算法当不匹配的时候一次性可以跳过不止一个字符。即它不需要对被搜索的字符串中的字符进行逐一比较,而…...
【前端手写代码】手写Object.create
思路:将传入的对象作为原型 // 思路:将传入的对象作为原型 function create(obj) {function F() { }F.prototype objreturn new F() }...

速通JS模块化规范
目录 1模块化概述 1.1什么是模块化? 1.2为什么需要模块化? 2有哪些模块化规范? 3导入与导出的概念 4CommonJS 规范 4.1初步体验 4.2导出数据 4.3导入数据 4.4扩展理解 4.5浏览器端运行 5ES6 模块化规范 5.1初步体验 5.2Node 中运…...

HamonyOS性能优化工具和方法
性能优化,如何做到更快的启动、更流畅的使用,概括图如下 ArkTS高性能编程: 1. ArkTS规则:有利于方舟编译运行时进行编译优化 2. 使用AOT(Ahead Of Time)模式对应用进行编译优化:方舟编译运行时通过采用PGO(Profile-Gui…...
前端实现边下载文件边上传
问题记录原因: 因为需要实现网络文件的上传,结果是由前端实现,方式是一边下载,一遍上传文件,小文件直接上传,大文件进行切片,切片大小和下载大小有关,特此记录。 1.实现方案 fetc…...

滑线变阻器的优缺点是什么?
滑线变阻器是常见的电子元件,主要用于调节电路中的电阻值,从而达到改变电流、电压的目的。它的主要优点是结构简单、操作方便、成本低,因此在各种电子设备中都有广泛的应用。然而,滑线变阻器也存在一些缺点,主要表现在…...

K8s大模型算力调度策略的深度解析
随着大数据和人工智能技术的飞速发展,Kubernetes(简称K8s)作为容器编排的领军者,在支撑大规模模型训练和推理方面扮演着越来越重要的角色。在大模型算力的调度过程中,如何高效、合理地分配和管理资源成为了一个亟待解决…...
Unity Transform组件实现动画:基础与进阶技巧
在Unity中,Transform组件是控制游戏对象(GameObject)位置、旋转和缩放的核心组件。通过编程控制Transform组件,开发者可以创建各种动画效果。本文将介绍如何使用Transform组件实现动画,从基础的运动到更高级的动画技巧…...

【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...

自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
探索Selenium:自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
提升移动端网页调试效率:WebDebugX 与常见工具组合实践
在日常移动端开发中,网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时,开发者迫切需要一套高效、可靠且跨平台的调试方案。过去,我们或多或少使用过 Chrome DevTools、Remote Debug…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...