寫作本文的目的：構(gòu)建自己關(guān)于前端工程師成長過程的認知模型淌山，從自己的視角來分析 Programmer屯碴、Developer茅逮、Enginner 的能力結(jié)構(gòu)與工程師成長過程的關(guān)聯(lián)巧涧，并分享出來給大家榨婆，期望能對入門的前端同學(xué)有所借鑒和啟發(fā)。需要提前說明的是褒侧，文中用到的工程師的不同叫法并不是要給工程師分類或者貼標簽，因為工程師的成長過程是連續(xù)的，喜歡鉆牛角尖的同學(xué)請自行繞路闷供。
程序員 or 工程師
圈內(nèi)對從事軟件開發(fā)的同學(xué)有很多叫法烟央，如程序員（Programmer）、開發(fā)者（Developer）歪脏、工程師（Engineer）疑俭，甚至是碼農(nóng)，“碼農(nóng)”是圈內(nèi)人用來自嘲的婿失，那其他幾個名詞呢钞艇？表面上看起來都是做軟件開發(fā)，叫什么真的重要么豪硅？
不得不說哩照，叫什么并不重要，不論是自稱還是他稱懒浮，什么學(xué)歷飘弧、幾年工作經(jīng)驗也不重要，真正重要的是人所具備的能力砚著。那么既然名稱不重要次伶？為什么還要談?wù)撍棵Q的真正意義在于能讓我積極拓寬自己的視野稽穆，不斷點亮自己的技能樹冠王，在職業(yè)發(fā)展的道路上不斷積累、不斷提升舌镶。
工程師做事的三重境界是什么柱彻？程序員、開發(fā)者乎折、工程師這些叫法跟這三重境界又有啥關(guān)系绒疗？
第 1 重境界：把事情做成
把事情做成是公司對員工的基本要求，絕大多數(shù)入門同學(xué)就處在這個境界骂澄，這個境界的人可稱為程序員（Programmer）吓蘑，對于 Programmer 通常需要告訴他做什么、怎么做坟冲，他所需要的是執(zhí)行力和基礎(chǔ)技能磨镶，這里的技能包括：基本的編程技能，至少會一門編程語言健提，對這門語言的熟悉程度至少能夠讓他把基本需求解決琳猫。具體到前端領(lǐng)域，對 Programmer 的要求就是需要能夠使用 JS私痹、CSS脐嫂、HTML统刮，并且熟悉編輯器、瀏覽器來完成基本需求账千。
以常見的 WEB 端統(tǒng)計為例侥蒙，為了研究頁面關(guān)鍵元素的用戶行為，需要對用戶的部分交互添加事件統(tǒng)計（更常見的叫法是“埋點”）匀奏，比如單擊事件鞭衩，表單提交事件，如果使用百度統(tǒng)計娃善，在頁面中埋點的方法大概如下：
<a onclick="_hmt.push(['_trackEvent', 'checkout', 'click']);">購買</a>
或者在 JS 中埋點：
// 需要發(fā)送統(tǒng)計的時候_hmt.push(['_trackEvent', 'checkout', 'click']);
接下來由于業(yè)務(wù)需要论衍，相同的統(tǒng)計，需要往 Google Analytics 發(fā)一份聚磺，最簡單粗暴的解決方案如下：<aonclick="_hmt.push(['_trackEvent', 'checkout', 'click']); _gaq.push(['_trackEvent', 'checkout', 'click']);">購買</a>
JS 中也需要做同樣的修改：
// 需要發(fā)送統(tǒng)計的時候_hmt.push(['_trackEvent', 'checkout', 'click']);_gaq.push(['_trackEvent', 'checkout', 'click']);
如果網(wǎng)站的頁面規(guī)模坯台、統(tǒng)計事件量小，變更埋點可能會比較輕松咧最，但當頁面和事件數(shù)量隨著業(yè)務(wù)發(fā)展激增捂人，估計程序員會埋點埋到手抽筋了。這個時候 Programmer 會不高興矢沿，很可能 Boss 也會不高興滥搭，因為埋點效率提不上來，并且容易出錯捣鲸。聰明的 Programmer 會發(fā)現(xiàn)瑟匆，僅僅從表面上把問題解決貌似還不夠。該如何破局栽惶？（web前端學(xué)習(xí)交流群：328058344 禁止閑聊愁溜，非喜勿進！）
第 2 重境界：把事情做好
具備什么樣的能力才能把事情做好外厂？對基本技術(shù)的熟悉程度超過（需要超過一大截）把事情做成的需要冕象；對于業(yè)務(wù)需求有一定的前瞻性；能給出比較健壯的技術(shù)方案汁蝶，能一次解決一類問題而不是一個問題渐扮，知道什么樣的方案是不靠譜的，具備這些能力的人可稱為開發(fā)者（Developer）掖棉。
不可否認墓律，Developer 是升級版的 Programmer，相比而言幔亥，Developer 大多數(shù)時候需要自行找到問題的解決方案并落地實施耻讽。通俗的說，面對具體的技術(shù)帕棉、業(yè)務(wù)問題针肥，Developer 能比 Programmer 顧及到更多的點饼记，想到更多的方案。但是要實現(xiàn)這兩個“更多”祖驱，需要的是努力握恳、時間和經(jīng)驗的積累。
當然捺僻，從 Programmer 到 Developer 的進階是可以加速的，需要壓縮自己的時間在更短的時間內(nèi)做更多的事情崇裁，注意這里不是把相同的事情重復(fù) N 遍匕坯，如果是那樣就很容易出現(xiàn) 3 年工作時間半年工作經(jīng)驗的尷尬。
回到上面提到的埋點方案拔稳，簡單粗暴的解決方式存在什么問題葛峻？
- 首先，代碼擴展性太差巴比，后續(xù)如果需求方需要接入自建的統(tǒng)計术奖，前端的工作量并沒有減少，反而改起來會需要更加的小心翼翼轻绞；
- 其次采记，直接發(fā)送統(tǒng)計是否能保障精確送達，有沒有可能存在漏報的情況政勃，細心的同學(xué)肯定能想到這種風(fēng)險唧龄；
- 最后，前端代碼風(fēng)格奸远，其實不太推薦在 HTML 中內(nèi)聯(lián)書寫 JS 事件既棺，這就是臟代碼的典型例子；
Developer 會如何解決這個問題呢懒叛？先理清楚埋點代碼的本質(zhì)：發(fā)送統(tǒng)計的動作丸冕、指定統(tǒng)計參數(shù)，其中發(fā)送統(tǒng)計的動作跟需要接入的統(tǒng)計平臺有關(guān)薛窥，確保統(tǒng)計到達也跟這個動作有關(guān)胖烛，這個動作跟統(tǒng)計參數(shù)無關(guān)，而統(tǒng)計參數(shù)本身跟節(jié)點的關(guān)系比較緊密拆檬，動作和參數(shù)可以解耦開洪己。
基于這樣的認知，不難設(shè)計出下面的方案竟贯，在所有需要埋點的地方約定參數(shù)的標記方式答捕，使用 data-event-* 參數(shù)標記事件名稱、事件類型以及額外的參數(shù)：
<a data-event-name='checkout' data-event-type='click'>購買</a>
然后屑那，在頁面級別監(jiān)聽那些埋點的節(jié)點拱镐，并且恰當?shù)臅r機發(fā)送統(tǒng)計代碼艘款，簡化版如下：
// 相同的參數(shù)發(fā)送給所有已接入的統(tǒng)計平臺，如果平臺不同沃琅，適配工作也在這里做const sendEventLog = (name, type, param) => {
_hmt.push(['_trackEvent', name, 'click', param]);
_gaq.push(['_trackEvent', name, 'click', param]);
};
// 針對單擊事件的處理哗咆，其他事件可以類似處理
$(body).on('click', '[data-event-name][data-event-type="click"]', function (e) {
// 拿到事件發(fā)生的節(jié)點 const target = $(e.target);
// 獲取事件屬性
const name = target.attr('data-event-name');
const param = target.attr('data-event-param') || '';
if (!name) {
return;
}
// 這里如果是鏈接跳轉(zhuǎn)，需要走單獨的邏輯
sendEventLog(name, 'click', param);
});
上面探討了從 Programmer 進階到 Developer 的方法就是積累益眉，那么怎么積累晌柬？我行動的基本法則是：做出好的東西先要知道好的東西長啥樣。一方面郭脂，多讀經(jīng)典的書年碘，仔細讀高質(zhì)量的文章装哆，注意這里面讀遠比收藏重要绢要，上哪里去找經(jīng)典的書和高質(zhì)量的文章？這需要建立自己的信息篩選機制擅腰；另外一方面莹弊，遇到問題要學(xué)會去搜索涤久，找更多的解決方案，然后比較忍弛，融會貫通响迂。
不得不承認，從 Programmer 進階到 Developer 需要非常多的努力和積累才行剧罩，但是精進之路永無止境栓拜，下面說說第三重境界。
第 3 重境界：把事情做絕
能夠把事情做絕的人惠昔，可以稱得上是工程師（Engineer）幕与，那么到底怎么才算是把事情做絕？以統(tǒng)計埋點為例镇防，能夠洞悉埋點需求的本質(zhì)啦鸣，把日志發(fā)送和埋點標記解耦之后，將兩者都做到極致±囱酰現(xiàn)實中埋點需求的來源通常是運營和產(chǎn)品經(jīng)理诫给，所有的變更基本都是由他們驅(qū)動，如果能夠給他們提供工具管理頁面中的埋點標記（思路關(guān)鍵詞：XPath啦扬、微服務(wù)中狂、瀏覽器插件，細節(jié)不在本文描述）扑毡，就能把工程師從這種瑣碎需求中解放出來去做更有意義的事情胃榕，這樣也就改變了組織中不同員工間的協(xié)作方式，提高組織的效率瞄摊。
想成為前端工程師勋又，要先成為工程師苦掘。工程師應(yīng)該具備怎樣的能力？要回答這個問題楔壤，我們不妨仔細思考下什么是工程鹤啡，WIKIPEDIA**的原文如下：
Engineering is the application of mathematics and scientific, economic, social, and practical knowledge in order to invent, innovate, design, build, maintain, research, and improve structures, machines, tools, systems, components, materials, processes, solutions, and organizations.
簡單說，工程就是運用知識去設(shè)計蹲嚣、創(chuàng)建递瑰、維護、改進工具隙畜、系統(tǒng)泣矛、流程和組織的過程，而工程師是推動這個過程的最主要角色禾蚕。
工程師，首先要具備很強的學(xué)習(xí)能力狂丝，能掌握完整的知識體系换淆，知識的來源并不重要，可以來自于自學(xué)几颜，也可以來自于學(xué)校倍试，以及生產(chǎn)實踐的總結(jié)，只局限于一門編程語言或特定的幾個工具是遠遠不夠的蛋哭，讓一個工程師切換到新語言不會有什么障礙县习，扎實的計算機科學(xué)基礎(chǔ)是基石。具體到前端領(lǐng)域谆趾，基本的數(shù)據(jù)結(jié)構(gòu)和算法躁愿、設(shè)計模式和變成范式、網(wǎng)絡(luò)沪蓬、JS彤钟、CSS、瀏覽器跷叉、性能逸雹、設(shè)計，軟件質(zhì)量云挟、可維護性梆砸、可擴展性，軟件工程化（構(gòu)建园欣、部署帖世、運維、監(jiān)控）俊庇。
工程師狮暑，還要具備良好的抽象思維能力鸡挠，有了抽象思維能力就能夠快速建立起系統(tǒng)運行機制的思維模型，也能把現(xiàn)實世界的業(yè)務(wù)問題轉(zhuǎn)化為了恰當?shù)哪Ｐ桶崮校缓笥眉夹g(shù)去解決拣展。具體到前端領(lǐng)域，比如前端應(yīng)用的典型信息架構(gòu)缔逛，狀態(tài)機备埃、棧、隊列這些數(shù)據(jù)結(jié)構(gòu)在前端的應(yīng)用褐奴。
工程師按脚，還要具備良好的溝通能力，溝通能力的好壞決定了你是否能準確理解需求的本質(zhì)敦冬，是否能把自己的的設(shè)計方案清晰的展示給同事辅搬，而溝通的形式就不那么重要了，可以是書面文字脖旱，可以是白板堪遂、思維導(dǎo)圖，甚至是動畫演示萌庆。
工程師溶褪，還要具備平衡取舍能力，知道在哪些地方只需要做成践险，哪些地方需要做好猿妈，哪些地方要做絕，因為工程的要義就是取舍巍虫，在商業(yè)和技術(shù)之間尋求平衡點彭则，這往往是很多人所忽視的能力。
冰凍三尺非一日之寒垫言，成長為靠譜的前端工程師也不能一蹴而就贰剥，需要長時間的積累和沉淀，而到達這個境界之后就結(jié)束了么筷频？絕對不是蚌成，阻礙人前進的最大障礙就是他的心智，還是那句話凛捏，精進永無止境担忧。
