寫作本文的目的：構(gòu)建自己關(guān)于前端工程師成長(zhǎng)過程的認(rèn)知模型串慰，從自己的視角來分析 Programmer、Developer嗦明、Enginner 的能力結(jié)構(gòu)與工程師成長(zhǎng)過程的關(guān)聯(lián)椭更，并分享出來給大家，期望能對(duì)入門的前端同學(xué)有所借鑒和啟發(fā)饶深。需要提前說明的是餐曹，文中用到的工程師的不同叫法并不是要給工程師分類或者貼標(biāo)簽，因?yàn)楣こ處煹某砷L(zhǎng)過程是連續(xù)的敌厘，喜歡鉆牛角尖的同學(xué)請(qǐng)自行繞路台猴。

程序員 or 工程師

圈內(nèi)對(duì)從事軟件開發(fā)的同學(xué)有很多叫法，如程序員（Programmer）俱两、開發(fā)者（Developer）饱狂、工程師（Engineer），甚至是碼農(nóng)锋华，“碼農(nóng)”是圈內(nèi)人用來自嘲的嗡官，那其他幾個(gè)名詞呢箭窜？表面上看起來都是做軟件開發(fā)毯焕，叫什么真的重要么？
不得不說，叫什么并不重要纳猫，不論是自稱還是他稱婆咸，什么學(xué)歷、幾年工作經(jīng)驗(yàn)也不重要芜辕，真正重要的是人所具備的能力尚骄。那么既然名稱不重要？為什么還要談?wù)撍中棵Q的真正意義在于能讓我積極拓寬自己的視野倔丈，不斷點(diǎn)亮自己的技能樹，在職業(yè)發(fā)展的道路上不斷積累状蜗、不斷提升需五。
工程師做事的三重境界是什么？程序員轧坎、開發(fā)者宏邮、工程師這些叫法跟這三重境界又有啥關(guān)系？

第 1 重境界：把事情做成

把事情做成是公司對(duì)員工的基本要求缸血，絕大多數(shù)入門同學(xué)就處在這個(gè)境界蜜氨，這個(gè)境界的人可稱為程序員（Programmer），對(duì)于 Programmer 通常需要告訴他做什么捎泻、怎么做飒炎，他所需要的是執(zhí)行力和基礎(chǔ)技能，這里的技能包括：基本的編程技能笆豁，至少會(huì)一門編程語言厌丑，對(duì)這門語言的熟悉程度至少能夠讓他把基本需求解決。具體到前端領(lǐng)域渔呵，對(duì) Programmer 的要求就是需要能夠使用 JS怒竿、CSS、HTML扩氢，并且熟悉編輯器耕驰、瀏覽器來完成基本需求。
以常見的 WEB 端統(tǒng)計(jì)為例录豺，為了研究頁面關(guān)鍵元素的用戶行為朦肘，需要對(duì)用戶的部分交互添加事件統(tǒng)計(jì)（更常見的叫法是“埋點(diǎn)”），比如單擊事件双饥，表單提交事件媒抠，如果使用百度統(tǒng)計(jì)，在頁面中埋點(diǎn)的方法大概如下：
<a onclick="_hmt.push(['_trackEvent', 'checkout', 'click']);">購買</a>

或者在 JS 中埋點(diǎn)：
// 需要發(fā)送統(tǒng)計(jì)的時(shí)候_hmt.push(['_trackEvent', 'checkout', 'click']);

接下來由于業(yè)務(wù)需要咏花，相同的統(tǒng)計(jì)趴生，需要往 Google Analytics 發(fā)一份阀趴，最簡(jiǎn)單粗暴的解決方案如下：<aonclick="_hmt.push(['_trackEvent', 'checkout', 'click']); _gaq.push(['_trackEvent', 'checkout', 'click']);">購買</a>
JS 中也需要做同樣的修改：
// 需要發(fā)送統(tǒng)計(jì)的時(shí)候_hmt.push(['_trackEvent', 'checkout', 'click']);_gaq.push(['_trackEvent', 'checkout', 'click']);

如果網(wǎng)站的頁面規(guī)模、統(tǒng)計(jì)事件量小苍匆，變更埋點(diǎn)可能會(huì)比較輕松刘急，但當(dāng)頁面和事件數(shù)量隨著業(yè)務(wù)發(fā)展激增，估計(jì)程序員會(huì)埋點(diǎn)埋到手抽筋了浸踩。這個(gè)時(shí)候 Programmer 會(huì)不高興叔汁，很可能 Boss 也會(huì)不高興，因?yàn)槁顸c(diǎn)效率提不上來检碗，并且容易出錯(cuò)据块。聰明的 Programmer 會(huì)發(fā)現(xiàn)，僅僅從表面上把問題解決貌似還不夠折剃。該如何破局瑰钮？（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)Ｎ⑹弧）

第 2 重境界：把事情做好

具備什么樣的能力才能把事情做好浪谴？對(duì)基本技術(shù)的熟悉程度超過（需要超過一大截）把事情做成的需要；對(duì)于業(yè)務(wù)需求有一定的前瞻性因苹；能給出比較健壯的技術(shù)方案苟耻，能一次解決一類問題而不是一個(gè)問題，知道什么樣的方案是不靠譜的扶檐，具備這些能力的人可稱為開發(fā)者（Developer）凶杖。
不可否認(rèn)，Developer 是升級(jí)版的 Programmer款筑，相比而言智蝠，Developer 大多數(shù)時(shí)候需要自行找到問題的解決方案并落地實(shí)施。通俗的說奈梳，面對(duì)具體的技術(shù)杈湾、業(yè)務(wù)問題，Developer 能比 Programmer 顧及到更多的點(diǎn)攘须，想到更多的方案漆撞。但是要實(shí)現(xiàn)這兩個(gè)“更多”，需要的是努力于宙、時(shí)間和經(jīng)驗(yàn)的積累浮驳。
當(dāng)然，從 Programmer 到 Developer 的進(jìn)階是可以加速的捞魁，需要壓縮自己的時(shí)間在更短的時(shí)間內(nèi)做更多的事情至会，注意這里不是把相同的事情重復(fù) N 遍，如果是那樣就很容易出現(xiàn) 3 年工作時(shí)間半年工作經(jīng)驗(yàn)的尷尬谱俭。
回到上面提到的埋點(diǎn)方案奉件，簡(jiǎn)單粗暴的解決方式存在什么問題宵蛀？

• 首先，代碼擴(kuò)展性太差瓶蚂，后續(xù)如果需求方需要接入自建的統(tǒng)計(jì)，前端的工作量并沒有減少宣吱，反而改起來會(huì)需要更加的小心翼翼窃这；
• 其次，直接發(fā)送統(tǒng)計(jì)是否能保障精確送達(dá)征候，有沒有可能存在漏報(bào)的情況杭攻，細(xì)心的同學(xué)肯定能想到這種風(fēng)險(xiǎn)；
• 最后疤坝，前端代碼風(fēng)格兆解，其實(shí)不太推薦在 HTML 中內(nèi)聯(lián)書寫 JS 事件缘厢，這就是臟代碼的典型例子乱投；

Developer 會(huì)如何解決這個(gè)問題呢哎榴？先理清楚埋點(diǎn)代碼的本質(zhì)：發(fā)送統(tǒng)計(jì)的動(dòng)作荠诬、指定統(tǒng)計(jì)參數(shù)汁尺，其中發(fā)送統(tǒng)計(jì)的動(dòng)作跟需要接入的統(tǒng)計(jì)平臺(tái)有關(guān)创淡，確保統(tǒng)計(jì)到達(dá)也跟這個(gè)動(dòng)作有關(guān)蔓腐，這個(gè)動(dòng)作跟統(tǒng)計(jì)參數(shù)無關(guān)灌砖，而統(tǒng)計(jì)參數(shù)本身跟節(jié)點(diǎn)的關(guān)系比較緊密望侈，動(dòng)作和參數(shù)可以解耦開印蔬。
基于這樣的認(rèn)知，不難設(shè)計(jì)出下面的方案脱衙，在所有需要埋點(diǎn)的地方約定參數(shù)的標(biāo)記方式侥猬，使用 data-event-* 參數(shù)標(biāo)記事件名稱、事件類型以及額外的參數(shù)：
<a data-event-name='checkout' data-event-type='click'>購買</a>

然后捐韩，在頁面級(jí)別監(jiān)聽那些埋點(diǎn)的節(jié)點(diǎn)退唠，并且恰當(dāng)?shù)臅r(shí)機(jī)發(fā)送統(tǒng)計(jì)代碼，簡(jiǎn)化版如下：

// 相同的參數(shù)發(fā)送給所有已接入的統(tǒng)計(jì)平臺(tái)荤胁，如果平臺(tái)不同铜邮，適配工作也在這里做const sendEventLog = (name, type, param) => { 
_hmt.push(['_trackEvent', name, 'click', param]); 
_gaq.push(['_trackEvent', name, 'click', param]);
};

// 針對(duì)單擊事件的處理，其他事件可以類似處理
$(body).on('click', '[data-event-name][data-event-type="click"]', function (e) {
 // 拿到事件發(fā)生的節(jié)點(diǎn) const target = $(e.target); 

// 獲取事件屬性
 const name = target.attr('data-event-name'); 
const param = target.attr('data-event-param') || ''; 
if (!name) {
 return; 
} 

// 這里如果是鏈接跳轉(zhuǎn)寨蹋，需要走單獨(dú)的邏輯 
sendEventLog(name, 'click', param);
});

上面探討了從 Programmer 進(jìn)階到 Developer 的方法就是積累松蒜，那么怎么積累？我行動(dòng)的基本法則是：做出好的東西先要知道好的東西長(zhǎng)啥樣已旧。一方面秸苗，多讀經(jīng)典的書，仔細(xì)讀高質(zhì)量的文章运褪，注意這里面讀遠(yuǎn)比收藏重要惊楼，上哪里去找經(jīng)典的書和高質(zhì)量的文章玖瘸？這需要建立自己的信息篩選機(jī)制；另外一方面檀咙，遇到問題要學(xué)會(huì)去搜索雅倒，找更多的解決方案，然后比較弧可，融會(huì)貫通蔑匣。
不得不承認(rèn)，從 Programmer 進(jìn)階到 Developer 需要非常多的努力和積累才行棕诵，但是精進(jìn)之路永無止境裁良，下面說說第三重境界。

第 3 重境界：把事情做絕

能夠把事情做絕的人校套，可以稱得上是工程師（Engineer）价脾，那么到底怎么才算是把事情做絕？以統(tǒng)計(jì)埋點(diǎn)為例笛匙，能夠洞悉埋點(diǎn)需求的本質(zhì)侨把，把日志發(fā)送和埋點(diǎn)標(biāo)記解耦之后，將兩者都做到極致∶盟铮現(xiàn)實(shí)中埋點(diǎn)需求的來源通常是運(yùn)營和產(chǎn)品經(jīng)理座硕，所有的變更基本都是由他們驅(qū)動(dòng)，如果能夠給他們提供工具管理頁面中的埋點(diǎn)標(biāo)記（思路關(guān)鍵詞：XPath涕蜂、微服務(wù)华匾、瀏覽器插件，細(xì)節(jié)不在本文描述）机隙，就能把工程師從這種瑣碎需求中解放出來去做更有意義的事情蜘拉，這樣也就改變了組織中不同員工間的協(xié)作方式，提高組織的效率有鹿。
想成為前端工程師旭旭，要先成為工程師。工程師應(yīng)該具備怎樣的能力葱跋？要回答這個(gè)問題持寄，我們不妨仔細(xì)思考下什么是工程，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.

簡(jiǎn)單說娱俺，工程就是運(yùn)用知識(shí)去設(shè)計(jì)稍味、創(chuàng)建、維護(hù)荠卷、改進(jìn)工具模庐、系統(tǒng)、流程和組織的過程油宜，而工程師是推動(dòng)這個(gè)過程的最主要角色掂碱。
工程師怜姿，首先要具備很強(qiáng)的學(xué)習(xí)能力，能掌握完整的知識(shí)體系疼燥，知識(shí)的來源并不重要沧卢，可以來自于自學(xué)，也可以來自于學(xué)校醉者，以及生產(chǎn)實(shí)踐的總結(jié)但狭，只局限于一門編程語言或特定的幾個(gè)工具是遠(yuǎn)遠(yuǎn)不夠的，讓一個(gè)工程師切換到新語言不會(huì)有什么障礙湃交，扎實(shí)的計(jì)算機(jī)科學(xué)基礎(chǔ)是基石熟空。具體到前端領(lǐng)域藤巢，基本的數(shù)據(jù)結(jié)構(gòu)和算法搞莺、設(shè)計(jì)模式和變成范式、網(wǎng)絡(luò)掂咒、JS才沧、CSS、瀏覽器绍刮、性能温圆、設(shè)計(jì)，軟件質(zhì)量孩革、可維護(hù)性岁歉、可擴(kuò)展性，軟件工程化（構(gòu)建膝蜈、部署锅移、運(yùn)維、監(jiān)控）饱搏。
工程師非剃，還要具備良好的抽象思維能力，有了抽象思維能力就能夠快速建立起系統(tǒng)運(yùn)行機(jī)制的思維模型推沸，也能把現(xiàn)實(shí)世界的業(yè)務(wù)問題轉(zhuǎn)化為了恰當(dāng)?shù)哪Ｐ捅刚溃缓笥眉夹g(shù)去解決。具體到前端領(lǐng)域鬓催，比如前端應(yīng)用的典型信息架構(gòu)肺素，狀態(tài)機(jī)、棧宇驾、隊(duì)列這些數(shù)據(jù)結(jié)構(gòu)在前端的應(yīng)用压怠。
工程師，還要具備良好的溝通能力飞苇，溝通能力的好壞決定了你是否能準(zhǔn)確理解需求的本質(zhì)菌瘫，是否能把自己的的設(shè)計(jì)方案清晰的展示給同事蜗顽，而溝通的形式就不那么重要了，可以是書面文字雨让，可以是白板雇盖、思維導(dǎo)圖，甚至是動(dòng)畫演示栖忠。
工程師崔挖，還要具備平衡取舍能力，知道在哪些地方只需要做成庵寞，哪些地方需要做好狸相，哪些地方要做絕，因?yàn)楣こ痰囊x就是取舍捐川，在商業(yè)和技術(shù)之間尋求平衡點(diǎn)脓鹃，這往往是很多人所忽視的能力。
冰凍三尺非一日之寒古沥，成長(zhǎng)為靠譜的前端工程師也不能一蹴而就瘸右，需要長(zhǎng)時(shí)間的積累和沉淀，而到達(dá)這個(gè)境界之后就結(jié)束了么岩齿？絕對(duì)不是太颤，阻礙人前進(jìn)的最大障礙就是他的心智，還是那句話盹沈，精進(jìn)永無止境龄章。

我有一個(gè)前端學(xué)習(xí)交流QQ群：328058344 如果你在學(xué)習(xí)前端的過程中遇到什么問題，歡迎來我的QQ群提問乞封，群里每天還會(huì)更新一些學(xué)習(xí)資源做裙。禁止閑聊，非喜勿進(jìn)歌亲。