大廠技術(shù)  高級前端  Node進階

點擊上方 程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

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

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

技術(shù)不能丟

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

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

保持技術(shù)敏感度

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

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

前沿技術(shù)池:

• InfoQ 前端專欄^[3]
• 每日時報^[4]
• indepth^[5] indepth-react^[6]

大廠團隊關(guān)注不可少：

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

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

保持技術(shù)深度

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

手寫instanceof

手寫深拷貝

手寫防抖

function debounce(fn, delay) {
     if(typeof fn!=='function') {
        throw new TypeError('fn不是函數(shù)')
     }
     let timer; // 維護一個 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的對象，相當于_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],輕量級工具庫，支持模塊化加載。強烈建議讀源碼，以后搞項目就可以隨手封裝出一個類庫。

CODEIF

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

docschina

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

RegExr

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

特性

• 輸入時，結(jié)果會實時更新
• 支持 JavaScript 和 PHP/PCRE RegEx
• 將匹配項或表達式移至詳細信息
• 保存并與他人共享表達式
• 在編輯器中使用 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]是一個開源的自動化工具，用于改進網(wǎng)絡(luò)應(yīng)用的質(zhì)量。在里面你可以看到它給你各個方面的建議，比如圖片、css、js 這些文件的處理，還有 html 里面標簽的使用，緩存處理等建議，可以根據(jù)這些來對網(wǎng)站進行優(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ù)價值的基石，并能夠不斷擴大自己的影響力，通過撬動更多的資源提升整個團隊的效能。

1. 你能夠為所從事的業(yè)務(wù)增加價值。
2. 你有能力抓住機會，而不會留有遺憾。
3. 人們喜歡你，和你一起工作后會保持積極的情緒。
4. 你可以不斷學(xué)習(xí)和提高自己。

分享做管理者的幾點感悟：

• 松散的管理只會讓團隊越來越懶惰，并且隨著時間推移，團隊越來越多人會找不到價值點，從而流失。

• 始終鼓勵團隊發(fā)展自己領(lǐng)域內(nèi)擅長的事，感興趣的事，愿意做的事。加以引導(dǎo)和資源傾斜，幫助其帶來更高的成就和價值。

  注：很多程序員都熱愛技術(shù)，喜歡學(xué)習(xí)新東西，喜歡把新東西用到產(chǎn)品中，你要想各種辦法給他機會，創(chuàng)造條件-這是你作為管理的責任。

• 高要求換來高成長，即時獎勵，勞逸結(jié)合，團隊凝聚力強，執(zhí)行有力，落地有聲。