共 2835 字，讀完需 5 分鐘。寫(xiě)作本文的目的：構(gòu)建自己關(guān)于前端工程師成長(zhǎng)過(guò)程的認(rèn)知模型肛度，從自己的視角來(lái)分析 Programmer、Developer摘符、Enginner 的能力結(jié)構(gòu)與工程師成長(zhǎng)過(guò)程的關(guān)聯(lián)贤斜，并分享出來(lái)給大家，期望能對(duì)入門(mén)的前端同學(xué)有所借鑒和啟發(fā)逛裤。需要提前說(shuō)明的是，文中用到的工程師的不同叫法并不是要給工程師分類(lèi)或者貼標(biāo)簽猴抹，因?yàn)楣こ處煹某砷L(zhǎng)過(guò)程是連續(xù)的带族，喜歡鉆牛角尖的同學(xué)請(qǐng)自行繞路。

程序員 or 工程師

圈內(nèi)對(duì)從事軟件開(kāi)發(fā)的同學(xué)有很多叫法蟀给，如程序員（Programmer）蝙砌、開(kāi)發(fā)者（Developer）阳堕、工程師（Engineer），甚至是碼農(nóng)择克，“碼農(nóng)”是圈內(nèi)人用來(lái)自嘲的恬总，那其他幾個(gè)名詞呢？表面上看起來(lái)都是做軟件開(kāi)發(fā)肚邢，叫什么真的重要么壹堰？

不得不說(shuō)，叫什么并不重要骡湖，不論是自稱(chēng)還是他稱(chēng)贱纠，什么學(xué)歷、幾年工作經(jīng)驗(yàn)也不重要响蕴，真正重要的是人所具備的能力谆焊。那么既然名稱(chēng)不重要？為什么還要談?wù)撍忠模棵Q(chēng)的真正意義在于能讓我積極拓寬自己的視野辖试，不斷點(diǎn)亮自己的技能樹(shù)，在職業(yè)發(fā)展的道路上不斷積累劈狐、不斷提升罐孝。

工程師做事的三重境界是什么？程序員懈息、開(kāi)發(fā)者肾档、工程師這些叫法跟這三重境界又有啥關(guān)系？

第 1 重境界：把事情做成

把事情做成是公司對(duì)員工的基本要求辫继，絕大多數(shù)入門(mén)同學(xué)就處在這個(gè)境界怒见，這個(gè)境界的人可稱(chēng)為程序員（Programmer），對(duì)于 Programmer 通常需要告訴他做什么姑宽、怎么做遣耍，他所需要的是執(zhí)行力和基礎(chǔ)技能，這里的技能包括：基本的編程技能炮车，至少會(huì)一門(mén)編程語(yǔ)言舵变，對(duì)這門(mén)語(yǔ)言的熟悉程度至少能夠讓他把基本需求解決。具體到前端領(lǐng)域瘦穆，對(duì) Programmer 的要求就是需要能夠使用 JS纪隙、CSS、HTML扛或，并且熟悉編輯器绵咱、瀏覽器來(lái)完成基本需求。

以常見(jiàn)的 WEB 端統(tǒng)計(jì)為例熙兔，為了研究頁(yè)面關(guān)鍵元素的用戶(hù)行為悲伶，需要對(duì)用戶(hù)的部分交互添加事件統(tǒng)計(jì)（更常見(jiàn)的叫法是“埋點(diǎn)”）艾恼，比如單擊事件，表單提交事件麸锉，如果使用百度統(tǒng)計(jì)钠绍，在頁(yè)面中埋點(diǎn)的方法大概如下：

<a onclick="_hmt.push(['_trackEvent', 'checkout', 'click']);">購(gòu)買(mǎi)</a>

或者在 JS 中埋點(diǎn)：

// 需要發(fā)送統(tǒng)計(jì)的時(shí)候
_hmt.push(['_trackEvent', 'checkout', 'click']);

接下來(lái)由于業(yè)務(wù)需要，相同的統(tǒng)計(jì)花沉，需要往 Google Analytics 發(fā)一份柳爽，最簡(jiǎn)單粗暴的解決方案如下：

<a onclick="_hmt.push(['_trackEvent', 'checkout', 'click']);
            _gaq.push(['_trackEvent', 'checkout', 'click']);">購(gòu)買(mǎi)</a>

JS 中也需要做同樣的修改：

// 需要發(fā)送統(tǒng)計(jì)的時(shí)候
_hmt.push(['_trackEvent', 'checkout', 'click']);
_gaq.push(['_trackEvent', 'checkout', 'click']);

如果網(wǎng)站的頁(yè)面規(guī)模、統(tǒng)計(jì)事件量小主穗，變更埋點(diǎn)可能會(huì)比較輕松泻拦，但當(dāng)頁(yè)面和事件數(shù)量隨著業(yè)務(wù)發(fā)展激增，估計(jì)程序員會(huì)埋點(diǎn)埋到手抽筋了忽媒。這個(gè)時(shí)候 Programmer 會(huì)不高興争拐，很可能 Boss 也會(huì)不高興，因?yàn)槁顸c(diǎn)效率提不上來(lái)晦雨，并且容易出錯(cuò)架曹。聰明的 Programmer 會(huì)發(fā)現(xiàn)，僅僅從表面上把問(wèn)題解決貌似還不夠闹瞧。該如何破局绑雄？

第 2 重境界：把事情做好

具備什么樣的能力才能把事情做好？對(duì)基本技術(shù)的熟悉程度超過(guò)（需要超過(guò)一大截）把事情做成的需要奥邮；對(duì)于業(yè)務(wù)需求有一定的前瞻性万牺；能給出比較健壯的技術(shù)方案，能一次解決一類(lèi)問(wèn)題而不是一個(gè)問(wèn)題洽腺，知道什么樣的方案是不靠譜的脚粟，具備這些能力的人可稱(chēng)為開(kāi)發(fā)者（Developer）。

不可否認(rèn)蘸朋，Developer 是升級(jí)版的 Programmer核无，相比而言，Developer 大多數(shù)時(shí)候需要自行找到問(wèn)題的解決方案并落地實(shí)施藕坯。通俗的說(shuō)团南，面對(duì)具體的技術(shù)、業(yè)務(wù)問(wèn)題炼彪，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)單粗暴的解決方式存在什么問(wèn)題轿塔？

• 首先特愿，代碼擴(kuò)展性太差，后續(xù)如果需求方需要接入自建的統(tǒng)計(jì)勾缭，前端的工作量并沒(méi)有減少揍障，反而改起來(lái)會(huì)需要更加的小心翼翼；
• 其次俩由，直接發(fā)送統(tǒng)計(jì)是否能保障精確送達(dá)毒嫡，有沒(méi)有可能存在漏報(bào)的情況，細(xì)心的同學(xué)肯定能想到這種風(fēng)險(xiǎn)幻梯；
• 最后兜畸，前端代碼風(fēng)格，其實(shí)不太推薦在 HTML 中內(nèi)聯(lián)書(shū)寫(xiě) JS 事件碘梢，這就是臟代碼的典型例子咬摇；

Developer 會(huì)如何解決這個(gè)問(wèn)題呢？先理清楚埋點(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ù)無(wú)關(guān)在扰，而統(tǒng)計(jì)參數(shù)本身跟節(jié)點(diǎn)的關(guān)系比較緊密，動(dòng)作和參數(shù)可以解耦開(kāi)复唤。

基于這樣的認(rèn)知健田，不難設(shè)計(jì)出下面的方案，在所有需要埋點(diǎn)的地方約定參數(shù)的標(biāo)記方式佛纫，使用 data-event-* 參數(shù)標(biāo)記事件名稱(chēng)妓局、事件類(lèi)型以及額外的參數(shù)：

<a data-event-name='checkout' data-event-type='click'>購(gòu)買(mǎi)</a>

然后，在頁(yè)面級(jí)別監(jiān)聽(tīng)那些埋點(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ì)單擊事件的處理存炮，其他事件可以類(lèi)似處理
$(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)典的書(shū)享完，仔細(xì)讀高質(zhì)量的文章灼芭，注意這里面讀遠(yuǎn)比收藏重要，上哪里去找經(jīng)典的書(shū)和高質(zhì)量的文章般又？這需要建立自己的信息篩選機(jī)制彼绷；另外一方面，遇到問(wèn)題要學(xué)會(huì)去搜索茴迁，找更多的解決方案寄悯，然后比較，融會(huì)貫通堕义。

不得不承認(rèn)猜旬，從 Programmer 進(jìn)階到 Developer 需要非常多的努力和積累才行，但是精進(jìn)之路永無(wú)止境胳螟，下面說(shuō)說(shuō)第三重境界昔馋。

第 3 重境界：把事情做絕

能夠把事情做絕的人，可以稱(chēng)得上是工程師（Engineer）糖耸，那么到底怎么才算是把事情做絕秘遏？以統(tǒng)計(jì)埋點(diǎn)為例，能夠洞悉埋點(diǎn)需求的本質(zhì)嘉竟，把日志發(fā)送和埋點(diǎn)標(biāo)記解耦之后邦危，將兩者都做到極致。現(xiàn)實(shí)中埋點(diǎn)需求的來(lái)源通常是運(yùn)營(yíng)和產(chǎn)品經(jīng)理舍扰，所有的變更基本都是由他們驅(qū)動(dòng)倦蚪，如果能夠給他們提供工具管理頁(yè)面中的埋點(diǎn)標(biāo)記（思路關(guān)鍵詞：XPath、微服務(wù)边苹、瀏覽器插件陵且，細(xì)節(jié)不在本文描述），就能把工程師從這種瑣碎需求中解放出來(lái)去做更有意義的事情个束，這樣也就改變了組織中不同員工間的協(xié)作方式慕购，提高組織的效率。

想成為前端工程師茬底，要先成為工程師沪悲。工程師應(yīng)該具備怎樣的能力？要回答這個(gè)問(wèn)題阱表，我們不妨仔細(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)單說(shuō)贡珊，工程就是運(yùn)用知識(shí)去設(shè)計(jì)、創(chuàng)建涉馁、維護(hù)门岔、改進(jìn)工具、系統(tǒng)谨胞、流程和組織的過(guò)程固歪，而工程師是推動(dòng)這個(gè)過(guò)程的最主要角色。

工程師胯努，首先要具備很強(qiáng)的學(xué)習(xí)能力，能掌握完整的知識(shí)體系逢防，知識(shí)的來(lái)源并不重要叶沛，可以來(lái)自于自學(xué)，也可以來(lái)自于學(xué)校忘朝，以及生產(chǎn)實(shí)踐的總結(jié)灰署，只局限于一門(mén)編程語(yǔ)言或特定的幾個(gè)工具是遠(yuǎn)遠(yuǎn)不夠的，讓一個(gè)工程師切換到新語(yǔ)言不會(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ù)問(wèn)題轉(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ì)方案清晰的展示給同事囱皿，而溝通的形式就不那么重要了勇婴，可以是書(shū)面文字，可以是白板嘱腥、思維導(dǎo)圖耕渴，甚至是動(dòng)畫(huà)演示。

工程師齿兔，還要具備平衡取舍能力橱脸，知道在哪些地方只需要做成，哪些地方需要做好分苇，哪些地方要做絕添诉，因?yàn)楣こ痰囊x就是取舍，在商業(yè)和技術(shù)之間尋求平衡點(diǎn)医寿，這往往是很多人所忽視的能力栏赴。

冰凍三尺非一日之寒，成長(zhǎng)為靠譜的前端工程師也不能一蹴而就糟红，需要長(zhǎng)時(shí)間的積累和沉淀艾帐，而到達(dá)這個(gè)境界之后就結(jié)束了么？絕對(duì)不是盆偿，阻礙人前進(jìn)的最大障礙就是他的心智柒爸，還是那句話(huà)，精進(jìn)永無(wú)止境事扭。

One More Thing

本文作者王仕軍捎稚，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處求橄。如果你覺(jué)得本文對(duì)你有幫助今野，請(qǐng)點(diǎn)贊！如果對(duì)文中的內(nèi)容有任何疑問(wèn)罐农，歡迎留言討論条霜。想知道我接下來(lái)會(huì)寫(xiě)些什么？歡迎訂閱我的掘金專(zhuān)欄或知乎專(zhuān)欄：《前端周刊：讓你在前端領(lǐng)域跟上時(shí)代的腳步》涵亏。

Happy Hacking