點(diǎn)擊上方?前端Q，關(guān)注公眾號(hào)

回復(fù)加群，加入前端Q技術(shù)交流群

有人調(diào)侃Leader的作用就是不讓產(chǎn)品??騷擾到干活的攻城獅??-??引用，沒有招黑的意思。優(yōu)秀的前端Leader要學(xué)會(huì)適當(dāng)?shù)木芙^，學(xué)會(huì)說No。并不是做的越多越好，而是讓團(tuán)隊(duì)做的少價(jià)值高才好。這背后其實(shí)是當(dāng)下互聯(lián)網(wǎng)技術(shù)發(fā)展到一定階段，出現(xiàn)了專業(yè)壁壘的問題。需要更加了解業(yè)務(wù)，了解技術(shù)的專業(yè)人士來制定方案。

本人前端出身，花名掃地盲僧，帶了5年的前端業(yè)務(wù)團(tuán)隊(duì)，先后帶領(lǐng)團(tuán)隊(duì)獲得多項(xiàng)技術(shù)創(chuàng)新獎(jiǎng)項(xiàng)。目前擔(dān)任效率工程的技術(shù)負(fù)責(zé)人。

技術(shù)不能丟

作為一名前端Leader，圖譜基本都囊括了應(yīng)該具備的技能，根據(jù)自己的業(yè)務(wù)線選擇性的 一專多能 即可，網(wǎng)上一大堆我貼再長你也未必看，還是自己找吧，這里就不多說了。

需要提的一點(diǎn)是JavaScript（ES6+），必須精讀，必須精通，這是你未來能夠成就多高的基石。當(dāng)你在糾結(jié)選擇Vue或React的時(shí)候，說明你已經(jīng)陷入了根基不穩(wěn)的困境。對(duì)于優(yōu)秀的前端來說，跨框架本就不應(yīng)該有什么難度。只是了解不同的生命周期和開發(fā)規(guī)范罷了。

保持技術(shù)敏感度

畢竟是搞技術(shù)的，個(gè)人建議把更多的精力放在技術(shù)上，保持Coding，保持學(xué)習(xí)和了解前沿技術(shù)。減少管理上形式化流程化的東西，減少不必要的會(huì)議等。但不能沒有管理能力，否則團(tuán)隊(duì)輸出會(huì)大打折扣。

我基本每天早晚會(huì)抽出30分鐘，瀏覽一些論壇和前沿技術(shù)博客，比如Hit Up，思掘知，少數(shù)派^[2] 等。時(shí)刻保持自己對(duì)技術(shù)的敏感度。

前沿技術(shù)池:

InfoQ 前端專欄^[3]
每日時(shí)報(bào)^[4]
indepth^[5]?indepth-react^[6]

大廠團(tuán)隊(duì)關(guān)注不可少：

阿里`UED`^[7]
滴滴?`FE BLOG`^[8]
頭條前端^[9]
有贊前端^[10]
騰訊?`AlloyTeam`^[11]
騰訊?`TNFE`^[12]
百度?`EFE`^[13]
HYPERS 前端團(tuán)隊(duì)博客^[14]
InfoQ 前端專欄^[15]
印記中文周刊^[16]
阮一峰老師weekly^[17]
螞蟻數(shù)據(jù)體驗(yàn)技術(shù)團(tuán)隊(duì)^[18]
TNFE-Weekly^[19]

有時(shí)候?qū)W習(xí)后端Node也是必不可少的，后端的語言有助于反哺前端技術(shù)能力。
我的啟蒙老師就是大家所熟知的，擁有9000多萬閱讀量的，分享純干貨最直接的廖雪峰-Node.js^[20]

保持技術(shù)深度

手寫一些函數(shù)是基本功，最好達(dá)到熟練地步，可以通過練習(xí)來加強(qiáng)記憶。以下簡單列舉幾個(gè)，網(wǎng)上也有很多資料。最好找個(gè)可以在線編程的，可以不借助工具快速搭題。

手寫instanceof

手寫深拷貝

手寫防抖

function?debounce(fn,?delay)?{
?????if(typeof?fn!=='function')?{
????????throw?new?TypeError('fn不是函數(shù)')
?????}
?????let?timer;?//?維護(hù)一個(gè)?timer
?????return?function?()?{
?????????var?_this?=?this;?//?取debounce執(zhí)行作用域的this(原函數(shù)掛載到的對(duì)象)
?????????var?args?=?arguments;
?????????if?(timer)?{
????????????clearTimeout(timer);
?????????}
?????????timer?=?setTimeout(function?()?{
????????????fn.apply(_this,?args);?//?用apply指向調(diào)用debounce的對(duì)象，相當(dāng)于_this.fn(args);
?????????},?delay);
?????};
}
?
input1.addEventListener('keyup',?debounce(()?=>?{
?console.log(input1.value)
}),?600)

復(fù)制代碼

刷刷算法題

善用工具

搞技術(shù)的應(yīng)該為自己重復(fù)性的工作感到鄙視，技術(shù)是生產(chǎn)力。要學(xué)會(huì)通過工具的方式來減少重復(fù)性的工作，熟練利用工具可以讓你效率翻倍提升，從而有助于提升愉悅的工作體驗(yàn)。

其中推薦給大家我用著比較順手的outils^[21],輕量級(jí)工具庫，支持模塊化加載。強(qiáng)烈建議讀源碼，以后搞項(xiàng)目就可以隨手封裝出一個(gè)類庫。

CODEIF

變量命名神器,地址:unbug.github.io/codelf/^[22]

docschina

Web前端優(yōu)質(zhì)的中文文檔,docschina.org/^[23]

RegExr

RegExr 是一個(gè)基于 HTML/JS 開發(fā)的在線工具，用來創(chuàng)建、測試和學(xué)習(xí)正則表達(dá)式。

特性

輸入時(shí)，結(jié)果會(huì)實(shí)時(shí)更新
支持 JavaScript 和 PHP/PCRE RegEx
將匹配項(xiàng)或表達(dá)式移至詳細(xì)信息
保存并與他人共享表達(dá)式
在編輯器中使用 cmd-Z/Y 撤消和重做

Tool.lu

工具集合: tool.lu/^[24]

CodeSandbox

CodeSandbox^[25] 是一個(gè)在線的代碼編輯器，主要聚焦于創(chuàng)建 Web 應(yīng)用項(xiàng)目。CodeSandbox^[26]

支持主流的前端相關(guān)文件的編輯：JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。

LightHouse

LightHouse^[27]是一個(gè)開源的自動(dòng)化工具，用于改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。在里面你可以看到它給你各個(gè)方面的建議，比如圖片、css、js 這些文件的處理，還有 html 里面標(biāo)簽的使用，緩存處理等建議，可以根據(jù)這些來對(duì)網(wǎng)站進(jìn)行優(yōu)化。

Can I Use

Can I Use^[28]這個(gè)是一個(gè)針對(duì)前端開發(fā)人員定制的一個(gè)查詢 CSS、Js 在個(gè)中流行瀏覽器鐘的特性和兼容性的網(wǎng)站，可以很好的保證網(wǎng)頁的瀏覽器兼容性。

有了這個(gè)工具可以快速的了解到代碼在各個(gè)瀏覽器鐘的效果。比如查詢 transform 的瀏覽器支持情況：

Carbon

Carbon^[29]是一個(gè)在線的代碼轉(zhuǎn)圖片工具。發(fā)個(gè)朋友圈，發(fā)個(gè)脈脈，發(fā)個(gè)博客啥的賊能裝X了。尤其咱們搞前端的，要注重用戶體驗(yàn)的，所有輸出的東西必須看得過去。

TinyPNG

**TinyPNG**^[30] PNG/JPG 圖片在線壓縮利器，智能 PNG 和 JPEG 圖片壓縮。我用了5年,真想寫一套賣錢~

github最全前端導(dǎo)航

FrontEndGitHub^[31]，收錄了前端到全棧的最新最全的優(yōu)質(zhì)github文章和工具，有空就翻翻吧，翻閱慢了就過時(shí)了。

...還有更多就不一一列舉了，主要是借助工具提高效率的思維。

管理思維

成為一個(gè)合格的前端LD，并不只是具備代碼和架構(gòu)的能力，而是要能夠站在業(yè)務(wù)、用戶的角度理解自己所做的產(chǎn)品，讓技術(shù)成為業(yè)務(wù)價(jià)值的基石，并能夠不斷擴(kuò)大自己的影響力，通過撬動(dòng)更多的資源提升整個(gè)團(tuán)隊(duì)的效能。

你能夠?yàn)樗鶑氖碌臉I(yè)務(wù)增加價(jià)值。
你有能力抓住機(jī)會(huì)，而不會(huì)留有遺憾。
人們喜歡你，和你一起工作后會(huì)保持積極的情緒。
你可以不斷學(xué)習(xí)和提高自己。

分享做管理者的幾點(diǎn)感悟：

松散的管理只會(huì)讓團(tuán)隊(duì)越來越懶惰，并且隨著時(shí)間推移，團(tuán)隊(duì)越來越多人會(huì)找不到價(jià)值點(diǎn)，從而流失。
始終鼓勵(lì)團(tuán)隊(duì)發(fā)展自己領(lǐng)域內(nèi)擅長的事，感興趣的事，愿意做的事。加以引導(dǎo)和資源傾斜，幫助其帶來更高的成就和價(jià)值。
注：很多程序員都熱愛技術(shù)，喜歡學(xué)習(xí)新東西，喜歡把新東西用到產(chǎn)品中，你要想各種辦法給他機(jī)會(huì)，創(chuàng)造條件-這是你作為管理的責(zé)任。
高要求換來高成長，即時(shí)獎(jiǎng)勵(lì)，勞逸結(jié)合，團(tuán)隊(duì)凝聚力強(qiáng)，執(zhí)行有力，落地有聲。

關(guān)于本文