wordpress一个分类名字,成都企业网站seo技术,门户cms模板,昌吉网站建设公司自我感觉没有班味#xff01;#xff01;#xff01;每天还是快快乐乐上班哇#xff0c;是愉快的一周~这周没有太多活咯#xff0c;基本就是修修改改改代码学习。真的感觉自己写的代码就是乱七八糟#xff0c;只要能跑起来有效果就行#xff08;我不是合格的处女座哈哈哈…自我感觉没有班味每天还是快快乐乐上班哇是愉快的一周~这周没有太多活咯基本就是修修改改改代码学习。真的感觉自己写的代码就是乱七八糟只要能跑起来有效果就行我不是合格的处女座哈哈哈怎么能这么宽容。然后呢就把写的一个动画反复修改有点“艰难”我好慢哦每次改都是不一样的问题其实收获还蛮多的。
1.第一版
先来看看第一版惨不忍睹的代码.......我自己还觉得写的挺好其实这个连预期效果都没出来呢好丢人。存在的问题目前先说这几个
代码没有语义化比如id和class命名不够明确没有代码注释不知道写的代码是为了干什么节点选择有全局污染document.querySelector选择到的是项目里面全部具有这个类名的节点函数代码行过多让人看过去很难理解都做了什么
templatediv classscroll idscrolldiv classscroll__animationvideo :srcvideo.src muted autoplay preload idscroll-video/videodiv classscroll__video-placeholder/div/divdiv classscroll__text-container idscroll-text-containerdiv classscroll__text-sectionslot nametext/slot/div/div/div
/templatescript langts setupimport { 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以及定义的变量和函数名都不太规范在命名的时候尽量把命名更加语义化让人看一眼就知道这个是用于哪里、做什么的。下面是常用的的三种命名方法。
1BEM命名法
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命名
templatediv classscroll idscrolldiv classscroll__animationvideo :srcvideo.path idscroll-video/videodiv classscroll__video-placeholder/div/divdiv classscroll__text-container idscroll-text-containerdiv classscroll__text-sectionslot nametext/slot/div/div/div
/template
改为如下命名
templatediv classanimation-text-scroll idanimation-text-scrolldiv classanimation-text-scroll__animationvideo :srcvideo.path idanimation-text-scroll__video/videodiv classanimation-text-scroll__video-placeholder/div/divdiv classanimation-text-scroll__text-container idanimation-text-scroll__text-containerdiv classanimation-text-scroll__text-sectionslot namecontent/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节点。有点小问题
templatedivvideo refvideoElement/video/div
/templatescript langts setupimport { 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和querySelectorAllquerySelector(#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分学习没认真学工作干的也不好......昨天竟然又断断续续睡了一天晚上才清醒颠倒昼夜的生活哇今天不能这样咯出去走走....我好像那种老年人好淡的生活下个月就立秋咯不过这里依然是夏天~挺好的拜拜淡淡的一周下周撸起袖子加班学习哈哈哈期待没想到加班不是为了工作而是为了学习
