前端定期小复盘, 每期都有小收获(二)

本文作者徐小夕分享了工作中关于Git代码管理的实用技巧,如创建和删除分支、合并提交信息等,并介绍了如何优雅地使用Git Hooks进行代码校验和提交信息验证。此外,还探讨了JavaScript中按位运算符的用法、事件委托的优缺点以及TypeScript中防止直接修改函数参数的错误处理。每周更新,旨在帮助读者持续学习前端知识。
摘要由CSDN通过智能技术生成

关注并将「趣谈前端」设为星标

每天定时分享技术干货/优秀开源/技术思维

hi, 大家好, 我是徐小夕, 我想任何一名工程师都有我现在的焦虑:

  • 工作学到了新知识, 解决了新问题不知道如何总结, 复盘

  • 工作下班后想学习提升却不知道该学习什么

  • 知道该学习什么但是又控制不住手机的诱惑

  • 学习坚持了一段时间就不了了知了

最终一年到头, 我还是那个我, 一层不变的 “烟火”.

所以为了让自己, 也让大家有个持续的提升, 我会定期总结复盘一些自己工作, 学习中遇到的问题, 并给出自己的解答, 最终以文章的形式分享出来, 让大家少走弯路, 每周都能学到新知识.

每篇文章内容不会太多, 会总结3-6个常见问题及解答, 阅读时间控制在3-10分钟, 作为每个周期成长的见证.

今天是我们的第二次复盘, 主要复盘如下:

  • git代码管理的使用技巧

  • git hooks 如何在项目中优雅的使用

  • js操作符“~” 以及 “|” 的用法

  • 事件委托的优缺点

  • ts抱错问题分析(assignment to property of function parameter)

1. git代码管理的使用技巧

这里整理几个基础的git操作:

  • 基于当前分支创建新分支

git checkout -b newBranchName
  • 基于远程分支创建新分支(如果想更好的跟踪, 最好本地和远程分支名一致)

git checkout -b newBranchName origin/remoteBranchName
  • 创建一个基于远程分支的本地分支并自动跟踪远程分支

git checkout --track origin/remoteBranchName
  • 删除本地分支

git branch -d localBranch
  • 删除远程分支

git push origin -d remote_branch_name
  • 合并本地提交信息

git rebase -i commitId(需要合并提交信息的前一个commitid)

2. git hooks 如何在项目中优雅的使用

git hooks 主要提供了很多在提交前的处理钩子, 比如我们可以在提交之前进行代码格式校验(pretty, eslint), 对提交信息进行验证(commit-msg), 具体可以参考我总结的lerna最佳实践(https://github.com/MrXujiang/best-cps)

git hooks完成的hooks介绍和说明可以参考:

https://githooks.com/

3. js操作符 “~” “~~” 以及 “|” 的用法

按位非运算符(~),简单的理解就是改变运算数的符号并减去1,当然,这是只是简单的理解能转换成number类型的数据;比如 ~9 == -10 ; ~~ 9 == 9;

那么,对于typeof var!==”number”的类型来说,进行运算时,会尝试转化成32位整形数据,如果无法转换成整形数据,就转换为NaN;

可以将~~视为parseInt的简写。并且使用按位或 “|”操作符也可以得到相同的结果

4. 事件委托的优缺点

  • 优点:

    • 减少事件注册,节省内存。

    • 简化了dom节点更新时,相应事件的更新。

  • 缺点:

    • 事件委托基于冒泡,对于不冒泡的事件不支持。

    • 层级过多,冒泡过程中,可能会被某层阻止掉。

    • 理论上委托会导致浏览器频繁调用处理函数,所以建议就近委托

    • 把所有事件都用代理就可能会出现事件误判。比如,在document中代理了所有buttonclick事件,另外的人在引用改js时,可能不知道,造成单击button触发了两个click事件。

5. ts抱错问题分析(assignment to property of function parameter)

这个 ts 抱错的意思是指不要直接修改函数的入参。因为假如入参是一个对象,修改入参可能会导致对象的属性被覆盖。所以我们可以将入参进行copy, 修改新对象. 如下:

const func = (obj) => {
  const _obj = {...obj};
  _obj.children = ['h5-dooring']
  rerurn _obj
}

这样就不会抱错啦~

更多推荐

450573186cd1a0bf569d0fea262bf7ec.png

前端推荐!3分钟带你了解开源图片编辑器iDraw.js

推荐!使用H5-Dooring快速搭建智能汽车移动端站点

lerna + dumi + eslint多包管理实践

动态刻度可视化组件实现

从零开发一款轻量级滑动验证码插件(深度复盘)

从零搭建全栈可视化大屏制作平台V6.Dooring

03a6fd5c0b418a82b07ce466a13bf184.gif

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值