作为应届生,带着无限憧憬来到这里,但是经过这三个月的经历,发现只有无限的消耗,并没有任何想要留下的感觉,每天携着自己早已不属于自己的脑袋来到早已不想来的地方...
动效逻辑实现
将元素布局设置好,调整元素的一个动态css属性让其置于可视视图以外,使用动效类库,去改变他的css属性让其还原回正确的位置。
动效类库
ScrollMagic很久没有维护了。
浏览器跨页面通信
前几天有这样一个需求,当我们在当前页面点击编辑时,我们跳转到编辑页面,编辑完成后,我们需要刷新当前页面并关闭编辑页面。这就需要用到跨页面通信功能了。
下面总结一下前端中实现在一个页面上进行操作,然后刷新其他页面功能的实现方法:
前提条件是两个页面同源
在页面 A:
js
// 判断是否是对比项目页面跳转过来的
if (route.query?.type === 'diff') {
localStorage.setItem('diffProjectChanged', 'true');
setTimeout(() => {
window.close();
}, 500);
} else {
router.back();
}
在页面 B:
js
// 进入页面将localStorage中的 diffProjectChanged 置为false
localStorage.setItem('diffProjectChanged', 'false');
// 监听编辑
onMounted(() => {
window.addEventListener('storage', (event) => {
if (event.key === 'diffProjectChanged' && event.newValue === 'true') {
location.reload();
}
});
});
在页面 A 中触发一个自定义事件,将相关数据传递给其他页面。
js
// 触发自定义事件
const event = new CustomEvent('dataChanged', { detail: { newData: 'someData' } });
window.dispatchEvent(event);
在页面 B 中监听该自定义事件,并在事件触发时执行刷新操作。
js
// 监听自定义事件
window.addEventListener('dataChanged', (event) => {
// 获取数据并执行刷新操作
const newData = event.detail.newData;
location.reload();
});
- 使用 WebSocket
在页面 A 中通过 WebSocket 发送消息,通知其他页面。 在页面 B 中监听 WebSocket 消息,接收通知并执行刷新操作。
这种方法需要在服务器上设置 WebSocket 服务。
当前项目避免使用其他包管理工具
使用一些约束,让当前项目只能通过指定的包管理工具安装,防止项目配置乱七八糟的。
在当前根目录下
js
// 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配置。
js
"preinstall": "node ./scripts/preinstall.js"
或者直接配置
js
"preinstall": "npx only-allow pnpm"
文本省略
这种方式需要设置具体宽高。如果是使用了 flex: 1
/ 百分比数据 这种不会生效。动态的宽度是不会出现省略号的。
css
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
white-space: nowrap;
所以我们可以使用多文本的方式代替。
css
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;
来实现父容器内的文本底部对齐。要想实现底部对齐,父容器必须具有足够的高度来容纳最大的字体大小。
html
<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 的提交。
这样他只是删除了本地的记录,但是并没有更新远程仓库。
所以我们需要强制当前记录提交
js
git push origin <branch> --force
如果直接执行git push
他会告诉你需要拉取最新代码。如果执行了git pull
前面做的工作就没用了。所以我们需要使用--force
强制提交。
回退解决冲突之前的状态
js
git merge --about
查看当前分支基于那个分支创建的
js
git reflog show
修改分支名称
js
// 在当前分支
git branch -m feature/v1.4.1.0
// 不在当前分支
git branch -m old-branch new-branch
将已提交的记录提交到别的分支
js
// 切换到需要提交的分支
// 找到需要提交的代码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 )
专栏文章
最近也在学习nestjs,有一起小伙伴的@我哦。