「前端解惑：論前端從入門到高級各階段的迷茫期」live內容總結

來自專欄前端開發

一.為什麼選擇前端？

這個問題我分為兩塊來講解：

1.學前端難嗎？

前端入門不難，前端學習的整個流程：

• 幾天的時間學會html，css就可以寫一個基本可以看的頁面。html和css就相當於頁面的結構和上色，
• js基礎學習，js入門階段要穩紮穩打，要在學習中培養編程思維，對於一個初學者來說，變數，函數都不好去理解，都需要慢慢去培養。
• js深入學習，js基礎入門之後，會深入學習一些高級的語法，比如原型，es6標準，簡單框架jquery，zepto，ui框架：bootstrap，materialize，mv*框架：vue，angular，react，自動化工具：npm，webpack， nodejs編程。

深入比較難，

Question:

• .null是object類型
• 類型的繼承，封裝，多態。
• ts：介面對於類，屬於實現，類對於類 屬於繼承。

2.前端都在做什麼？

• 01.偏向於設計的前端，html，css，js，ps
• 02.偏向於網站邏輯的前端：html，css，js，ps，主要在於後台數據獲取與展示，框架vue，angular，react，
• 03.偏向於遊戲，動畫的前端：html，css，js，canvas，cocos2d-js，webGL，localstorage，web Sql，webSocket，sqlite
• 04.偏向於後端的前端：js，nodejs，mysql，redis，mongodb，數據持久化。 cluster集群，
• 05.偏向於PC客戶端的前端；+nwjs,electron
• 06.偏向於移動端的前端：hybrid，rem，flex，手機兼容性，手機PC調試，chrome://inspect/#devices,手機模擬器，cordova，react native，appCan
• 07.偏向於微信端的前端：微信公眾號開發，微信小程序開發

二.如何以正確的姿勢入門前端

1.如何自學前端？

• 01.看在線資料：菜鳥教程，w3school,
• 02.看視頻：麥子學院，慕課網，極客學院
• 03.制定大綱，學習計劃，任務計劃，測試

2.如果想參與培訓，怎麼選？

• 01.培訓的好壞，最後一根稻草
• 02.傳智播客，達內，

三.從小白到初級工程師的成長

1.基本功很重要

• 01.要學會積累，慢慢的去培養自己的編程思維，
• 02.培養自信心。

2.欲速則不達

• 01.不能貪多，不要想著先學框架，基礎最重要

3.拚命的成長

• 01.拚命，尤其是學習的階段，每天十二點之前睡就對不起自己。
• 02.不要把學習周期拉的太長，太長容易把你拖垮

4.初級工程師的瓶頸

• 01,眼光太近，不會看到擴展性
• 02.代碼質量太差，冗餘代碼太多，邏輯不清晰
• 03.愛用全局變數，
• 04.定義的變數名不規範，目錄放置不規範。
• 05.插件引用過多，愛用框架

5.升級指南：

• 01.考慮到擴展性
• 02.提高代碼質量，多review代碼，學著去簡化思維邏輯，優化代碼是提升的開始，不要寫完就不看了
• 03.多遵循模塊化思想
• 04.命名要規範（京東，攜程，天貓，騰訊），代碼多加註釋，對於代碼塊一定要規範，不要為了體現自己很厲害，而寫出別人看不懂的代碼。
• 05.插件視情況來定，不要因為一步就引用很重的框架，

四.怎樣才算晉陞到中級程序員

1.源碼是最好的老師

• 01.從引用別人的代碼，到看別人的代碼，再到寫別人的代碼
• 02.取其優點，棄其糟泊

2.那些被你嫌棄的框架

• 01.bootstrap：響應式鼻祖，後台之王
• 02.jquery：時代變革，
• 03.requirejs：模塊化方案倡導者，
• 04.angularjs：MVC框架，雙向數據綁定，後台之王

3.不要過早去設計架構

• 01.不要把自己的思想過早攝入到架構中去，因為你還要學習
• 02.架構沒那麼簡單，不是別人用的就適合你，
• 03.多學習和模仿

4.中級工程師的瓶頸

• 01.性能跟不上
• 02.命名規範跟不上
• 03.代碼風格不一致，簡單的邏輯很規範，複雜了就破罐子破摔
• 04.代碼層次太深，不知道怎麼作代碼抽離
• 05.不知道如何提取公用代碼塊，
• 06.感覺自己一定很厲害了，聽不進去別人的意見
• 07.盲目追新，覺得火的就是好，並不能根據業務邏輯去判斷

五.高級程序員修成記

1.架構之路

• 01.何為架構，
• 02.怎麼開始自己的架構
• 03.架構應該主義的地方：穩定性，業務相關性，通用性，學習成本。個人的中小型項目前端架構淺談 - CSDN博客

2.規劃好自己的未來

• 01.管理
• 02.技術

3.H5擴展：小程序，快應用，PC客戶端

• 01.小程序：代碼構成 · 小程序
  .json 後綴的 JSON 配置文件，.wxml 後綴的 WXML 模板文件，.wxss 後綴的 WXSS 樣式文件，.js 後綴的 JS 腳本邏輯文件
• 02.快應用：頁面ux，js，css ---快速入門
• 03.PC客戶端：nw

六.跳槽篇

1.你跳槽的目的是什麼

2.如何合理的跳槽

最後附上live 地址：