2022年如何成為一名優(yōu)秀的大前端Leader（本人前端出身，花名掃地盲僧，帶了5年的前端業(yè)務(wù)團(tuán)隊）
有人調(diào)侃Leader的作用就是不讓產(chǎn)品??騷擾到干活的攻城獅??-??引用，沒有招黑的意思。優(yōu)秀的前端Leader要學(xué)會適當(dāng)?shù)木芙^，學(xué)會說No。并不是做的越多越好，而是讓團(tuán)隊做的少價值高才好。這背后其實是當(dāng)下互聯(lián)網(wǎng)技術(shù)發(fā)展到一定階段，出現(xiàn)了專業(yè)壁壘的問題。需要更加了解業(yè)務(wù)，了解技術(shù)的專業(yè)人士來制定方案。
本人前端出身，花名掃地盲僧，帶了5年的前端業(yè)務(wù)團(tuán)隊，先后帶領(lǐng)團(tuán)隊獲得多項技術(shù)創(chuàng)新獎項。目前擔(dān)任效率工程的技術(shù)負(fù)責(zé)人。
技術(shù)不能丟
作為一名前端Leader，圖譜基本都囊括了應(yīng)該具備的技能，根據(jù)自己的業(yè)務(wù)線選擇性的?一專多能?即可，網(wǎng)上一大堆我貼再長你也未必看，還是自己找吧，這里就不多說了。
需要提的一點是JavaScript（ES6+），必須精讀，必須精通，這是你未來能夠成就多高的基石。當(dāng)你在糾結(jié)選擇Vue或React的時候，說明你已經(jīng)陷入了根基不穩(wěn)的困境。對于優(yōu)秀的前端來說，跨框架本就不應(yīng)該有什么難度。只是了解不同的生命周期和開發(fā)規(guī)范罷了。
保持技術(shù)敏感度
畢竟是搞技術(shù)的，個人建議把更多的精力放在技術(shù)上，保持Coding，保持學(xué)習(xí)和了解前沿技術(shù)。減少管理上形式化流程化的東西，減少不必要的會議等。但不能沒有管理能力，否則團(tuán)隊輸出會大打折扣。
我基本每天早晚會抽出30分鐘，瀏覽一些論壇和前沿技術(shù)博客，比如Hit Up，思掘知，少數(shù)派[2]?等。時刻保持自己對技術(shù)的敏感度。
前沿技術(shù)池:
InfoQ 前端專欄[3] 每日時報[4] indepth[5]?indepth-react[6]
大廠團(tuán)隊關(guān)注不可少：
阿里`UED`[7] 滴滴?`FE BLOG`[8] 頭條前端[9] 有贊前端[10] 騰訊?`AlloyTeam`[11] 騰訊?`TNFE`[12] 百度?`EFE`[13] HYPERS 前端團(tuán)隊博客[14] InfoQ 前端專欄[15] 印記中文周刊[16] 阮一峰老師weekly[17] 螞蟻數(shù)據(jù)體驗技術(shù)團(tuán)隊[18] TNFE-Weekly[19]
有時候?qū)W習(xí)后端Node也是必不可少的，后端的語言有助于反哺前端技術(shù)能力。
我的啟蒙老師就是大家所熟知的，擁有9000多萬閱讀量的，分享純干貨最直接的廖雪峰-Node.js[20]
保持技術(shù)深度
手寫一些函數(shù)是基本功，最好達(dá)到熟練地步，可以通過練習(xí)來加強(qiáng)記憶。以下簡單列舉幾個，網(wǎng)上也有很多資料。最好找個可以在線編程的，可以不借助工具快速搭題。
手寫instanceof
手寫深拷貝
手寫防抖
function?debounce(fn,?delay)?{
?????if(typeof?fn!=='function')?{
????????throw?new?TypeError('fn不是函數(shù)')
?????}
?????let?timer;?//?維護(hù)一個?timer
?????return?function?()?{
?????????var?_this?=?this;?//?取debounce執(zhí)行作用域的this(原函數(shù)掛載到的對象)
?????????var?args?=?arguments;
?????????if?(timer)?{
????????????clearTimeout(timer);
?????????}
?????????timer?=?setTimeout(function?()?{
????????????fn.apply(_this,?args);?//?用apply指向調(diào)用debounce的對象，相當(dāng)于_this.fn(args);
?????????},?delay);
?????};
}
?
input1.addEventListener('keyup',?debounce(()?=>?{
?console.log(input1.value)
}),?600)
復(fù)制代碼
刷刷算法題
善用工具
搞技術(shù)的應(yīng)該為自己重復(fù)性的工作感到鄙視，技術(shù)是生產(chǎn)力。要學(xué)會通過工具的方式來減少重復(fù)性的工作，熟練利用工具可以讓你效率翻倍提升，從而有助于提升愉悅的工作體驗。
其中推薦給大家我用著比較順手的outils[21],輕量級工具庫，支持模塊化加載。強(qiáng)烈建議讀源碼，以后搞項目就可以隨手封裝出一個類庫。
CODEIF
變量命名神器,地址:unbug.github.io/codelf/[22]
docschina
Web前端優(yōu)質(zhì)的中文文檔,docschina.org/[23]
RegExr
RegExr 是一個基于 HTML/JS 開發(fā)的在線工具，用來創(chuàng)建、測試和學(xué)習(xí)正則表達(dá)式。
特性
輸入時，結(jié)果會實時更新 支持 JavaScript 和 PHP/PCRE RegEx 將匹配項或表達(dá)式移至詳細(xì)信息 保存并與他人共享表達(dá)式 在編輯器中使用 cmd-Z/Y 撤消和重做
Tool.lu
工具集合:?tool.lu/[24]
CodeSandbox
CodeSandbox[25]?是一個在線的代碼編輯器，主要聚焦于創(chuàng)建 Web 應(yīng)用項目。CodeSandbox[26]
支持主流的前端相關(guān)文件的編輯：JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。
LightHouse
LightHouse[27]是一個開源的自動化工具，用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。在里面你可以看到它給你各個方面的建議，比如圖片、css、js 這些文件的處理，還有 html 里面標(biāo)簽的使用，緩存處理等建議，可以根據(jù)這些來對網(wǎng)站進(jìn)行優(yōu)化。
Can I Use
Can I Use[28]這個是一個針對前端開發(fā)人員定制的一個查詢 CSS、Js 在個中流行瀏覽器鐘的特性和兼容性的網(wǎng)站，可以很好的保證網(wǎng)頁的瀏覽器兼容性。
有了這個工具可以快速的了解到代碼在各個瀏覽器鐘的效果。比如查詢?transform?的瀏覽器支持情況：
Carbon
Carbon[29]是一個在線的代碼轉(zhuǎn)圖片工具。發(fā)個朋友圈，發(fā)個脈脈，發(fā)個博客啥的賊能裝X了。尤其咱們搞前端的，要注重用戶體驗的，所有輸出的東西必須看得過去。
TinyPNG
**TinyPNG**[30]?PNG/JPG 圖片在線壓縮利器，智能 PNG 和 JPEG 圖片壓縮。我用了5年,真想寫一套賣錢~
github最全前端導(dǎo)航
FrontEndGitHub[31]，收錄了前端到全棧的最新最全的優(yōu)質(zhì)github文章和工具，有空就翻翻吧，翻閱慢了就過時了。
...還有更多就不一一列舉了，主要是借助工具提高效率的思維。
管理思維
成為一個合格的前端LD，并不只是具備代碼和架構(gòu)的能力，而是要能夠站在業(yè)務(wù)、用戶的角度理解自己所做的產(chǎn)品，讓技術(shù)成為業(yè)務(wù)價值的基石，并能夠不斷擴(kuò)大自己的影響力，通過撬動更多的資源提升整個團(tuán)隊的效能。
你能夠為所從事的業(yè)務(wù)增加價值。 你有能力抓住機(jī)會，而不會留有遺憾。 人們喜歡你，和你一起工作后會保持積極的情緒。 你可以不斷學(xué)習(xí)和提高自己。
分享做管理者的幾點感悟：
松散的管理只會讓團(tuán)隊越來越懶惰，并且隨著時間推移，團(tuán)隊越來越多人會找不到價值點，從而流失。
始終鼓勵團(tuán)隊發(fā)展自己領(lǐng)域內(nèi)擅長的事，感興趣的事，愿意做的事。加以引導(dǎo)和資源傾斜，幫助其帶來更高的成就和價值。
注：很多程序員都熱愛技術(shù)，喜歡學(xué)習(xí)新東西，喜歡把新東西用到產(chǎn)品中，你要想各種辦法給他機(jī)會，創(chuàng)造條件-這是你作為管理的責(zé)任。
高要求換來高成長，即時獎勵，勞逸結(jié)合，團(tuán)隊凝聚力強(qiáng)，執(zhí)行有力，落地有聲。
源自：https://juejin.cn/post/7034419410706104356
聲明：文章著作權(quán)歸作者所有，如有侵權(quán)，請聯(lián)系小編刪除。