十年工作經驗的前端高級工程師講解，如何規劃自己的職業生涯

来源:https://www.cnblogs.com/coderhf/archive/2020/05/14/12889497.html
-Advertisement-
Play Games

前端是什麼 工作流程為從UI處得到原型圖或者效果圖，在項目（網站、微信公眾號、小程式、WEBAPP）中還原圖片效果，然後與後臺進行各種數據交互。 在項目中充當一號背鍋俠，項目出現問題第一個收到傳喚的人。一個不受UI、後臺待見，甚至不受協同開發的其他前端待見的崗位。 前端， 一個讓我沉迷的崗位 前端， ...


前端是什麼

工作流程為從UI處得到原型圖或者效果圖，在項目（網站、微信公眾號、小程式、WEBAPP）中還原圖片效果，然後與後臺進行各種數據交互。

在項目中充當一號背鍋俠，項目出現問題第一個收到傳喚的人。一個不受UI、後臺待見，甚至不受協同開發的其他前端待見的崗位。

前端， 一個讓我沉迷的崗位 前端， 一個將一張張UI效果圖變成一個個生動的項目的崗位 一個將冰冷的後臺數據轉換為有趣的視覺享受的崗位

我感覺目前的前端市場整體還是處於迅速發展期，市場對於前端的需求也一直比較大。

但是前端存在一些比較畸形的地方，門檻低，隨便培訓上兩個月就可以去應聘前端工程師，而培訓之前大家從事的崗位是各式各樣的，可能和電腦並沒有太大關係，這就導致了要想進一步的提升自己比較困難。

所以市面上有很多這樣的前端，培訓出身，反覆將一個技術在項目中使用，做到了某種技術的熟練，但是對於新技術的接受能力十分弱。

現在市場對於中高級的前端工程師需求更加迫切，所以入了前端的門，就需要不斷的提升自己，無論你是學院派，還是培訓派，還是自學派，都應該具有強烈的學習意識。

一個項目的起源來自於甲方，可能是你的老闆或者你的客戶，他們會提出需求，給你們描繪出一個世界。

這個抽象的世界會由UI變成一張張實圖，交給你。而填充這個世界的數據也有由後臺為你提供好。而你需要做的，就是在獲取到這些之後將他們變成現實。

在這之前，你獲取到需求之後，你首先應該要做的事情就是-項目分析及項目前期準備。

項目前期準備

如何分析項目併進行前期準備，給大家分享一些經驗：

  • 獲取到需求之後，首先確定頁面，比如首頁、登錄/註冊、XX活動、XX詳情、XX介紹等等，往往一個項目可能由幾十個頁面組成。確認頁面之後對頁面功能進行分析； 比如首頁，首頁存在輪播、導航、分類、定位、列表、推薦等等功能。組後在確定功能使用的技術，如輪播，是使用第三方插件，還是自己編寫。並將以上內容整理成為一個三級列表。如下圖

  • 根據需求確定技術選型，確定代碼對於瀏覽器的版本相容，決定使用什麼開發 IDE，使用什麼框架，使用哪些插件。

  • 進行開發前期準備工作，如：第三方插件的瞭解學習（如：表格插件），某個功能模塊的處理（如：輪播），全局調用模塊的封裝（如：交互）

img

同期進行的項目，在你做完這些準備工作的時候，UI及後臺應該也做完了相對應的工作。

你拿到 UI 效果圖及後臺 API 文檔之後，應該仔細核實，看其中是否存在問題。

與 UI 核實具體效果，因為一張圖片，UI 表達的和你理解的可能存在誤差，為了避免問題發生，在工作開展之前先需要和 UI 進行樣式的核實。

核實完樣式之後應當仔細閱讀後臺的 API 文檔，看每一個介面是否是你需要的，有沒有缺漏，有沒有數據與你所需的不一致。如果發現問題及時與後臺溝通協調。

在完成上述工作之後就準備進入正式開發階段了，在我們的項目中，文件層次結構一定要清晰明確，便於查找管理，所編寫的代碼也需要嚴格按照代碼編寫規範進行，如果書寫的代碼 IDE一直提示警告，那是不合格的。

每個人都應當結合W3標準形成一套自己的代碼標準，下麵給大家分享一些我自己的總結：

1. 項目文件規範

  • 項目中的 CSS 文件、HTML 文件、JS 文件、其他引入文件、以及靜態資源（圖片、音頻、視頻等）都應當建立單獨的文件夾存放。

2. 文件名命名，需要遵循以下幾點：

  • 語義化 如：public.css

  • 使用_作為連接符 如：index_nav.css

3. CSS樣式規範

  • 少用內聯樣式

  • 寫好瀏覽器相容

  • 樣式名命名語義化、小寫、使用‘-’或者‘_’作為連接符

4. 簡寫

如： margin-top：20px; margin-left：30px; margin-right：30px; margin-bottom：40px; 應當直接寫為： margin：20px 30px 40px;

5. JS中的命名，變數名註意以下幾點：

  • 語義化

  • 遵循駝峰命名法

  • 避免保留關鍵字

6. 常用命名單詞表（附在末尾）

在項目的進行過程中，如果你做好了上述的前期工作，肯定會加快你的開發進度，併為你省去很多問題麻煩。

但是每個項目還是會存在問題，當我們面臨這些問題而又無法自己解決的時候，我們應當怎麼解決這些問題呢？我常見的處理方式有以下集中供大家參考：

  1. 大問題（如：對於如何使用NMP不清楚），面對這樣的問題，首選的方案就是百度教程，類似這些在百度上都可以找到各式各樣的教程，基本能解決大家的問題。 有時度娘也無法為我們解決（如我進行微信小程式開發，百度提供的資源實在有限），這個時候可以嘗試去看官方文檔，官方文檔中會有大致的講解，但是很多文檔都是英文版的，所以需要良好的英語閱讀，推薦大家沒事多學習英語。

  2. 一般功能點技術問題，時間不急（如：怎樣在VUE的列表渲染中渲染指定的下標），這類問題是對於這技術初學者可能經常出現的，首選肯定還是度娘。 除此之外也可以在論壇提問蓋樓，在各個技術網站中都有大量的人一直在活躍，能針對性的回答你提出的問題，and，加QQ群，一般大型的技術類QQ群都有兩千人，多加幾個群，肯定有能解決你問題的人。 裡面還可以找到各類大牛，私聊加他，有問題還可以第一時間騷擾他。

  3. 很急的問題，一般遇到這樣的問題需要儘快處理，這個時候就強烈推薦你進入各個QQ群尋求幫助了，眾多方案中QQ群是效率最高的。 但你需要有很多Q群才行，比如我的Q上就有幾十個Q群，每個群 2000 人，一共近10W的前端技術人員，這麼大的基數，基本能確保你的問題第一時間得到解決。

也給大家推薦些網站，當你遇到問題的時候可以到這些網站尋求幫助：

  1. 創造獅導航，裡面有各類網站的鏈接，裡面包括各類技術網站，學習網站，框架網站，論壇鏈接，工具網站，收藏一個能省去很多事兒。http://chuangzaoshi.com

  2. 果殼任意門，一個很有個性的導航網站，內容也很豐富，不過最近好像不能訪問了（404）。https://gate.guokr.com/

  3. 阮一峰的個人網站，大牛的個人網站，內容極其豐富。http://www.ruanyifeng.com/home.html

  4. jQuery插件庫，內容最豐富的插jQuery件庫，你需要的裡面總是有的。http://www.jq22.com/

  5. CSDN，中國最大的IT社區和服務平臺。https://www.csdn.net/

  6. 博客園，博客園是一個面向開發者的知識分享社區，一個純凈的技術交流社區。https://www.cnblogs.com/

  7. 學習CSS佈局，一個CSS基礎教程，適合初學者。http://zh.learnlayout.com/

  8. 前端亂燉。http://www.html-js.com/

  9. GitHub，一個面向開源及私有軟體項目的托管平臺。https://github.com/

  10. 前端網，裡面涉及前端的各類問題，整個網站只有前端內容。http://www.qdfuns.com/

  11. segmentfault技術交流平臺。https://segmentfault.com/

tips：關於前端學習的網站，前端內容的網站都可以在創造獅導航中找到，就不再單獨列舉。

當一個項目順利或者不順利的結束之後，我們可能有一段休息時間，也可能還得繼續下一個項目，甚至項目多個項目同時進行的情況。

但是每個項目結束之後，都希望大家抽出時間來整理下該項目的心得，將項目中遇到問題，解決方案，新學習的內容，整理出來分享給大家。

我每個月大概會在論壇發佈3-6篇博客，將我遇見的和我收穫的都分享給大家。

在工作之餘，我不免會對未來的工作產生一些想法，我的未來該是怎麼樣的？

如果你也曾想過，那麼我想你或許也需要對你的前端生涯進行一場規划了。

“大清亡於閉關鎖國，學習技術需要交流和資料”。這是我的知乎專欄的一篇導航性文章，裡面彙集了web前端技術乾貨、前端面試題系列、技術動向、職業生涯、行業熱點、職場趣事等一切有關於程式員的高質量文章和學習資料分享。https://zhuanlan.zhihu.com/p/136444555

職業生涯規劃

什麼是生涯規劃？

它是結合自身情況以及眼前的機遇和制約因素，為自己確立職業目標，選擇職業道路，確定教育、培訓和發展計劃等，併為自己實現職業生涯目標而確定行動方向、行動時間和行動方案。

為什麼要進行規劃，兩個原因？

  1. 明確的職業生涯規劃會讓你知道在什麼階段你該做些什麼，讓自己做的事具有比較明確的目的，而非混混度日。

  2. 用人單位需要你的職業生涯規劃，以判斷你是否符合公司的發展。

如何進行規劃？

我在大學的時候與職業生涯規劃的老師談過許多，其中有一點句話我認為是最正確的，“你的職業不一定是你100%熱愛的，但它一定不能是你厭惡的。”

不需要有陶淵明的不為五斗米折腰，但如果本身都對這份工作反感，那麼它就不應該成為你職業生涯中的道路。

  • 前端生涯規劃的第一步，就是確認你對前端這份工作的熱愛，如果前端工作讓你心煩意亂，感覺到代碼讓你很不舒服，你開始憎惡代碼，那麼時候考慮下暫停下工作，是否要繼續前端工作了。

  • Step2：正確的評估自己，瞭解自己的狀態及能力。

  • Step3：制定目標，給自己確定目標，在什麼時候我要達到什麼樣。

  • Step4：拆分目標，把離現在最近的一個目標拆分，清楚自己如何做才能達到這個目標，為這個目標制定一系列的計劃。

  • Step5：PDCA迴圈（制定計劃、執行計劃、檢查計劃、調整計劃）根據自己制定的計划去執行，然後在執行的過程中不斷檢查自己是否與計劃一致，如果存在問題，進行調整，或者計劃已經不在符合現有階段，那就重新制定新計劃。如此反覆迴圈。

  • Step6：堅持-成功。堅持不一定會成功，但堅持一定是成功的要素之一。

最後為大家附上一些我對於前端的一些整理包括我接觸或者瞭解過的技術以及對他們的看法以及一份娛樂性的前端等級劃分：

前端各類框架/庫

Q：前端框架/庫如何劃分？

A：前端框架/庫有很多劃分方式，我把他們分為CSS框架/庫、JavaScript框架/庫以及插件類框架/庫。

下麵從數以百計的前端框架/庫中挑選部分主流框架和大家分享：

img

一、CSS框架/庫

  • Bootstrap

Bootstrap來自於Twitter，是當前最受歡迎的前端框架之一，簡潔、直觀、強悍、兼顧PC與移動開發，是前端必備的一款框架，關於它的好不用多加闡述。http://www.bootcss.com/

  • fontawesome

一款風靡全球的圖標字體庫和CSS框架。http://www.fontawesome.com.cn/

  • MUI

最接近原生APP體驗的高性能前端框架。http://dev.dcloud.net.cn/mui/

  • AUI

一款為APICloud而設計的移動端前端框架。http://www.auicss.com/

  • Amaze UI

基於社區開源項目構建的一個跨屏前端框架，以移動優先，從小屏到大屏，最終實現所有屏幕適配，適應移動互聯潮流。http://amazeui.org/

  • WeUIi

框架本身適用於微信開發，是小程式與http://github.com/Tencent/weui

二、JavaScript框架

  • JQuery

JQuery 一個快速、簡潔的JavaScript框架，它極大地簡化了 JavaScript 編程，是一個人手必備的JavaScript框架，也許在將來會成為墓地中的一員，但現在任然是不可或缺的一個主流框架。http://jquery.com/

  • Zepto

Zepto 是一個輕量級的針對現代高級瀏覽器的 JavaScript 庫， 它與jquery 有著類似的 api。 如果你會用 jquery，那麼你也會用 zepto。http://zeptojs.com/

  • Angular

當前三大主流框架之一，AngularJS 是為了剋服 HTML 在構建應用上的不足而設計的，其具有模塊化、自動化雙向數據綁定、語義化標簽、依賴註入等特性，是一款值得推薦值得學習的框架。http://www.angularjs.net.cn/

  • Vue

Vue來源於尤雨溪，是一款來自國人的框架，深受各位前端工程師的歡迎，它是一套構建用戶界面的漸進式框架，採用自底向上增量開發的設計，關註視圖層，簡單易於上手，擁有的第三方資源，是當前國內熱度最高的框架之一。https://cn.vuejs.org/

  • React

React 起源於 Facebook 的內部項目，是一個 Facebook 和 Instagram 用來創建用戶界面的 JavaScript 庫。

發展至今已經成為當下最火的前端框架之一，React 基本上用來作為 MVC 中的 V。

它完全專註於 MVC 中的 V 部分，而忽略了應用中的其它部分架構。

它提供了一個組件層，這讓我們易於製作UI元素並將這些UI元素組合在一起。它抽象出了DOM，因此而優化了渲染， 並允許你使用 node.js 渲染 React。https://reactjs.org/

  • Node

Node.js 是一個 Javascript 運行環境(runtime)。簡單的說 Node.js就是運行在服務端的 JavaScript。Node.js 的出現，使得前後端使用同一種語言，統一模型的夢想得以實現。http://nodejs.cn/

“大清亡於閉關鎖國，學習技術需要交流和資料”。這是我的知乎專欄的一篇導航性文章，裡面彙集了web前端技術乾貨、前端面試題系列、技術動向、職業生涯、行業熱點、職場趣事等一切有關於程式員的高質量文章和學習資料分享。https://zhuanlan.zhihu.com/p/136444555

三、純插件類框架/庫

  • EasyUI

easyui是一種基於jQuery的用戶界面插件集合，它為創建現代化，互動，JavaScript應用程式，提供必要的功能。http://www.jeasyui.net/

  • ECharts

一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。http://echarts.baidu.com/index.html

  • hcharts

全球知名的 Web 數據可視化圖表軟體，用於創建可交互性圖表，性能好，功能強大，支持 IE6 、Android、IOS ，同時支持股票圖表、地圖圖表。https://www.hcharts.cn/

tips：除了以上還有Extjs、prototype、kissy，jQuery UI、flex、yui、Dojo等等以及基於以上幾個框架衍生的優秀的框架/庫和適用於移動端開發的框架/庫可供大家選擇，大家可以在各論壇中查詢各框架的特點。

框架的選擇

Q：在以上的那麼多框架中，有哪些是我們必備的框架？

A：

  1. JQuery，如果說只會一個框架，那麼這個框架應該就是它了。一個輕量級框架，擁有強大的選擇器，出色的DOM操作封裝，優秀的相容性，最為豐富的插件資源。 很難找到不學它的理由。只要會javascript，學習JQuery就是一件輕鬆的事。

  2. 當前三大主流框架：angular、Vue、React，這三者已經占領了整個前端圈，不說三者都會，三者你肯定需要學習其中一種，才能讓你立足當前。

  3. Node，基於javascript的服務端語言，一個出色的Javascript運行環境，它有一個很棒的包管理系統NPM。通過運行“npm install 包名”幾乎可以安裝任何包/庫，在開發工作中為你提供各種便利。

  4. Bootstrap，一套足以滿足95%需求的CSS框架，同時兼顧PC與移動端，只需要這一個框架你就可以完成一個完整的項目。

以上幾種框架都具有相當活躍的社區，在學習和工作中出現的各種問題都能夠在社區中找到答案。

每個前端工程師在工作後的一段時間都會開始瞭解MVVM框架，MVVM框架成為當前主流，下麵簡單的為大家講解MVVM框架：

Q：什麼是MVVM框架，它有什麼特點？

A：MVVM 是 Model-View-ViewModel 的簡寫，它來源於 MCV 框架，在 MVVM 中，數據是核心，由於 VIewModel 與 View 之間的雙向綁定，操作了 ViewModel 中的數據，就會同步到 DOM，我們透過 DOM 事件監控用戶對 DOM 的改動，也會同步到 ViewModel，很好做到數據的一致性。

Q：當前主流MVVM有哪些？

A：vue+angular 成為了絕大多數前端的選擇，微信開發小程式其實也是 MVVM 框架結構，react 也能算作一款（因為 React 本身特殊，不是純粹的 MVVM 框架機構），除此之外還有 avalon、knockoutjs 等等。

Tips：在我的博客及後續內容中將專門針對於 MVVM 框架進行詳細講解，歡迎大家前往我博客查看或繼續關註後續 chat。

常用工具

前端開發是最簡單的，只需要一個文本編輯器以及一個瀏覽器就OK了。但是工具更能為我們提供無數的便利，提高我們的開發效率和開發質量。下麵跟大家分享一些前端常用工具：

一、開發IDE

  • HBuilder

新手入門最好用的 IDE，基於 eclipse 深度封裝，全中文界面，完善的代碼自動補全，HTML+CSS+JQ+JS，支持 emmet 輸入，滿足新手的大部分應用。

優點：傻瓜化安裝，全中文，出色的智能提示；

缺點：沒有社區支持，代碼補全有點老舊，對預處理器支持不太好；

  • WebStorm

全能之選，大多數人當前的使用選擇，包括我，WebStorm 可以實現針對 JavaScript、TypeScript、stylesheet 語言和其他最流行框架的智能代碼補全、實時錯誤檢測、以及強大的導航和重構功能。

可以說 WebStorm 幾乎擁有所有你期待的功能。使用 WebStorm 儘量不要使用漢化包，容易出現錯誤。

  • Microsoft Visual Studio 2017

Microsoft Visual Studio 2017 用於.net 開發，但是同樣可以作為一款前端開發軟體，在我之前的公司就使用它作為開發IDE,它能夠快速導航、編寫並修複你的代碼，實現輕鬆調試和診斷，根據你的喜好進行擴展和自定義，並實現有效協作，ASP開發首選。

  • notepad++

非常小巧的一款 IDE，適合用作前端代碼編寫，但是擴展功能有限，如果設計複雜部分，不推薦使用。

  • sulimeText3

非常小巧，啟動速度特別快，基本替代了對文本文檔的使用，雖然是閉源軟體，但是有著豐富的第三方支持，能夠滿足各種各樣的擴展。

並且最好用的地方在於可以通過本地 node 進行編譯，如果把前端比作LOL，項目比作排位賽。

二、其他類工具

1. WebPack

WebPack 可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到 JavaScript 模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。

2. gulp

Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。Gulp.js 是基於 Node.js 構建的,利用 Node.js 流的威力,你可以快速構建項目。

3. SVN

SVN是Subversion的簡稱，是一個開放源代碼的版本控制系統,當前使用最廣泛的版本控制之一，一般項目開發團隊之間都使用SVN進行配合開發。

4. Git

Git是一個開源的分散式版本控制系統，可以有效、高速的處理從很小到非常大的項目版本管理。

5. NPM

NPM 是隨同 NodeJS 一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：

  • 允許用戶從 NPM 伺服器下載別人編寫的第三方包到本地使用。

  • 允許用戶從 NPM 伺服器下載並安裝別人編寫的命令行程式到本地使用。

  • 允許用戶將自己編寫的包或命令行程式上傳到 NPM 伺服器供別人使用。

6. FIS

FIS , 前端工程構建工具，解決前端開發中自動化工具、性能優化、模塊化框架、開發規範、代碼部署、開發流程等問題

7. grunt

JavaScript 世界的構建工具，自動化。對於需要反覆重覆的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工作。

8. Firebug

Firebug是firefox下的一個擴展,能夠調試所有網站語言，如Html,Css等，但FireBug最吸引人的就是javascript調試功能，使用起來非常方便，而且在各種瀏覽器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能還很強大，比如html,css,dom的查看與調試，網站整體分析等等。總之就是一整套完整而強大的 WEB開發工具。

9. YSlow

YSlow 是 Yahoo 發佈的一款基於FireFox的插件，這個插件可以分析網站的頁面，並告訴你為了提高網站性能，如何基於某些規則而進行優化。

10. JSLint

JSLint，一個用於提升你所編寫的代碼質量的工具，它是一個JavaScript驗證工具（非開源），可以掃描 JavaScript 源代碼來查找問題。

如果 JSLint 發現一 個問題，JSLint 就會顯示描述這個問題的消息，並指出錯誤在源代碼中的大致位置。

有些編碼風格約定可能導致未預見的行為或錯誤，JSLint 除了能指 出這些不合理的約定，還能標誌出結構方面的問題。

11. sass

官網介紹：世界上最成熟、最穩定、最強大的專業級CSS擴展語言！Sass 完全相容所有版本的 CSS。我們對此嚴格把控，所以你可以無縫地使用任何可用的 CSS庫。

12. Less

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變數、Mixin、函數等特性，使 CSS 更易維護和擴展。它可以運行在 Node 或瀏覽器端。

13. PxCook markman

這兩款都是用於標註的小工具，用於和UI配合。

前端等級劃分

對於前端等級我有一套娛樂性的劃分，供大家參考。把前端比作LOL，每個項目就是一場排位賽。

LV1：萌新-未入門

肯定就是1-29級的玩家：沒法參加排位賽，無法開展項目。

這部分玩家剛開始接觸前端，或者對於 CSS 不夠熟練，或者對 JS 知道的還不夠，所掌握的東西還沒有辦法獨立完成一個完整的頁面，讓他們去看一個完整的項目，他們就會感覺，這是啥，這又是啥。

LV2：入門-青銅（初級）

這部分玩傢具備一定的基礎能力，能夠自己完成一些簡單的頁面，但是對於一些比較複雜的邏輯不能理解通透，或者對於某些特定樣式不能完成，遇到問題比較多的時候都束手無策，比較喜歡直接詢問別人如何解決，代碼質量較渣，這些玩家在項目中往往會給你分配一些比較簡單的頁面。

LV3：進階-白銀（初級）

這部分玩家已經掌握了一定的進階技術，能夠在一個項目中承擔各種任務，也能夠自己解決一些比較常見的問題，有了一定的項目經驗，能夠總結出遇到的問題，避免各種簡單的錯誤，書寫的代碼可供閱讀，這類玩家在項目中能夠勝任大多數的開發工作。

LV4：崛起-黃金（中級）

此類玩家已經具有相當的經驗，已經成長為能獨擋一面的大將，具備相當的學習能力，遇到問題都能自己獨立快速解決，代碼內容都是經過優化，不存在過多的代碼冗餘。

工作之餘能夠選擇合適的新技術來擴充自己，以迎接下一階段的挑戰。這部分玩家在項目中挑起大梁，在完成自己工作的同時也幫助其他人解決問題。

LV5：成熟-鉑金（高級）

前端項目中 leader，拿到一個項目知道應該如何選擇合適的技術框架，應當如何針對項目進行項目規劃。

精通組件式的開發，高效率，對前端各種技術都有自己的認知，對於後臺技術也有所瞭解，從項目的前期設計到後期維護方案都參與，在項目中屬於整個項目的前端負責人。

LV6：蛻變-鑽石

掌握了前端底層的精髓，能夠基於底層編寫自己所需的所有東西，對前端的認識已經達到入微境界。

這類人一般已經不在直接編寫項目代碼了，他們的工作更多的是讓別人更方便的工作，各類框架就是出自於他們之手。

LV7：登頂-大師

大師級的人物，在專業內具有相當的權威，各個書店都能買到他們的作品，他們左右著技術的走向。

LV8：封神-王者

他們的名字流傳於每個互聯網的角落，他們在全球技術圈都具有相當的影響力，他們正在改變未來。

附（常用命名單詞列表）

  • wrapper 頁面外圍控制整體佈局寬度

  • container或#content 容器,用於最外層

  • layout 佈局

  • head, #header 頁頭部分

  • foot, #footer 頁腳部分

  • nav 主導航

  • subnav 二級導航

  • menu 菜單

  • submenu 子菜單

  • sideBar 側欄

  • sidebar_a, #sidebar_b 左邊欄或右邊欄

  • main 頁面主體

  • tag 標簽

  • msg /message 提示信息

  • tips 小技巧

  • vote 投票

  • friendlink 友情連接

  • title 標題

  • summary 摘要

  • loginbar 登錄條

  • searchInput 搜索輸入框

  • hot 熱門熱點

  • search 搜索

  • search_output 搜索輸出和搜索結果相似

  • searchBar 搜索條

  • search_results 搜索結果

  • copyright 版權信息

  • branding 商標

  • logo 網站LOGO標誌

  • siteinfo 網站信息

  • siteinfoLegal 法律聲明

  • siteinfoCredits 信譽

  • joinus 加入我們

  • partner 合作伙伴

  • service 服務

  • regsiter 註冊

  • arr/arrow 箭頭

  • guild 指南

  • sitemap 網站地圖

  • list 列表

  • homepage 首頁

  • subpage 二級頁面子頁面

  • tool, #toolbar 工具條

  • drop 下拉

  • dorpmenu 下拉菜單

  • status 狀態

  • scroll 滾動

  • .tab 標簽頁

  • .left .right .center 居左、中、右

  • .news 新聞

  • .download 下載

  • .banner 廣告條(頂部廣告條)

  • 電子貿易相關

  • .products 產品

  • .products_prices 產品價格

  • .products_description 產品描述

  • .products_review 產品評論

  • .editor_review 編輯評論

  • .news_release 最新產品

  • .publisher 生產商

  • .screenshot 縮略圖

  • .faqs 常見問題

  • .keyword 關鍵詞

  • .blog 博客

  • .forum 論壇

  • CSS文件命名 說明

  • master.css,style.css 主要的

  • module.css 模塊

  • base.css 基本共用

  • layout.css 佈局，版面

  • themes.css 主題

  • columns.css 專欄

  • font.css 文字、字體

  • forms.css 表單

  • mend.css 補丁

  • print.css 列印

總結

“大清亡於閉關鎖國，學習技術需要交流和資料”。這是我的知乎專欄的一篇導航性文章，裡面彙集了web前端技術乾貨、前端面試題系列、技術動向、職業生涯、行業熱點、職場趣事等一切有關於程式員的高質量文章和學習資料分享。阿裡名廠標準web前端高級工程師教程目錄大全,從基礎到進階,看完保證您的薪資上升一個臺階

 

 

 


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

-Advertisement-
Play Games
更多相關文章
  • 順序跳躍顯示數組中的值
    小練習 順序跳躍顯示數組中的值 <input type="text" id="t" size="60"> <button id="s">stop</button> <script> var tt=document.getElementById('t'); var s=document.getElem ...
  • 2020前端練習 —— 超級無敵簡易版博客園
    @ 2020.5.14 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit ...
  • 弔打面試官系列-58道vue面試題
    1.vue優點？ 2.vue父組件向子組件傳遞數據？ 3.子組件像父組件傳遞事件？ 4.v-show 和 v-if指令的共同點和不同點？ 5. 如何讓CSS只在當前組件中起作用? 6. 的作用是什麼? 7.如何獲取dom? 8.說出幾種vue當中的指令和它的用法？。 9. vue-loader是什麼 ...
  • 從零開始的HTML筆記——初識HTML
    HTML學習 一個例子 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>第一個頁面</title> 6 </head> 7 <body> 8 <h1>我的第一個標題</h1> 9 <p>我的第一個段落。</p ...
  • 十年前端工程師教你Vue CLI 首屏優化技巧
    前言 之前用 vuecli做了個博客，是一個單頁面項目，大概有十個路由。 直接 npm run build打包出來，有一個 1M的巨大 js文件。 先掛載到伺服器上試試 好家伙 這載入時間 仿佛過了半個世紀 首屏頁面整整載入了 9s 光載入那個大文件就花了 8s 這必須得做個優化了，沒有用戶能忍受 ...
  • 前端是做什麼的？工作內容有哪些？
    隨著互聯網全面進入移動時代，前端逐漸成為互聯網行業中的重要角色。前端是做什麼的？工作內容有哪些？簡單來講，前端要做的就是將產品的UI設計稿在用戶終端上實現，因此可以說用戶看到的所有視覺和交互都是前端的工作領域。根據這個定義，我們可以把前端的工作內容總結為根據產品的需求，配合開發和UI設計部門完成前端 ...
  • 學習前端的未來在哪裡？今天詳細的談一下
    以下我說的都是個人觀點，比較巨集觀粗淺，主要針對的是前端工程師本身，沒有深入技術和業務細節，請謹慎參考。 職能概覽 前端工程師首先是個程式員，其次也是個軟體工程師，他們工作在離用戶最近的地方，負責人機交互和用戶體驗，雖然叫“前端”，但其實他們的工作邊界其實已經很寬了。 展望未來，我想前端的工作會繼續分 ...
  • 聊聊 TypeScript 中的類型保護
    聊聊 TypeScript 中的類型保護 在 TypeScript 中使用聯合類型時，往往會碰到這種尷尬的情況： 如上所示，getSmallPet 函數中，既可以返回 Fish 類型的對象，又可以返回 Bird 類型的對象。由於返回的對象類型不確定，所以使用聯合類型對象共有的方法時，一切正常，但是使 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類