前端工程師作事的三重境界：個人進階之路

本文轉載於:猿2048網站前端工程師作事的三重境界：個人進階之路

寫做本文的目的：構建本身關於前端工程師成長過程的認知模型，從本身的視角來分析 Programmer、Developer、Enginner 的能力結構與工程師成長過程的關聯，並分享出來給你們，指望能對入門的前端同窗有所借鑑和啓發。須要提早說明的是，文中用到的工程師的不一樣叫法並非要給工程師分類或者貼標籤，由於工程師的成長過程是連續的，喜歡鑽牛角尖的同窗請自行繞路。

## 程序員 or 工程師
圈內對從事軟件開發的同窗有不少叫法，如程序員（Programmer）、開發者（Developer）、工程師（Engineer），甚至是碼農，「碼農」是圈內人用來自嘲的，那其餘幾個名詞呢？表面上看起來都是作軟件開發，叫什麼真的重要麼？
不得不說，叫什麼並不重要，不管是自稱仍是他稱，什麼學歷、幾年工做經驗也不重要，真正重要的是人所具有的能力。那麼既然名稱不重要？爲何還要談論它？名稱的真正意義在於能讓我積極拓寬本身的視野，不斷點亮本身的技能樹，在職業發展的道路上不斷積累、不斷提高。
工程師作事的三重境界是什麼？程序員、開發者、工程師這些叫法跟這三重境界又有啥關係？
## 第 1 重境界：把事情作成
把事情作成是公司對員工的基本要求，絕大多數入門同窗就處在這個境界，這個境界的人可稱爲程序員（Programmer），對於 Programmer 一般須要告訴他作什麼、怎麼作，他所須要的是執行力和基礎技能，這裏的技能包括：基本的編程技能，至少會一門編程語言，對這門語言的熟悉程度至少可以讓他把基本需求解決。具體到前端領域，對 Programmer 的要求就是須要可以使用 JS、CSS、HTML，而且熟悉編輯器、瀏覽器來完成基本需求。
以常見的 WEB 端統計爲例，爲了研究頁面關鍵元素的用戶行爲，須要對用戶的部分交互添加事件統計（更常見的叫法是「埋點」），好比單擊事件，表單提交事件，若是使用百度統計，在頁面中埋點的方法大概以下：
`<a onclick="_hmt.push(['_trackEvent', 'checkout', 'click']);">購買</a>`

或者在 JS 中埋點：
`// 須要發送統計的時候_hmt.push(['_trackEvent', 'checkout', 'click']);`

接下來因爲業務須要，相同的統計，須要往 Google Analytics 發一份，最簡單粗暴的解決方案以下：`<aonclick="_hmt.push(['_trackEvent', 'checkout', 'click']); _gaq.push(['_trackEvent', 'checkout', 'click']);">購買</a>`
JS 中也須要作一樣的修改：
`// 須要發送統計的時候_hmt.push(['_trackEvent', 'checkout', 'click']);_gaq.push(['_trackEvent', 'checkout', 'click']);`

若是網站的頁面規模、統計事件量小，變動埋點可能會比較輕鬆，但當頁面和事件數量隨着業務發展激增，估計程序員會埋點埋到手抽筋了。這個時候 Programmer 會不高興，極可能 Boss 也會不高興，由於埋點效率提不上來，而且容易出錯。聰明的 Programmer 會發現，僅僅從表面上把問題解決貌似還不夠。該如何破局？（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）
## 第 2 重境界：把事情作好
具有什麼樣的能力才能把事情作好？對基本技術的熟悉程度超過（須要超過一大截）把事情作成的須要；對於業務需求有必定的前瞻性；能給出比較健壯的技術方案，能一次解決一類問題而不是一個問題，知道什麼樣的方案是不靠譜的，具有這些能力的人可稱爲開發者（Developer）。
不能否認，Developer 是升級版的 Programmer，相比而言，Developer 大多數時候須要自行找到問題的解決方案並落地實施。通俗的說，面對具體的技術、業務問題，Developer 能比 Programmer 顧及到更多的點，想到更多的方案。可是要實現這兩個「更多」，須要的是努力、時間和經驗的積累。
固然，從 Programmer 到 Developer 的進階是能夠加速的，須要壓縮本身的時間在更短的時間內作更多的事情，注意這裏不是把相同的事情重複 N 遍，若是是那樣就很容易出現 3 年工做時間半年工做經驗的尷尬。
回到上面提到的埋點方案，簡單粗暴的解決方式存在什麼問題？

- 首先，代碼擴展性太差，後續若是需求方須要接入自建的統計，前端的工做量並無減小，反而改起來會須要更加的當心翼翼；
- 其次，直接發送統計是否能保障精確送達，有沒有可能存在漏報的狀況，細心的同窗確定能想到這種風險；
- 最後，前端代碼風格，其實不太推薦在 HTML 中內聯書寫 JS 事件，這就是髒代碼的典型例子；

Developer 會如何解決這個問題呢？先理清楚埋點代碼的本質：發送統計的動做、指定統計參數，其中發送統計的動做跟須要接入的統計平臺有關，確保統計到達也跟這個動做有關，這個動做跟統計參數無關，而統計參數自己跟節點的關係比較緊密，動做和參數能夠解耦開。
基於這樣的認知，不難設計出下面的方案，在全部須要埋點的地方約定參數的標記方式，使用 data-event-* 參數標記事件名稱、事件類型以及額外的參數：
`<a data-event-name='checkout' data-event-type='click'>購買</a>`

而後，在頁面級別監聽那些埋點的節點，而且恰當的時機發送統計代碼，簡化版以下：
```
// 相同的參數發送給全部已接入的統計平臺，若是平臺不一樣，適配工做也在這裏作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) {
// 拿到事件發生的節點 const target = $(e.target);

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

// 這裏若是是連接跳轉，須要走單獨的邏輯
sendEventLog(name, 'click', param);
});
```
上面探討了從 Programmer 進階到 Developer 的方法就是積累，那麼怎麼積累？我行動的基本法則是：作出好的東西先要知道好的東西長啥樣。一方面，多讀經典的書，仔細讀高質量的文章，注意這裏面讀遠比收藏重要，上哪裏去找經典的書和高質量的文章？這須要創建本身的信息篩選機制；另一方面，遇到問題要學會去搜索，找更多的解決方案，而後比較，融會貫通。
不得不認可，從 Programmer 進階到 Developer 須要很是多的努力和積累才行，可是精進之路永無止境，下面說說第三重境界。
##第 3 重境界：把事情作絕
可以把事情作絕的人，能夠稱得上是工程師（Engineer），那麼到底怎麼纔算是把事情作絕？以統計埋點爲例，可以洞悉埋點需求的本質，把日誌發送和埋點標記解耦以後，將二者都作到極致。現實中埋點需求的來源一般是運營和產品經理，全部的變動基本都是由他們驅動，若是可以給他們提供工具管理頁面中的埋點標記（思路關鍵詞：XPath、微服務、瀏覽器插件，細節不在本文描述），就能把工程師從這種瑣碎需求中解放出來去作更有意義的事情，這樣也就改變了組織中不一樣員工間的協做方式，提升組織的效率。
想成爲前端工程師，要先成爲工程師。工程師應該具有怎樣的能力？要回答這個問題，咱們不妨仔細思考下什麼是工程，[WIKIPEDIA**](http://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Engineering)的原文以下：
> 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.

簡單說，工程就是運用知識去設計、建立、維護、改進工具、系統、流程和組織的過程，而工程師是推進這個過程的最主要角色。工程師，首先要具有很強的學習能力，能**掌握完整的知識體系**，知識的來源並不重要，能夠來自於自學，也能夠來自於學校，以及生產實踐的總結，只侷限於一門編程語言或特定的幾個工具是遠遠不夠的，讓一個工程師切換到新語言不會有什麼障礙，紮實的計算機科學基礎是基石。具體到前端領域，基本的數據結構和算法、設計模式和變成範式、網絡、JS、CSS、瀏覽器、性能、設計，軟件質量、可維護性、可擴展性，軟件工程化（構建、部署、運維、監控）。工程師，還要具有良好的抽象思惟能力，有了抽象思惟能力就可以快速創建起系統運行機制的思惟模型，也能把現實世界的業務問題轉化爲了恰當的模型，而後用技術去解決。具體到前端領域，好比前端應用的典型信息架構，狀態機、棧、隊列這些數據結構在前端的應用。工程師，還要具有良好的溝通能力，溝通能力的好壞決定了你是否能準確理解需求的本質，是否能把本身的的設計方案清晰的展現給同事，而溝通的形式就不那麼重要了，能夠是書面文字，能夠是白板、思惟導圖，甚至是動畫演示。工程師，還要具有平衡取捨能力，知道在哪些地方只須要作成，哪些地方須要作好，哪些地方要作絕，由於工程的要義就是取捨，在商業和技術之間尋求平衡點，這每每是不少人所忽視的能力。冰凍三尺非一日之寒，成長爲靠譜的前端工程師也不能一蹴而就，須要長時間的積累和沉澱，而到達這個境界以後就結束了麼？絕對不是，阻礙人前進的最大障礙就是他的心智，仍是那句話，精進永無止境。