前端工程師的主要工作內容是什么？

時間：2023-12-01 11:06:01 | 來源：網(wǎng)站運營

時間：2023-12-01 11:06:01 來源：網(wǎng)站運營

前端工程師的主要工作內容是什么？：先來看一下網(wǎng)站開發(fā)的流程：

1. 前端要參與視覺和交互的評審，完成原型圖的切圖
2. 根據(jù)后端/接口文檔，進行頁面構建和開發(fā)，并且不斷針對數(shù)據(jù)和功能相關內容與后端進行溝通
3. 前后端功能實現(xiàn)，數(shù)據(jù)流通之后，測試人員進行功能測試，并記錄bug（漏洞），形成文檔并交付bug產(chǎn)生方，前后端修補各自bug ，并重復測試；

我們來看2005年的網(wǎng)頁大多數(shù)長成這樣：

現(xiàn)在的網(wǎng)頁一般是這樣：

實際上無論網(wǎng)頁怎么好看、交互功能多，前端最核心的內容還是：

盡管前端工程師所拿到的原型、數(shù)據(jù)、圖都是別的部門提供的，但是前端在網(wǎng)站開發(fā)整個過程中起到了銜接的作用。

盡管前端發(fā)展很快，很多人糾結Angular.js、React、Node.js、ES6、ES7、CoffeeScript、TypeScript……似乎永遠有太多東西需要學習，有些東西好像比如jQuery還沒學明白就被另一些新的技術取代而“過時了”。其最本質的就是前端三劍客：HTML+CSS+JavaScript

從招聘需求作為出發(fā)點，總結一下企業(yè)對前端的招聘需求：

• 精通 HTML、CSS、JS 基礎，熟悉 H5、CSS3 新屬性，熟悉 ES6 新特性
• 熟悉響應式，flex 等頁面布局方式，熟練使用 less、sass
• 熟練運用 Vue、React 前端開發(fā)框架，了解 ReactNative 的基本實現(xiàn)原理
• 熟悉組件間的通信和數(shù)據(jù)的管理 , 熟練 Redux/Vuex 使用
• 熟悉常見 UI 框架如：Bootstrap、Element-UI、Vant、Ant-design 等
• 熟悉 Webpack 等構建工具
• 熟悉微信小程序開發(fā)流程
• 熟練使用 Git 等項目管理工具
• 了解 NodeJS，了解 Express 框架開發(fā)

根據(jù)上述總結，我們就要開始找到全套學習教程了：

本套線路圖，包括了前端的學習路徑以及4個階段，9套課程，共計課程273+小時，1861集。

知識點包括了：HTML+CSS-->移動web->JavaScript基礎-->Web APIs->數(shù)據(jù)交互&異步編程-->Node.js-->Vue2+Vue3-->React核心技術-->微信小程序。

很多小白開始自學前端都是先來背HTML的標簽，從HTML、body、div...往下背，跟背英語單詞一樣，學了背了就忘了，然后失去學習動力。 其實正確的方式是，從靜態(tài)頁面的完成開始，不用過于糾結記住標簽，因為很多前端大牛都是通過多年的經(jīng)驗形成了下意識的記憶。 HTML標簽明白了之后，開始了CSS學習，什么陰影，圓角、動畫等等的，這些都是日常應用。但是這里需要注意的是，要熟練掌握css定位的原理，盒子模型，等等，如果這些沒有弄清楚，javascript學習就會遇到困難。

根據(jù)上述教程整理了全套筆記給到大家

更多HTML+CSS學習筆記如下（已完結）：

• 認識網(wǎng)頁 / HTML標簽大全 / 表格 / 列表
• CSS入門筆記 / Css樣式表 / emmet語法 / CSS的復合選擇器 / 顯示模式 /
• CSS背景 / CSS三大特性 / 盒子模型 / 圓角邊框、盒子陰影、文字陰影
• 浮動知識點匯總 / PS切圖 / CSS屬性書寫順序（重點） / CSS練手之學成在線頁面制作
• CSS定位的4種分類 / 學成在線模塊添加 / HTML+CSS之定位（position）的應用
• 案例：淘寶輪播圖 / 元素的顯示與隱藏 / 土豆網(wǎng)鼠標經(jīng)過顯示遮罩 /
• 【重點】CSS之精靈圖 / 字體圖標 / 用戶界面樣式源碼 / vertical-align 屬性應用 /
• 溢出的文字省略號顯示 / 常見布局技巧+案例 / CSS新增選擇器 / 盒子模型和其他新特性

HTML+CSS項目《品優(yōu)購》完整筆記+源碼（萬字版可復制）：

• HTML+CSS大項目1：品優(yōu)購項目筆記+源碼（萬字！收藏）
• HTML+CSS大項目2：品優(yōu)購項目筆記+源碼（萬字！收藏）

移動開發(fā)筆記（更新中）

• 移動WEB開發(fā)之入門&視口 / 二倍圖 / 主流方案選擇 / 攜程網(wǎng)首頁案例制作
• rem基礎&媒體查詢 / less基礎 / rem實際開發(fā)適配方案 /

JavaScript最全拔高（更新中） JavaScript面向對象開發(fā)相關模式 / JavaScript創(chuàng)建對象簡單方式到優(yōu)化 / JavaScript面向對象游戲案例：貪吃蛇

大家可以根據(jù)全部內容，按照自己的時間做好學習計劃

• HTML+CSS 25天
• JavaScript 20天
• 環(huán)境基礎 15天
• 計算機基礎 25天
• Bootstrap（15天）、jQuery UI（15天）、Amaze UI；流行的前端框架：jquery mobile、angular.Js（20天）、Vue.js（20天）、React.js（20天）
• Echarts（1周）、tableau（1周）

以上時間安排是每天至少學習6小時的時間安排，大家可以根據(jù)每天學習的小時數(shù)字型加減天數(shù)。