前端定期小復(fù)盤(pán), 每期都有小收獲(二)
關(guān)注并將「趣談前端」設(shè)為星標(biāo)
每天定時(shí)分享技術(shù)干貨/優(yōu)秀開(kāi)源/技術(shù)思維
hi, 大家好, 我是徐小夕, 我想任何一名工程師都有我現(xiàn)在的焦慮:
- 工作學(xué)到了新知識(shí), 解決了新問(wèn)題不知道如何總結(jié), 復(fù)盤(pán)
- 工作下班后想學(xué)習(xí)提升卻不知道該學(xué)習(xí)什么
- 知道該學(xué)習(xí)什么但是又控制不住手機(jī)的誘惑
- 學(xué)習(xí)堅(jiān)持了一段時(shí)間就不了了知了
最終一年到頭, 我還是那個(gè)我, 一層不變的 “煙火”.
所以為了讓自己, 也讓大家有個(gè)持續(xù)的提升, 我會(huì)定期總結(jié)復(fù)盤(pán)一些自己工作, 學(xué)習(xí)中遇到的問(wèn)題, 并給出自己的解答, 最終以文章的形式分享出來(lái), 讓大家少走彎路, 每周都能學(xué)到新知識(shí).
每篇文章內(nèi)容不會(huì)太多, 會(huì)總結(jié)3-6個(gè)常見(jiàn)問(wèn)題及解答, 閱讀時(shí)間控制在3-10分鐘, 作為每個(gè)周期成長(zhǎng)的見(jiàn)證.
今天是我們的第二次復(fù)盤(pán), 主要復(fù)盤(pán)如下:
- git代碼管理的使用技巧
- git hooks 如何在項(xiàng)目中優(yōu)雅的使用
- js操作符“~” 以及 “|” 的用法
- 事件委托的優(yōu)缺點(diǎn)
- ts抱錯(cuò)問(wèn)題分析(assignment to property of function parameter)
1. git代碼管理的使用技巧
這里整理幾個(gè)基礎(chǔ)的git操作:
- 基于當(dāng)前分支創(chuàng)建新分支
git checkout -b newBranchName
- 基于遠(yuǎn)程分支創(chuàng)建新分支(如果想更好的跟蹤, 最好本地和遠(yuǎn)程分支名一致)
git checkout -b newBranchName origin/remoteBranchName
- 創(chuàng)建一個(gè)基于遠(yuǎn)程分支的本地分支并自動(dòng)跟蹤遠(yuǎn)程分支
git checkout --track origin/remoteBranchName
- 刪除本地分支
git branch -d localBranch
- 刪除遠(yuǎn)程分支
git push origin -d remote_branch_name
- 合并本地提交信息
git rebase -i commitId(需要合并提交信息的前一個(gè)commitid)
2. git hooks 如何在項(xiàng)目中優(yōu)雅的使用
git hooks 主要提供了很多在提交前的處理鉤子, 比如我們可以在提交之前進(jìn)行代碼格式校驗(yàn)(pretty, eslint), 對(duì)提交信息進(jìn)行驗(yàn)證(commit-msg), 具體可以參考我總結(jié)的lerna最佳實(shí)踐(https://github.com/MrXujiang/best-cps)
git hooks完成的hooks介紹和說(shuō)明可以參考:
https://githooks.com/
3. js操作符 “~” “~~” 以及 “|” 的用法
按位非運(yùn)算符(~)，簡(jiǎn)單的理解就是改變運(yùn)算數(shù)的符號(hào)并減去1，當(dāng)然，這是只是簡(jiǎn)單的理解能轉(zhuǎn)換成number類(lèi)型的數(shù)據(jù);比如?~9?== -10 ;?~~ 9?== 9;
那么，對(duì)于typeof var!==”number”的類(lèi)型來(lái)說(shuō)，進(jìn)行運(yùn)算時(shí)，會(huì)嘗試轉(zhuǎn)化成32位整形數(shù)據(jù)，如果無(wú)法轉(zhuǎn)換成整形數(shù)據(jù)，就轉(zhuǎn)換為NaN;
可以將~~視為parseInt的簡(jiǎn)寫(xiě)。并且使用按位或 “|”操作符也可以得到相同的結(jié)果
4. 事件委托的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
- 減少事件注冊(cè)，節(jié)省內(nèi)存。
- 簡(jiǎn)化了dom節(jié)點(diǎn)更新時(shí)，相應(yīng)事件的更新。
缺點(diǎn)：
- 事件委托基于冒泡，對(duì)于不冒泡的事件不支持。
- 層級(jí)過(guò)多，冒泡過(guò)程中，可能會(huì)被某層阻止掉。
- 理論上委托會(huì)導(dǎo)致瀏覽器頻繁調(diào)用處理函數(shù)，所以建議就近委托
- 把所有事件都用代理就可能會(huì)出現(xiàn)事件誤判。比如，在
document中代理了所有button的click事件，另外的人在引用改js時(shí)，可能不知道，造成單擊button觸發(fā)了兩個(gè)click事件。
5. ts抱錯(cuò)問(wèn)題分析(assignment to property of function parameter)
這個(gè) ts 抱錯(cuò)的意思是指不要直接修改函數(shù)的入?yún)?。因?yàn)榧偃缛雲(yún)⑹且粋€(gè)對(duì)象，修改入?yún)⒖赡軙?huì)導(dǎo)致對(duì)象的屬性被覆蓋。所以我們可以將入?yún)⑦M(jìn)行copy, 修改新對(duì)象. 如下:
const?func?=?(obj)?=>?{
??const?_obj?=?{...obj};
??_obj.children?=?['h5-dooring']
??rerurn?_obj
}
這樣就不會(huì)抱錯(cuò)啦~
更多推薦
前端推薦!3分鐘帶你了解開(kāi)源圖片編輯器iDraw.js
推薦!使用H5-Dooring快速搭建智能汽車(chē)移動(dòng)端站點(diǎn)
lerna + dumi + eslint多包管理實(shí)踐
動(dòng)態(tài)刻度可視化組件實(shí)現(xiàn)
從零開(kāi)發(fā)一款輕量級(jí)滑動(dòng)驗(yàn)證碼插件(深度復(fù)盤(pán))
從零搭建全?？梢暬笃林谱髌脚_(tái)V6.Dooring
