序言
- 最近工作比较忙,写作也慢慢搁置了下来,但也确实不知道写一些什么内容,写的内容希望对大家有帮助。
- 本文主要总结最近工作遇到的一些问题。
Git
提取目标分支的功能
问题原因
- 就在昨天,我犯了一个错。在一个项目中,我有两个分支来完成不同的需求(
A、B
),由于A
分支的需求有部分内容在这个迭代可能来不及上线,于是我就通过拷贝的方式,将A
分支某些写好的功能粘贴到B
分支。因为A
分支是迭代最开始的代码,而B
分支已经合并过迭代分支,所以导致粘贴A
的过去后提交一切顺利。 问题就出在这里,提交后另外一个同事合并迭代分支导致代码被迭代分支直接覆盖且没有冲突提示,直到项目跑起来才发现功能缺少。
此次解决
- 通过对比历史提交,对丢失代码文件进行回滚。
问题避免
- 阮一峰 git cherry-pick 教程
- 当我们需要提取某个分支的某些功能时,我们可以通过
git cherry-pick
命令去提取。当然这也有一定的限时,例如:- 我所有的功能写完了一次提交;
- 我几个功能同时穿插写,多次去提交。
- 第
1
点:本身就只有一个提交,所以提取也是所有的; - 第
2
点:虽然有多个提交,但是每个提交中都不是单独某一个功能的变化修改。
总结
- 在写需求时,应该考虑到需求的变化性,如果一个大的需求中有多个小的需求、或需求的排期预估可能会来不及等。
- 按开发顺序将每一个小的需求点做完后做一次
Git
提交; - 对每一个需求进行预估是否能按排期正常开发上线,切换出正常开发的分支以及可能延期需求的分支;
- 如果存在多个提测时间冲突的,但又想并行开发的需求,每一个都需要创建单独的分支;
- 迭代上线后删除仅当前迭代使用的分支。
- 按开发顺序将每一个小的需求点做完后做一次
生成动态链接二维码
- 在分享的页面中,产品需要一个动态链接的二维码在页面的底部。
- 我使用的是 qrcode 库,当然你还可以选择其他的库(根据您的需求),例如
NPM
搜索 qrcodejs2。 - 下面我用
qrcode
举一个简单的例子。
// vue-html
<canvas id="qrCodeCanvas" ref="canvasRef"></canvas>
// vue-css 不展示 canvas 元素
#qrCodeCanvas {
display: none;
}
// vue-js
import QRCode from 'qrcode'
getQrCodeImage(userInfo) {
const link = `https://www.xxxx.com/user/index.html?id=${userInfo.userId}`
const canvas = this.$refs.canvasRef
QRCode.toCanvas(canvas, link, (error) => {
if (error) {
console.error('生成二维码失败', error)
return
}
console.log('生成二维码成功!')
})
// 转换成 base64 格式路径的 png 图片
return canvas.toDataURL("image/png")
}
隐藏浏览器滚动条
- 由于在不同的手机上对应的浏览器不一样,
APP
在不同手机上的表现也不一致,UI
设计的有些地方虽有滚动的功能,却不会展示滚动条,自然而然我们就需要把滚动条隐藏掉。
// html
<div class='scroll-list'>
...
</div>
// css
.scroll-list {
...
-webkit-overflow-scrolling: touch; // 提升滚动流畅度
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
.scroll-list::-webkit-scrollbar {
width: 0 !important;
display: none;
}
location
刷新页面不生效
- 由于某些环境下,可能导致缓存后,使用一些刷新方法导致无法刷新页面,例如:
location.reload()
;history.go(0)
;location = location / location.href = location.href
;location.replace(location/location.href)
;location.assign(location)
;- ...
- 由于
URL
地址是没有变化的,所以可能不会发送新的请求,进而我们可以通过改变URL
来重新刷新页面,最简单的方式我们就是在URL
后面再加一些字符什么的。但是直接在URL
后面加字符的话,可能导致URL
链接本身受影响而失效 ,所以我们最好加一个参数形式的字符串,例如:使用当前的时间戳。
export const reloadUrl = () => {
let url = location.href
if(url.includes('?')) {
url += '&'
} else {
url += '?'
}
url += `reloadTime=${Date.now()}`
location.href = url
}
- 如果页面内部刚好有代码逻辑对地址参数做了过滤、限制🚫等,而你设置的名称又刚好在名单内,那就可能触发页面内部一些其他逻辑而导致刷新不生效。
往期精彩
- 磕磕绊绊的 4 年前端er,一次含泪总结
- 前端还不会 Nginx 吗?快来学起来
- VS Code 提升开发效率、质量以及编码体验指南
- 金九前端面试总结!
- 从0搭建Vite + Vue3 + Element-Plus + Vue-Router + ESLint + husky + lint-staged
- 「前端进阶」JavaScript手写方法/使用技巧自查
- 公众号打开小程序最佳解决方案(Vue)
- Axios你可能不知道使用方式
「点赞、收藏和评论」
❤️关注+点赞收藏+评论+分享❤️,手留余香,谢谢🙏大家。