近三个月的排错，原来的憧憬消失喽

作为应届生，带着无限憧憬来到这里，但是经过这三个月的经历，发现只有无限的消耗，并没有任何想要留下的感觉，每天携着自己早已不属于自己的脑袋来到早已不想来的地方...

动效逻辑实现

将元素布局设置好，调整元素的一个动态css属性让其置于可视视图以外，使用动效类库，去改变他的css属性让其还原回正确的位置。

动效类库

• 
  
• 
  

  ScrollTrigger

  
  
  
• 
  

  ScrollMagic

  
  
  • 
    
  • ScrollMagic 是一个 JavaScript 库，用于在滚动事件上创建视差滚动和其他滚动效果。
    
  • ScrollMagic 允许您在页面滚动时触发动画，例如根据滚动位置触发动画、控制元素的可见性、触发事件等。
    
  • 您可以使用 ScrollMagic 来创建交互式滚动体验，例如滚动到特定部分时触发动画效果。
    
  • ScrollMagic 可以与 TweenMax 或其他动画库一起使用，以创建复杂的滚动动画。
    
  
  
  
• 
  

  TweenMax

  
  
  • 
    
  • TweenMax 是 GreenSock Animation Platform (GSAP) 库的一部分。GSAP 是一个用于创建高性能动画的 JavaScript 库，提供了丰富的动画功能。
    
  • TweenMax 是 GSAP 的核心库之一，它用于创建各种动画，包括基本的属性动画，缓动动画，时间轴动画等。
    
  • TweenMax 提供了灵活且易于使用的 API，允许您创建复杂的动画效果，如淡入淡出、缩放、旋转、移动等。
    
  • 您可以单独使用 TweenMax 来创建动画，或与其他库和插件一起使用，以实现更高级的效果。
    
  
  
  
• 
  

  animation.gsap.js

  
  
  • 
    
  • animation.gsap.js 是 ScrollMagic 的插件，它允许您在 ScrollMagic 中使用 GSAP（包括 TweenMax）来控制动画。
    
  • 此插件通过将 GSAP 和 ScrollMagic 集成，使您能够在滚动事件中触发和控制 TweenMax 动画。
    
  • 使用 animation.gsap.js，您可以创建更具交互性的滚动动画，将滚动事件与强大的 TweenMax 动画引擎结合使用，实现更丰富的效果。
    
  
  
  

综上所述，TweenMax 是 GSAP 库的一部分，用于创建各种动画。ScrollMagic 是一个独立的库，用于处理滚动事件和创建滚动效果。animation.gsap.js 是 ScrollMagic 的插件，它使 ScrollMagic 能够与 GSAP（包括 TweenMax）一起使用，以在滚动事件中创建动画效果。这些库和插件可以协同工作，以创建引人入胜的交互式网页效果。

ScrollMagic很久没有维护了。

浏览器跨页面通信

前几天有这样一个需求，当我们在当前页面点击编辑时，我们跳转到编辑页面，编辑完成后，我们需要刷新当前页面并关闭编辑页面。这就需要用到跨页面通信功能了。

下面总结一下前端中实现在一个页面上进行操作，然后刷新其他页面功能的实现方法：

• 
  
• 使用浏览器存储 (LocalStorage 或 SessionStorage)
  

前提条件是两个页面同源

在页面 A：

 // 判断是否是对比项目页面跳转过来的
if (route.query?.type === 'diff') {
localStorage.setItem('diffProjectChanged', 'true');
setTimeout(() => {
window.close();

    }, 500);

  } else {

    router.back();

  }

在页面 B：

// 进入页面将localStorage中的 diffProjectChanged 置为false
localStorage.setItem('diffProjectChanged', 'false');
// 监听编辑
onMounted(() => {
window.addEventListener('storage', (event) => {
if (event.key === 'diffProjectChanged' && event.newValue === 'true') {

        location.reload();

      }

    });

  });

• 
  
• 使用事件总线（Event Bus）
  

在页面 A 中触发一个自定义事件，将相关数据传递给其他页面。

// 触发自定义事件
const event = new CustomEvent('dataChanged', { detail: { newData: 'someData' } });
window.dispatchEvent(event);

在页面 B 中监听该自定义事件，并在事件触发时执行刷新操作。

// 监听自定义事件
window.addEventListener('dataChanged', (event) => {
// 获取数据并执行刷新操作
const newData = event.detail.newData;

 location.reload();

});

• 
  
• 使用 WebSocket
  

在页面 A 中通过 WebSocket 发送消息，通知其他页面。
在页面 B 中监听 WebSocket 消息，接收通知并执行刷新操作。

这种方法需要在服务器上设置 WebSocket 服务。

当前项目避免使用其他包管理工具

使用一些约束，让当前项目只能通过指定的包管理工具安装，防止项目配置乱七八糟的。

在当前根目录下

    // scripts/preinstall.js
if (!/pnpm/.test(process.env.npm_execpath || '')) {
console.log('只能使用pnpm');
console.warn(
`\u001b[33mThis repository requires using pnpm as the package manager ` +
` for scripts to work properly.\u001b[39m\n`,

      );

      process.exit(1);

    }

在packages.json中scripts配置。

"preinstall": "node ./scripts/preinstall.js"

或者直接配置

"preinstall": "npx only-allow pnpm"

文本省略

这种方式需要设置具体宽高。如果是使用了 flex: 1 / 百分比数据 这种不会生效。动态的宽度是不会出现省略号的。

text-overflow: ellipsis;
width: 100%;
overflow: hidden;
white-space: nowrap;

所以我们可以使用多文本的方式代替。

word-break: break-all;
overflow: hidden;
display: -webkit-box;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

不同大小文字底部对齐方式

在CSS中，要让不同字体大小的内容底部对齐，你可以使用verti**cal-align属性。（设置在对齐元素上，只需要设置在一个元素上即可） 这属性用于控制内联元素（如文本）在其父元素内的垂直对齐方式。你可以将其设置为bottom来实现底部对齐。但需要注意的是，vertical-align属性通常用于内联元素，而不是块级元素。 如果是块级元素，我们可以使用flex布局的align-items: flex-end;来实现父容器内的文本底部对齐。要想实现底部对齐，父容器必须具有足够的高度来容纳最大的字体大小。

<style>
.container {
height: 100px;
border: 1px solid #ccc;
display: flex;
align-items: flex-end; /* 底部对齐的关键 */

    }

.text {
font-size: 20px;

    }

.small-text {
font-size: 14px;

    }
</style>

<div class="container">
<p class="text">这是一些文本</p>
<p class="small-text">这是较小的文本</p>
</div>

了解的一些git操作

git提交错误分支，希望将中间的commit删除掉

先通过git rebase -i commitid切换到删除commit的前一个commitid。-i 表示要进行交互式 rebase，<commit-hash>^ 表示要删除指定提交及之后的提交。这将打开一个文本编辑器，列出了要进行 rebase 的提交。

这样他只是删除了本地的记录，但是并没有更新远程仓库。

所以我们需要强制当前记录提交

git push origin <branch> --force

如果直接执行git push他会告诉你需要拉取最新代码。如果执行了git pull前面做的工作就没用了。所以我们需要使用--force强制提交。

注意：最后git push一定要强制提交，不然按照他的提示拉取了远程代码，那么前面做的内容都没用了。

回退解决冲突之前的状态

git merge --about

查看当前分支基于那个分支创建的

git reflog show

修改分支名称

// 在当前分支

git branch -m feature/v1.4.1.0

// 不在当前分支

git branch -m old-branch new-branch

将已提交的记录提交到别的分支

ruanyifeng.com/blog/2020/0…

// 切换到需要提交的分支
// 找到需要提交的代码commit

git cherry-pick commitId

props的双向绑定便捷性

我们在使用表格编辑功能时，直接在dataSource中绑定props对应的值，当编辑单元格时，就直接更新props，很方便。由于一些其他的因素，这个模块并没有采用这个，导致以下bug出现。

这个问题是测试发现方改变一些字段时，字段为发送给后端，排查发现我在修改时，并没有通过emits将值更新到props中。所以造成bug。，导致最近需求一直变更代码bug很多，已经没有在去维护的力气了。😑

watch监听可能出现的问题

这个bug对于当时我写代码来说排查很困难。排查了很久，最后也是找我导师解决的，不得不说我导师排查bug的能力好nb。👍

最开始我是通过监听用户切换不同内容，监听diffProjectId，然后拿到formFirstValues和formSecondValues，去完成逻辑。这样看似没啥问题。但是完成逻辑的时候，拿到的formSecondValues总是上一次的值。这就很懵逼了。

出现这种情况的原因是我们监听的diffProjectId是同步的，而formFirstValues，formSecondValues这两个值是异步获取的。所以就会出现问题。最后通过下图方式实现功能。

删除后端不必要字段，造成的问题

由于后端定义的查询详情和请求传参字段不统一collectionPlanResp,collectionPlanReq，导致我回写数据不好处理，直接通过collectionPlanResp对象进行处理，在提交时在赋值。当时想着把多余字段删除collectionPlanResp,这样就会出现一个问题，我提交表单后，当后端服务抛出异常提示（比如字数限制），我们修改后，在当前页面再次提交，就会导致collectionPlanReq传递为空值。造成数据未传递给后端的bug。

分析了一下，字段的一些必填项长度限制，前端还是不要偷懒，做一下处理。

对于多字段UI处理

我们可以使用Collapse组件去处理，让UI看起来更简洁。

善于使用margin和定位来解决间距问题

调整间距时，如果margin不好调整，我们可以使用相对定位来配合调整。 这种方式是当时接了一个对比字段差异的需求，为了以后可以直接在当前对比页面编辑，所以采用了两个form去实现的。设置一个form的label，另一个不设置。这样就可以完美的在一行突出标题对比两个不同内容的字段了。为了做到响应式，就有了这样的做法。

这样看下来工作三个月基本都是在马代码，每天写不完的需求，发不完的版，上午写代码，下午改需求，真的挺无语的，下个月辞职回家种地喽。😅

往期文章

• 
  
• 带你从0开始了解vue3核心（computed, watch）
  
• 带你从0开始了解vue3核心（响应式）
  
• 3w+字的后台管理通用功能解决方案送给你
  
• 入职之前，狂补技术，4w字的前端技术解决方案送给你（vue3 + vite ）
  

专栏文章

• 
  
• 重学vue及其生态
  
• 前端面试
  
• 前端工程化
  
• amis 低代码实战
  
• 协议与安全
  
• 重学react
  
• 重学nodejs
  
• 工作总结
  

最近也在学习nestjs，有一起小伙伴的@我哦。