WEB前端研發工程師編程能力成長之路

来源:http://www.cnblogs.com/qianduantuanzhang/archive/2017/11/02/7774248.html
-Advertisement-
Play Games

【背景】 如果你是剛進入WEB前端研發領域,想試試這潭水有多深,看這篇文章吧; 如果你是做了兩三年WEB產品前端研發,迷茫找不著提高之路,看這篇文章吧; 如果你是四五年的前端開發高手,沒有難題能難得住你的寂寞高手,來看這篇文章吧; WEB前端研發工程師,在國內是一個朝陽職業,自07-08年正式有這個 ...


【背景】
  如果你是剛進入WEB前端研發領域,想試試這潭水有多深,看這篇文章吧;
  如果你是做了兩三年WEB產品前端研發,迷茫找不著提高之路,看這篇文章吧;
  如果你是四五年的前端開發高手,沒有難題能難得住你的寂寞高手,來看這篇文章吧;
  WEB前端研發工程師,在國內是一個朝陽職業,自07-08年正式有這個職業以來,也不過三四年的時間。這個領域沒有學校的正規教育,沒有行內成體系的理論指引,幾乎所有從事這個職業的人都是靠自己自學成才。自學成才,一條艱辛的坎坷路,我也是這樣一路走來。從2002年開始接觸WEB前端研發至今已然有了9個年頭,如今再迴首,期間的走了很多彎路。推已及人,如果能讓那些後來者少走些彎路,辛甚辛甚!
  【前言】
  所謂的天才,只不過是比平常人更快的掌握技能、完成工作罷了;只要你找到了正確的方向,並輔以足夠的時間,你一樣能夠踏上成功彼岸。
  本文將WEB前端研發編程能力劃分了八個等級,每個等級都列舉出了對應的特征及破級提升之方法,希望每位在看本文的同學先準確定位自己的等級(不要以你目前能力的最高點,而是以你當前能力的中檔與之等級作對比,以免多走彎路),參考突破之法破之。
  所謂的級別,只是你面對需求時的一種態度:能夠完成、能夠完美地完成、能夠超出預期地完成。以追求完美的態度加以扎實的編程功力,那就是你的編程水平。
  切記心浮氣燥,級別夠了,那級別里的東西自然就懂了。悟了就是悟了,沒悟也沒關係,靜下心來,投入時間而已。
  一.【入門】
  能夠解決一些問題的水平。有一定的基礎(比如最常見的HTML標簽及其屬性、事件、方法;最常見的CSS屬性;基礎的JavaScript編程能力),能夠完成一些簡單的WEB前端研發需求。
  舉個例子:刪除一字元串中指定的字元。
var str="www.baidu.com/?page";
str=str.replace('?page',"");
alert(str);
str=str.substring(0,str.indexOf("/"));
alert(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 week = new Date().getDay();
switch (week) {
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;
}
alert(str);
alert(str1);
入門”階段是每個程式員的必經之路,只要“入門”,你就上路了。所謂“師傅領進門,修行靠個人”,有了這個“入門”的基礎,自己就可以摸索著前進了。
  【進階之路】
將JavaScript、HTML、CSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍!只有將基礎打好,以後的路才能走的順暢。參考這些幫助文檔,力爭寫出無瑕疵的代碼。
  這些編碼文檔建議不僅是在入門提高期看,在你以後每個階段破階的時候都應該看看,最基礎的東西往往也是最給力的東西,有時能夠給你帶來意想不到的收穫。
  二.【登堂】
能夠正確地解決問題。不管你是通過搜索網路,或者通過改造某些成品代碼(jQuery/Dojo/Ext/YUI)案例,只要能夠無錯地完成需求。
  同樣以上面的那段“字元串剪裁”代碼為例:
var str="www.baidu.com/?page";
str=str.replace(/?page/,"");
alert(str);
僅僅解決問題對於“登堂”階段來說已經不是問題,這個級別所給出方案不能是漏洞百出。以上面這段代碼為例:replace方法的第一個參數雖然可以支持字元串,但最佳的類型是正則表達式;
var a = new Array("日", "一", "二", "三", "四", "五", "六");
var week = new Date().getDay();
var str = "今天是星期"+ a[week];
alert(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年左右的努力,很多人能夠達到這個水平,但是,很大一部分人的編程能力也就止步於此。或限於產品的需求單一性,或限於需求開發的時間緊迫性,或限於人的惰性,能夠完美地解決當前的需求就夠了。
  由於長期處於技術平臺期,技術上得不到提高,通常這個級別的工程師會比較燥。技術上小有所成;或追求個人的突破;或追求產品差異性帶來的新鮮感;或者只是想換個心情;因此很多此級別的工程師會經常換公司。
  戒驕戒躁:
  切勿以為自己能寫一手漂亮的代碼而自滿;
  切莫以為別人“尊稱”你一聲“大俠”你就以“大俠”自居;
  切莫以為自己積累了一些得意的代碼就成了框架式開發。
  細節決定成敗,優秀的方案並不能保證最終的成功。還以“刪除指定字元串”為例,原始字元串從格式上來看應該是了個URL鏈接,在去除“pn=0”之後,最末尾處留了一個尾巴“?”;如果原始字元串是“http://www.xxx.com/?pn=0&a=1”,去除“pn=0”之後 ? 和 & 兩個符號緊貼一起,這更是明顯的bug。
  【進階之路】
  此階段進階之路就是:切勿心浮氣躁;你不再被需求牽著走,而是你牽著需求走。註重細節,註意那些當前需求里沒有明文給出的細節:代碼性能的差異、運行平臺(瀏覽器)的差異、需求的隱性擴展、代碼的向後相容等等。(web前端學習交流群:328058344 禁止閑聊,非喜勿進!)

再通讀幾遍HTML/CSS/JavaScript幫助文檔。
  我建議這個級別的工程師做一做WebTreeView控制項,要求總節點量一萬左右操作流暢,你的晉升之路就在這個控制項的編碼過程中。


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

-Advertisement-
Play Games
更多相關文章
  • 概念 執行環境(Execution context,簡稱EC)或執行上下文對象(後面統一用執行上下文表示),它定義了變數或者函數有權訪問的其他數據,決定了他們各自的行為。是不是有點不好理解,那我先簡單翻譯下: js代碼執行時所在的環境。繼續後面 在JavaScript中執行環境分三種: 執行上下文棧 ...
  • ES6 強制開啟嚴格模式 作用域 var 聲明局部變數,for/if花括弧中定義的變數在花括弧外也可訪問 let 聲明的變數為塊作用域,變數不可重覆定義 const 聲明常量,塊作用域,聲明時必須賦值,不可修改 解構賦值 使用場景 變數交換 獲取多個函數值 獲取多個函數返回值 對象解構賦值 獲取js ...
  • 實現效果: 實現原理: 技術棧: javascript+jQuery+html+css 實現步驟: // 0. 獲取元素 // 1. 滑鼠放置到輪播圖上,顯示兩側的控制按鈕,移開後隱藏 // 2. 為兩側控制按鈕綁定事件(調用同一個方法,只有一個參數,true為正向旋轉,false為反向旋轉) 實現 ...
  • print() 方法用於列印當前視窗的內容,支持部分或者整個網頁列印。 調用 print() 方法所引發的行為就像用戶單擊瀏覽器的列印按鈕。通常,這會產生一個對話框,讓用戶可以取消或定製列印請求。 win10下測試ie11、chrome、firefox、360、edge 都可以成功去掉頁眉頁腳; ...
  • 哎哎 1、滑鼠移進網頁里,不見了= = 2、簡單的文字模糊效果 3、多重邊框 4、實時編輯CSS 5、CSS中簡單運算 6、border-radius 因為基本上很多人都是這麼用的: 稍微高端一點的是這樣的: v v 然而,終極黑科技是這樣用的: border-radius 它可以賦8個值:斜線前面 ...
  • SVG作為時下比較新穎的技術標準,已經建立了很多基於SVG的前端項目。由於SVG在繪製路徑上非常靈活,我們將很多網頁上的元素使用SVG來繪製而成,有各種人物、小圖標、小動畫等等。今天我們收集了18個非常新奇有趣的SVG繪製動畫,這些動畫大部分都是使用SVG結合一定的CSS3特性實現而成,效果讓人大為 ...
  • localStorage 本地存儲 、對象、存數據 、取數據 存儲的數據量在20M左右 localStorage 是window下麵的屬性,用的時候可以省略window 數據只能存儲字元串類型的 localStorage沒有過期時間,只要不刪除就永遠存在 同一個瀏覽器的不同視窗數據可以通用 不同的瀏 ...
  • 引言 JavaScript不區分整數值和浮點數值,全部使用浮點數值表示。當一個數字直接出現在JavaScript程式中,我們稱之為數字直接量(numeric litertal)。JavaScript支持多種格式的數字直接量。 整型直接量 在JavaScript程式中,用一個程式序列表示一個十進位整數 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...