沐鳴註冊平台官網_做前端的你有沒有覺得很吃力?

前端工作兩年多。大部分前端原理、框架都能完全運用。工作中幾乎遇不到解決不了的問題(除了那些噁心無法實現的需求)現在經常被安排去面試新人(被安排去面試,主要是工作能力比較突出的原因,公司還有很多3年以上的員工)。下面說說我的學習方法或許對你有用!

一. 打好基礎不用說

html、css、JavaScript 三大件,完全掌握。不懂得就直接查 MDN。html重點掌握語義化。區分塊級和內聯標籤。其他查文檔就好了。還有就是定義 head 裏面一些meta 了解下。

css。重點看盒子模型,定位,層級,過渡,動畫和 transform。知道原理和規則。大部分工作都是照着設計稿化。掌握上面幾個99%還原也不難。接下來重點學習幾種常見的布局。完了之後去搞flex。最後搞下sass、less。基本就差不多了。

JavaScript。重點來了,紅寶書看一遍掌握基礎,進階去看《你不知道的 JavaScript》。就這兩套足夠了,別搞那麼多。每個知識點搞懂。ES6基本沒啥問題。下面幾個問題優搞懂,優先級如下:

  1. this 用法,相關原理

  2. 原型/原型鏈

  3. 閉包

  4. 面向對象相關

  5. 同步異步/回調/promise/async、await

  6. 模塊化 Commonjs, AMD

先搞這懂這些比較難的概念,對你js理解更加深入。接下來在開始看框架方面

二、框架方面

前期要會用,後期要懂原理。

新人先搞 vue。vue 算是比較簡單的框架了,上手容易。照着官方文檔來問題不大。原理方面要提高自己認識。學習怎麼看源碼。github常去逛逛。

學習框架之前,我其實特別建議,新人先去了解 Babel 和 webpack 不僅僅是使用。一些原理方面的東西工作中也會用到。babel 裏面會有教你如何編譯代碼。webpack教你如和打包文件。自己手寫編譯器和打包工具也不是特別難。反正對之後看vue、react源碼幫助挺大。

搞完 Vue 全家桶,去了解下 react,React hooks 學習下新的理念。再回過頭來看Vue。你會發現他們是如此的相似去又不同。

多去實踐總結,對整體框架理解會越來越深刻。

三、如何看源碼

新人剛開始看源碼,會陷入兩個困境中。一是無從下手。二是看了之後感覺沒啥收穫。

這個也很正常。一般我們熟知的框架都有個幾千甚至上萬個PR。太大細節會幹擾你。掌握整個節奏和流程。學習原理也比較吃力。就連找個入口都像大海撈針一樣。建議從下面幾個方面入手:

  1. 挑簡單的上手。別一開始就搞 vue、react、webpack。太難,會直接勸退新人。不要為了面試而去讀。反而效果不好,面試稍微問深入一點就答不出來了。平時有興趣多琢磨琢磨。按照難易程度,函數庫 < 組件庫 < 框架 < 工程化 分別典型代表 lodash < vant < vue < webpack

  2. 手擼簡易模型。像vue, webpack, babel 都有簡易項目給你擼。有的創始人(尤哥)還直播手擼。國外的更多,youtube 一搜一大堆。就算不看源碼,照着寫出了簡易 demo 對原理和理解提升都是很大的。

  3. 調試開源項目。先把項目拉下來。在vscode裏面跑下,核心函數多打幾個斷點。看看裏面變量是怎麼diff的。對理解更深刻了。

看了源碼是別人的,學到了是自己的。學習時候邊記筆記,邊思考原理,總結經驗。下面來談談前端工程化怎麼弄。

四、前端工程化

現在最流行的打包工具 webpack 用起來。當然直接用 vue-cli2、vue-cli3、create-react 都是可以的。但是 webpack 相關還是得掌握。

首先重點搞下babel、webpack。學習下編譯,打包的原理。自己配置下 webpack。嘗試自己去寫下下 webpack 的 loader 和 plugin。學習這些之前要懂一點 node.js, node.js 不需要全部學習。一般就日常用到讀寫文件fs接口,path 路徑接口。這些 api 都不難寫幾個 demo 就懂了。基本上webpack 裏面配置文件也沒用到多少 node 的東西。最後自己學會配置webpack的配置文件。

如果想深想去優化打包體積和速度,就需要去了解很多webpack插件。webpack 裏面最核心的就是插件了。

當然前端工程化不僅僅是這些,CI/CD可持續集成, Umi 了解下。shell各種腳本自動化命令、代碼生成技術了解下。

五、性能優化的方案

一般來說。性能優化沒什麼系統化的文檔供人學習。完全靠一些經驗和自己的實踐。

我們常提到性能好壞是由什麼來衡量呢?

訪問頁面地址 –> 頁面首次加載數據 –> 渲染出完整頁面的時長

非首次情況下,命中緩存的加載緩存數據 –> 渲染出完整頁面的時長。

一般我從下面幾個方面着手去做,一般問題都不大。

減小資源(靜態資源,後端加載的數據)大小

  • 壓縮代碼HTML/CSS/JS

  • 壓縮圖片、音視頻大小

  • Tree-Sharking 消除無用代碼

以上webpack都可以搞定

避免同一時間的過多次數請求

  • CSS 實現雪碧圖:使用background-position共享一張圖

  • 圖片懶加載:監聽滾動后offsetTop,  使用>

    列表懶加載(分批加載):監聽滾動后offsetTop, 發送請求加載下一頁的數據

  • 路由懶加載

  • 代碼分包分塊加載(webpack)

  • 預加載技術

  • 小程序分包、預下載等。

利用緩存(空間換時間)

  • CDN 內容分發:獲取更近網絡節點緩存下來的靜態資源

  • 瀏覽器緩存(自帶)

  • 部分資源保存在LocalStorage或者APP緩存中(手動操作)

其他

  • SSR 服務端渲染:解決SPA框架帶來JS動態渲染頁面帶來的延遲和白屏問題。

這些都可以去實踐的,難度不大。難度大的地方可能是 dom 節點成千上萬的時候渲染的性能問題。這個場景遇到的很少,方案很多。不同人有不同解決方案,有功夫可以自己去嘗試嘗試。

上面提到很多點都可以深入到很深。由於篇幅原因,點到即止。

純粹是把一些我以前走過的彎路掰直了再分享給大家。畢竟不是《前端入門到精通》哈哈哈

六、學習移動端web開發

前端現在為什麼這麼火?各個公司都還挺缺優秀的前端。原因在於 技術紅利 。

移動端web流行起來之後,特別是H5和小程序,帶動了多少前端就業,前端迅速取代了安卓和iOS 的大量崗位。

回到正題:所以作為前端人,移動web一般是都要接觸的。不同於PC 端。

移動端有哪些東西呢?不需要全部懂,差不多知道就行了。要用的時候再去學。

  1. 絕對單位換相對單位:px => rem / vw / rpx

  2. 彈性布局:使用flex、grid布局

  3. hairline (1px的粗線處理):使用偽元素 + transform: scale(倍數) 縮放線框

  4. WebView 環境了解下

  5. 安卓iOS 兼容踩坑:點擊延遲、穿透、滾動不流暢、安全區域等等。

  6. 小程序開發相關踩坑

  7. JSBridge: H5 與App 通信

  8. H5動畫製作

  9. 跨平台框架:react native、weex、flutter 等等

簡單的說移動web 就是:html/css/js 跑在手機app 裏面的WebView(web運行環境)。

小程序/公眾號就是在這個基礎上,將自己APP裏面的WebView 租售給其他人使用。

微信APP —– 提供SDK —-> 微信webview —– 提供運行環境—–> 公眾號h5 / 小程序

為什麼微信可以容納幾乎無限的H5/小程序頁面呢?

因為公眾號/小程序的代碼都存儲在雲端,通過不同的路由就可以給幾乎無數的開發者使用。

使得微信成為一個運行環境+入口的存在。

七、做前端我有沒有覺得吃力?

剛做時前端不吃力。因為我是軟件工程專業,學前端之前,學過 C/C++、Java、php、.net 成績還不錯基本都是90多分。感覺自己干後端也不吃力。實驗室裏面的項目都是前後都寫。最愛 php,當時最崇拜鳥哥。本以為以後就走上PHP後端工程師的道路了,成為鳥哥那樣的大神。

由於項目需要的原因,後來漸漸開始學起學 HTML、CSS、JavaScript 這些語法相關的東西。剛接觸時沒有感覺太大難度。

當時就想着怎麼把頁面搞好看,搞各種動畫炫技。寫一個小球從下面彈出來的效果,換各種姿勢彈出。當時覺得前端真的有意思,就入了前端的坑。入坑前,以為前端就是搞各種漂亮的頁面,各種特性驚艷別人。

隨着接觸的越來越深。接觸到了 AJAX, jQuery ,Bootstrap,前端開始注重體驗。各種框架橫空出世 backbone => Angular => React => Vue 眼花繚亂。

折騰了 JQuery 開始折騰 backbone 覺得前端還能這樣玩。有些迷茫了,感覺腦袋快要炸了,那段時間特別焦慮,瘋狂看書寫代碼,怎麼這麼多東西要學啊。

JavaScript 也不精通,到原型就不理解了,雖然有C++,JAVA面向對象的知識,但JavaScript 你怎麼和別人玩的不是一個套路啊。當時就都用ES6了, 行,學。都用Sass了,行,學。不學也可以,看不懂別人的代碼呀。

畢業前為準備校招前端工程師,真的很吃力。就怕校招面試時,自己啥都不懂。

功夫不負有心人,校招時候順利拿到了自己滿意的Offer。記得當時和面試官對答入流,好像找到知音一樣。面試官也是過來人,基本能問的都問了。

拿到Offer之後就去了實習。實習第一個任務:將一個ES6的後台管理系統重構成 Vue2.0 全家桶的項目。有個導師帶,但是她和我是不同項目,出了架構以外代碼都是自己寫。

這個階段還是收穫了很多:

  1. git 命令特別熟練。commit、stash、merge/rebase、cherry-pick、push/pull/fetch、reset等等基本都敲都特別多了

  2. 嚴格了代碼規範。Eslint、prettier 都用起來了

  3. 會自己寫業務組件,會封裝高級組件、寫常規頁面了。基本上大部分不是特別複雜的交互都ok。難一點多找下資料可以做出來。

  4. 學會管理API了。自己嘗試封裝了 axios。統一處理錯誤和彈窗。

  5. 會抽取公共css、JavaScript 函數,編寫CSS 變量和JavaScript 常量了

  6. webpack 能看懂配置文件了。

實習過後順利轉正。轉正之後,換了另外一個導師帶,加入到項目組作為一個比較大的項目的核心開發。基本不再做管理系統了。主要做一個saas 平台。涉及比較難的富文本編輯,UI 拖拽生產文章,數據可視化生產報表等等。還寫了幾個谷歌瀏覽器插件。

  1. 開始提升寫頁面效率,寫的比較快了。

  2. 研究 webpack 的插件打包編譯效率

  3. 研究 babel 編譯原理

  4. 研究了 Vue 編譯的一些原理

  5. 研究了 一些圖表的使用,多半使用的echart。常規圖表基本都用過。

  6. CI & CD 自己去搭建。學了一些 shell 腳本開發。研究了 docker 相關的東西。

  7. 嘗試去寫基礎組件,搭建基礎組件庫。

  8. 學習 React 相關的語法。

  9. 研究富文本編輯,圖片壓縮裁剪原理等等

  10. 寫一個簡單的微信公眾號,接觸到了 H5 開發。

工作第一年,基本上主戰場在PC 端。**前半年挺吃力,後半年熟練后游刃有餘。**會懟產品,會噴設計,會和後端兄弟配合默契。和團隊感情也很深了。

無奈項目由於某些原因終止,團隊解散,調到新團隊。在老東家工作一年多后,由於個人原因離開去了一家新的的公司,主戰場從PC 到了手機。開始接觸移動H5、hybrid 開發。

八、學習吃力的原因肯定是學習方法不太正確。總結下一般怎麼才能真正學到東西

  1. 詳略得當:前端知識太多,抓重點學,不要像背字典一樣。

  2. 不要急着寫代碼,先理清流程(以一個函數為單位,可以先寫註釋)再寫代碼。

  3. 看視頻看講解是會誤以為自己會了,其實並沒有。

  4. 學會總結:一句話可以講清楚的事情,不要多說一句。減少心智負擔。

  5. 不介意複製代碼,但是要知道這個代碼裏面大致實現原理。感興趣自己重寫一個。

  6. 較大的項目,不要急着看代碼。可以先把項目跑起來。通過改代碼裏面的參數來理解裏面的核心流程。

  7. demo 式編程。對於新框架,參考demo來上手更快更容易理解。

  8. 漸進式編程。對於比較複雜的功能/需求。不要想着一氣呵成。先實現一個核心,每次往上面加細節,有點像繪畫。

  9. 斷點單步調試很有用,定位bug會更快。當然有些不易調試的應用選擇打log。一次打 log 要多打點,免得打完log,有得再加。

  10. 黑盒太多的項目,實在找不到bug原因。發給同事幫忙看。可能很快就能看出來。當局者迷,旁觀者清。(很多時候是拼寫的問題)

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9960