前端定期小复盘, 每期都有小收获(二)
共 1888字，需浏览 4分钟
·
2021-10-18 10:27
关注并将「趣谈前端」设为星标
每天定时分享技术干货/优秀开源/技术思维
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中代理了所有button的click事件，另外的人在引用改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
}
这样就不会抱错啦~
更多推荐
