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

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
}

这样就不会抱错啦~