前端工程師的進階之路

来源:https://www.cnblogs.com/laixiangran/archive/2018/04/18/8875812.html
-Advertisement-
Play Games

這篇文章收藏在筆記裡面有幾年了,原文作者無從考究了,侵刪! 最近再翻出來看,依然覺得受益匪淺。這次整理分享出來,希望對大家有所啟示。 背景 如果你是剛進入WEB前端研發領域,想試試這潭水有多深,看這篇文章吧; 如果你是做了兩三年WEB產品前端研發,迷茫找不著提高之路,看這篇文章吧; 如果你是四五年的 ...


這篇文章收藏在筆記裡面有幾年了,原文作者無從考究了,侵刪!
最近再翻出來看,依然覺得受益匪淺。這次整理分享出來,希望對大家有所啟示。

背景

如果你是剛進入WEB前端研發領域,想試試這潭水有多深,看這篇文章吧;

如果你是做了兩三年WEB產品前端研發,迷茫找不著提高之路,看這篇文章吧;

如果你是四五年的前端開發高手,沒有難題能難得住你的寂寞高手,來看這篇文章吧。

前言

所謂的天才,只不過是比平常人更快的掌握技能、完成工作罷了;只要你找到了正確的方向,並輔以足夠的時間,你一樣能夠踏上成功彼岸。

本文將WEB前端研發編程能力劃分了八個等級,每個等級都列舉出了對應的特征及破級提升之方法,希望每位在看本文的同學先準確定位自己的等級(不要以你目前能力的最高點,而是以你當前能力的中檔與之等級作對比,以免多走彎路),參考突破之法破之。

所謂的級別,只是你面對需求時的一種態度:能夠完成、能夠完美地完成、能夠超出預期地完成。以追求完美的態度加以扎實的編程功力,那就是你的編程水平。

切記心浮氣燥,級別夠了,那級別里的東西自然就懂了。悟了就是悟了,沒悟也沒關係,靜下心來,投入時間而已。

(一)入門

能夠解決一些問題的水平。有一定的基礎(比如最常見的HTML標簽及其屬性、事件、方法;最常見的CSS屬性;基礎的JavaScript編程能力),能夠完成一些簡單的WEB前端研發需求。

舉個例子:刪除一字元串中指定的字元。

var str = "www.baidu.com/?page";
str = str.replace('?page', "");
console.log(str);
str = str.substring(0, str.indexOf("/"));
console.log(str);

首先不要苛責代碼的對錯嚴謹,畢竟每個程式員都有這樣的一個過程;

其次,這兩段代碼在這個實例里沒有什麼大過錯,可能會有瑕疵,但能夠解決問題(刪除指定的字元),這就是這個級別的特征。

再舉個例子:計算系統當前是星期幾。

var str = "";
var week = new Date().getDay();
if (week === 0) {
    str = "今天是星期日";
} else if (week === 1) {
    str = "今天是星期一";
} else if (week === 2) {
    str = "今天是星期二";
} else if (week === 3) {
    str = "今天是星期三";
} else if (week === 4) {
    str = "今天是星期四";
} else if (week === 5) {
    str = "今天是星期五";
} else if (week === 6) {
    str = "今天是星期六";
}

// 或者更好一些
var str1 = "今天是星期";
var week1 = new Date().getDay();
switch (week1) {
    case 0 :
        str1 += "日";
        break;
    case 1 :
        str1 += "一";
        break;
    case 2 :
        str1 += "二";
        break;
    case 3 :
        str1 += "三";
        break;
    case 4 :
        str1 += "四";
        break;
    case 5 :
        str1 += "五";
        break;
    case 6 :
        str1 += "六";
        break;
}

console.log(str);
console.log(str1);

進階之路

將JavaScript、HTML、CSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍!只有將基礎打好,以後的路才能走的順暢。參考這些幫助文檔,力爭寫出無瑕疵的代碼。

這些編碼文檔建議不僅是在入門提高期看,在你以後每個階段破階的時候都應該看看,最基礎的東西往往也是最給力的東西,有時能夠給你帶來意想不到的收穫。

(二)登堂

能夠正確地解決問題。不管你是通過搜索網路,或者通過改造某些成品代碼(jQuery/Dojo/Ext/YUI)案例,只要能夠無錯地完成需求。

同樣以“刪除指定字元串”為例:

var str = "www.baidu.com/?page";
str = str.replace(/?page/, "");
console.log(str);

僅僅解決問題對於“登堂”階段來說已經不是問題,這個級別所給出方案不能是漏洞百出。

以上面這段代碼為例:replace方法的第一個參數雖然可以支持字元串,但最佳的類型是正則表達式。

再看看“今天是星期幾”示例:

var a = ["日", "一", "二", "三", "四", "五", "六"];
var week = new Date().getDay();
var str = "今天是星期" + a[week];
console.log(str);

對比“入門級”的代碼,不管是從代碼量、代碼效率、代碼優美性、代碼思路來說,“登堂”級的這個日期處理代碼都要優秀很多。

進階之路

這個階段雖然能夠給出正確的解題方案,但是不一定是最優秀的方案。如何才能得到最優秀的方案呢?首先就是積累各種能夠解決需求的方案,然後再驗證每個方案,在這些方案中選擇最好的一種。因此該階段的進階之路就是“行萬里路,看萬卷書”,積累各個需求的各個解決方案。

你可以扎身在專業論壇(藍色理想、無憂、CSDN)里,通讀所有的FAQ及帖子;你可以打開搜索引擎,窮舉所有的搜索結果。自己建立測試環境一一驗證這些代碼:去揣摩每段代碼的意圖,去比較每段代碼之間的差異。這兩條路可以讓你快速完成原始積累,當你再面對大多數需求時能夠說這些問題我以前做過,那你就水到渠成地晉階了。

(三)入室

最強代碼,知道所有能夠解決需求的各種方案,能夠選擇使用最優秀的方案滿足需求。這個級別基本上產品開發編程中的代碼主力。給出的一招一式,招招都是絕招。

還以上面的那個例子為例,你能說出1、2、3之間的差別,以及適用於那種環境嗎?

var str = "www.baidu.com/?page";
// 1、字元串剪裁
str.substring(0, str.indexOf("?page"));
// 2、正則表達式
str.replace(/?page/, "");
// 3、字元串分拆、合併
str.split("?page").join("");

能夠解決問題的方法會有很多,但是對於程式員來說應該選擇最優秀的。上面這段代碼從代碼量來說“正則表達式”最優秀;從代碼執行效率來說: “字元 串剪裁”法最高(Chrome中“正則表達式”效率最高),split法最次;從可擴展性上來說,“正則表達式”法最優。具體使用那種方案視具體的需求環境而定。

“入室”階段,程式員應該能夠肯定的回答:對於這個需求而言,我的代碼就是最優秀的代碼。

再以“今天是星期幾”為例,“登堂”級的代碼你敢說是最優秀的代碼了嗎?

var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay());

對比“登堂”級的示例代碼,上面這段代碼給你什麼感受?程式員追求的就是完美。“入室”級別追求的就是每一招每一式的完美無缺。

從WEB前端編程來說,通過2年左右的努力,很多人能夠達到這個水平,但是,很大一部分人的編程能力也就止步於此。或限於產品的需求單一性,或限於需求開發的時間緊迫性,或限於人的惰性,能夠完美地解決當前的需求就夠了。

由於長期處於技術平臺期,技術上得不到提高,通常這個級別的工程師會比較燥。技術上小有所成;或追求個人的突破;或追求產品差異性帶來的新鮮感;或者只是想換個心情;因此很多此級別的工程師會經常換公司。

戒驕戒躁:

  • 切勿以為自己能寫一手漂亮的代碼而自滿;
  • 切莫以為別人“尊稱”你一聲“大俠”你就以 “大俠”自居;
  • 切莫以為自己積累了一些得意的代碼就成了框架式開發。

細節決定成敗,優秀的方案並不能保證最終的成功。

進階之路

此階段進階之路就是:

  • 切勿心浮氣躁;你不再被需求牽著走,而是你牽著需求走。註重細節,註意那些當前需求里沒有明文給出的細節:代碼性能的差異、運行平臺(瀏覽器)的差異、需求的隱性擴展、代碼的向後相容等等。
  • 再通讀幾遍HTML/CSS/JavaScript幫助文檔。

我建議這個級別的工程師做一做WebTreeView控制項,要求總節點量一萬左右操作流暢,你的晉升之路就在這個控制項的編碼過程中。

(四)入微

最強解決方案。你能夠走在需求的前面,將當前需求里有的、沒有直接提出來的、現在暫時沒有但將來可能有的等等,及前端編程潛規則等各個方方面面都綜合考慮,給出最優方案。以一招勝萬招。

var str = "http://www.xxx.com/?pn=0"; // 刪除指定字元 pn=0

我將這個字元串里所可能想到的各種情況都列舉出來:

var a = [
    "http://www.xxx.com/VMpn=?pn=0", // pn= 可能出現在 ? 前
    "http://www.xxx.com/VMpn=?pn=", // URL里允許pn 值為空
    "http://www.xxx.com/VMpn=?pn=0&a=1", // URL 里可有多個欄位
    "http://www.xxx.com/VMpn=?a=1&pn=0", // 可能排在最後
    "http://www.xxx.com/VMpn=?a=1&pn=0&pn=1", // 可能有多個 pn 欄位
    "http://www.xxx.com/VMpn=?a=1&pn=0&b=2", // 可能在中間
    "http://www.xxx.com/VMpn=?a=1&pn=0&pn=1&b=1", // 可能在中間成組
    "http://www.xxx.com/VMpn=?a=1&pn=0&b=1&pn=1" // 可能零星分佈
];
var reg = /((?)(pn=[^&]*&)+(?!pn=))|(((?|&)pn=[^&]*)+$)|(&pn=[^&]*)/g;
for (var i = 0; i < a.length; i++) {
    console.log(a[i] + "n" + a[i].replace(reg, "$2"));
}

這個階段已經不再追求一招一式,對你來說不是使用什麼創新絕招解決需求,而是給出成熟穩重的方案,從根上解決問題。針對某個當前需求你的代碼可能不是最優,但是針對此類的需求你的代碼卻是最優秀的代碼。

進階之路

很多WEB前端研發工程師在做了3-4年之後就會進入一個瓶頸期:產品開發需求是小菜一碟,沒有新鮮的可以挑戰的東西;代碼開發中的稀奇的解題方法 都已經嘗試過。沒有了可挑戰的難題,失去了探索的激情,也就沒有了再上升的動力,好不容易走過“入室”級別的人又會有八九成止步於此。或轉做技術領導人, 或轉到其它的領域,或換公司。

這些人的上升之路在哪裡呢?

這個階段單單依靠技巧和數量的累積已經沒有什麼效果了,突破之路在第5層《化蝶》里會詳細說明,我建議你在這個階段末尾著重關註編程理論:面向對象/過程、代碼組織形式、編譯、代碼規範、其它的框架設計等等。

我建議這個級別的工程師做一做WebEditor控制項,不要求完整功能,但是該控制項里的模塊劃分、代碼組織、編程思想做到位,給出一個系統的解決方案。

(五)化蝶

破繭重生,這個層次關註的是編程語言本身,而不再關心產品需求。什麼是繭?產品需求就是繭。當你一招勝萬招,打遍天下需求之時,你如果還拘泥於需求開發,那就是你限於繭中而不自知。要麼就在這個繭里默默地老去,要麼就破開繭獲得新生。

還是以那個“字元串剪裁”的老例子:

function escapeReg(str) {
    return str.replace(new RegExp("([.*+?^=!:x24{}()|[\]/\\])", "g"), "\x241");
}

function delUrlQuery(url, key) {
    key = escapeReg(key);
    var reg = new RegExp("((\?)(" + key + "=[^&amp;]*&amp;)+(?!" + key + "=))|(((\?|&amp;)" + key + "=[^&amp;]*)+$)|(&amp;" + key + "=[^&amp;]*)", "g");
    return url.replace(reg, "x241")
}

// 應用實例
var str = "http://www.xxx.com/?pn=0"; // 刪除指定字元 pn=0
delUrlQuery(str, "pn");

這段代碼相對於層次4《入微》有什麼區別嗎?從代碼實現上來說沒有太大的區別,但是從思路上來說卻有著本質的區別:

  1. 不再是就事論事,頭疼醫頭,而是把一類問題抽象理論化,一招破萬招;
  2. 有封裝的概念,不再是每次從零開始,而是站在半山腰開始爬。

在WEB前端研發隊伍里也有很大一部分人《入室》層次時就自我感覺良好,直接跨躍到《化蝶》,積累自己的代碼庫,抽象化問題。但沒有基礎,缺少強大 的後勁,即使能夠破繭也經受不了風吹雨打。一份不成熟的架構設計對團隊開髮帶來的危害遠大於它帶來的好處,這種例子在業界屢見不鮮。不要拔苗助長,不要不 會走就想著跑,夯實基礎,水到渠成地成長,厚積薄發,強力地破繭而出。

進階之路

你已經從原始積累,到厚積薄發,到破繭而出之後,你所關註的應該不再是一招一式、一個項目、一個模塊,而應該是一種思路,一種理論。你可以做以下幾 個步驟以突破到更高層次:

  • 再仔細看幾遍HTML/CSS/JavaScript介面幫助文檔;
  • 選擇一門強語言(C++/C#/Java等)觀察理解這些語 言的組織結構,語言設計;
  • 看看原型鏈,鏈式語法編程,泛型,介面編程,DOM遙控器等等;
  • 仔細閱讀成熟的WEB前端開發框架的設計文檔,看他們為什麼要這樣設計。

(六)大俠

這裡所說的大俠,不是大家互相吹捧的“大俠”,而是實至名歸的高手。這個級別的人完全有能力寫出不差於 Bindows/jQuery/Ext/YUI/Dojo 的同等級別規模的前端開發框架。應用成熟的開發框架指導、解決問題。

// 庫文件 /mz/string/escapeReg.js
mz.string.escapeReg = function (str) {
    return str.replace(new RegExp("([.*+?^=!:x24{}()|[\]/\\])", "g"), "\x241");
};

// 庫文件 /mz/url/delQuery.js
/// include mz.string.escapeReg;
mz.url.delQuery = function (url, key) {
    key = mz.string.escapeReg(key);
    var reg = new RegExp("((\?)(" + key + "=[^&amp;]*&amp;)+(?!" + key + "=))|(((\?|&amp;)" + key + "=[^&amp;]*)+$)|(&amp;" + key + "=[^&amp;]*)", "g");
    return url.replace(reg, "x241");
};
// 應用實例 
/// include mz.url.delQuery;
var str = "http://www.xxx.com/?pn=0"; // 刪除指定字元 pn=0
mz.url.delQuery(str, "pn");

自成體系,有基礎,也有理論高度。知道為什麼這樣設計,也知道什麼樣的設計最好。比如這個例子可以有這樣的封裝:

// 庫文件 /mz/url/delQuery.js 
/// include mz.string.escapeReg;
String.prototype.delQuery = function (key) {
    key = mz.string.escapeReg(key);
    var reg = new RegExp("((\?)(" + key + "=[^&amp;]*&amp;)+(?!" + key + "=))|(((\?|&amp;)" + key + "=[^&amp;]*)+$)|(&amp;" + key + "=[^&amp;]*)", "g");
    return this.replace(reg, "x241");
};

// 應用實例
/// include mz.url.delQuery;
var str = "http://www.xxx.com/?pn=0"; // 刪除指定字元 pn=0
str.delQuery("pn");

而為什麼不採用下麵的那種封裝呢?經過了《知微》和《化蝶》你就懂了。

進階出路

道法自然,從根上去尋找突破的契機。你可以研讀HTML解析引擎設計與實現,JS解析引擎設計與實現,其它語言的代碼解析與編譯實現等等。
或者出些書。低級別的人寫的書要麼是一大抄,空無一物;要麼是害人。

(七)宗師

這個級別的人已然到了無招勝有招的境界。項目開發中的難題?沒有難題!運行平臺的差異?從根本上搞定!代碼規範、開發模式,早已經被拋在身後。這個級別的人已經不再關註於某個前端開發框架,而是應對具體的環境給出最佳的理論指導。

這個級別的人所註意的應該是以最合理的系統架構引領著整個團隊的進步,在什麼樣的場景下該用什麼樣的架構設計。3個、10個、50個、100個人的團隊最應該用哪種模式?等你到了宗師級別,你再來回答吧。

進階出路

每一個宗師就是一個高山,就是一個領域里的神,但是你僅滿足於在一群比你弱的群體展現你的強大嗎?如果還你是止步原地,那總會有人乘著飛機、宇宙飛船從你的頭領掠過,高處不勝寒!
要突破這片領域,那就必須跳出這片領域。要想突破WEB前端研發的宗師級,那就跳出WEB前端吧,上面還有WEB開發。即使你是WEB前端的宗師, 但沒有快速的數據響應,沒有高速的網路架構,沒有優美的系統支持,你又能如何?所以突破之路就是把目光投到整條WEB開發的鏈條中去。

(八)飛升

其實嚴格來說,飛升已經不是原領域的範圍了。在WEB研發領域,對於這個層次的有一個很好聽的稱謂:架構師。當然那些“偽架構師”另當別論。

總結

一法通,萬法通。在其它的技術領域,也可以按照《入門》《登堂》《入室》《入微》《化蝶》《大俠》《宗師》來劃分等級;一樣也可以按照我這裡所寫的每個級別的【進階之路】來快速提升。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • box-sizing屬性用來定義元素的width和height所表示的區域,該屬性一般有三種值:content-box、border-box、inherit。 其中inherit表示box-sizing的值應該從父元素繼承。 content-box和border-box的主要區別就是元素的width ...
  • HTML5與CSS3設計模式是一部全面講述用HTML5和CSS3設計網頁的教程。書中含350個即時可用的模式 (HTML5和CSS3代碼片段),直接複製粘貼即可使用,更可以組合起來構建出無窮的解決方案。每個模式都可在所有主流Web瀏覽器中可靠地運行。 《HTML5與CSS3設計模式》系統地介紹了CS ...
  • 《HTML完全使用詳解》根據網頁製作的實際特點和目前市場需要,全面系統地介紹了最新的HTML4.01。豐富的實例貫穿全書,能幫助您全面掌握HTML,而且本書所有實例均可直接修改使用,可以提高您的工作效率。 HTML完全使用詳解 目錄: 第1章 初識HTML 1.1 HTML簡介 1.1.1 WWW和 ...
  • Sass和Compass設計師指南是《響應式Web設計:HTML5和CSS3實戰》作者Ben Frain的又一力作。作者通過豐富、完整的案例,循序漸進地展示了Sass和Compass的使用方法。既使不懂編程的設計師讀完本書也能輕鬆生成跨瀏覽器的、易於維護的CSS代碼,並學會編寫media query ...
  • 閑來無事,用js寫了一個調用攝像頭的demo,並用canvas顯示保存。這個功能很實用,比如上傳用戶的頭像,即時拍照及時上傳。 Html: JavaScript: 總結:上面這個Demo主要用到瀏覽器的攝像頭組件,然後再將圖片源賦給canvas。其中遇到一個坑:代碼需要托管到伺服器端,即在客戶端訪問 ...
  • HTML與CSS入門經典(第9版)是經典暢銷圖書《HTML與CSS入門經典》的最新版本,與過去的版本相同,本書採用直觀、循序漸進的方法,為讀者講解使用HTML5與CSS3設計、創建並維護世界級Web站點的過程,以方便讀者掌握。 HTML與CSS入門經典(第9版)分為24章,其涵蓋的內容有理解Web的 ...
  • 沒辦法。前端遇到多語言問題。18禁看了眼就算了。還是自己動手吧。 文件結構 + js/ - lng.js + languages/ - zh-cn.js - en-us.js 文件解析: lng.js 語言切換對象。對html文檔中的 lng ,lng-value, lng-placeholder  ...
  • 這一節繼續深入Router模塊,首先從最常用的use開始。 router.use 方法源碼如下: 前半部分十分熟悉,根本就是app.use的翻版。 當然,最後遍歷中間件函數處理的時候就不一樣了,引入了新的本地模塊Layer。 Layer 不太理解這個層的意義,無論是app.use還是router.u ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...