前端初級新人，如何撕去菜鳥標籤

原文地址： https://github.com/ruizhengyu...
做爲前端新人，咱們常以菜鳥自居，主要是專業程度不高，還有就是自謙。其實，做爲菜鳥的咱們也想撕掉這類標籤，咱們也努力，可仍是學很差前端，是真的不適合作這行仍是方法不對，沒人告訴咱們？若是你以爲本身還處在菜鳥階段的迷茫區，那能夠看看本篇文章，但願看完以後你能獲得想要的。若是你要闡述你的想法，請在評論區留下你的文字。

前端路上咱們都會碰到這類情景：現有技術體系已經很龐大了，還沒學個遍，新技術又頻繁涌出，發現有太多太多東西要學，隱隱有點學不動的趨勢。不知不覺就在這條路上迷茫了，發現本身原來那麼眇小。正所謂登高極目，知天地之大；置己蒼茫，知寸身之微。

個人邏輯是：現實咱們是改變不了了，咱們能掌握的是改變本身的學習方法和思惟邏輯。咱們常說萬變不離其宗，對於前端來講，這個宗個人理解就是 html + css + js 。

• 建體系。將現有知識作個體系架構，而後將市場上前端技術點填入到這個體系架構中，無論新出現的知識是怎樣的，都在這個體系架構內，無非是對架構的補充或完善（新增和修改），咱們要作的不就不斷完善這個體系架構，體系架構可參考《8年前端知識點沉澱》；
• 深刻。在每一個分類中擇其一，而後深耕；
• 淺出。用本身的語言將深耕的知識點輸出出來，能夠文字，能夠聲音（分享）；

無論如今處於初級、中級、高級、資深仍是大前端階段，學習的通用方法大抵如此，固然小異部分我會在各個階段單獨指出。以上純屬我的觀點，若有補充和指正可按文章開頭方法在評論區評論（即 github 上登陸後評論）。

學習方法

代碼管理

1.在 github 建個倉庫，好比 html-note，只在 master 主分支上開發便可，完成一類知識點打個標籤

git tag -a 0.1.0 -m "這一類知識的說明"
git push origin --tags

2.利用 gitbook 庫來打包成小書，而後利用 github 自帶功能生成在線的，而後本身沒事的時候，看看本身學的東西，而後再查缺補漏，不斷完善；
3.學習文檔用 markdown 語法來寫，養成寫文檔的好習慣，對於爲何寫文檔和項目開發中前端須要寫哪些文檔，我會在後續的文章中闡述，這裏不展開；
4.編碼工具可用 Vscode，整個目錄可參考

.
├─ package.json      # 依賴包
├─ SUMMARY.md        # 文檔大綱
├─ book.json         # 小書配置信息
├─ assets/           # 靜態資源，主要是圖片
├─ notes/            # 文檔中示例存放

前端基礎

HTML5 + CSS2.1

這部分建議在 w3school 在線教程或MDN 上學習，邊學邊練，學習過程當中請打開 chrome 瀏覽器調試工具，輔助學習和調試。

ECMAScript

這部分學的內容會不少，若是沒有編程語言的基礎的話，會吃些力。建議先在 w3school 在線教程或MDN 上學習。

犀牛書《javascript語言精粹》或紅寶書《Javascript 高級程序設計》，前期看其中的一本就好，這個時候你能夠建倉庫 ecmascript-note 了;

數據結構和算法

實踐開發中，和後端提供的接口交互以及前端自身的邏輯處理，而後將數據渲染到頁面，每每離不開數據結構和算法這塊的知識。

前端初級

CSS

有了 CSS 基礎知識，還須要繼續深刻，瞭解

• css3 規範；
• 預編譯語言：less 或 sass；

只有經歷這個過程，你纔會發現 less 的美。看完這塊，你的瞭解選擇器、盒模型、彈性佈局、媒體查詢等概念。

ECMAScript

• Zepto.js 或 jQuery.js。完成一些簡單項目，熟悉 API；
• 推薦小黃書《你不知道的 JS》上中下三冊；
• ES5 知識點掌握，能區分 ES5 與 ES3 經常使用的一些知識點；
• ES6 經常使用的一些知識點，暫時不推薦阮一峯老師的 ES6 教程，太多了，怕你會迷茫和陷入無聊區，找一些總結小書（一些經常使用的 ES6 語法總結）看看，一直想寫，沒時間；
• 經常使用概念（面試也會碰到）弄清楚。好比變量做用域、傳遞方式、執行上下文、閉包、apply/call/bind、this 指向等；
• 網絡編程。Ajax、fetch、websocket、cors、jsonp、formData等知識。

瀏覽器

• 經常使用跨域；
• 存儲機制；

性能

• 經常使用性能優化；

安全

• 瞭解 XSS 和 CSRF 攻擊；

正則表達式

• 基礎知識，視頻或一些文檔，此刻不建議看官方文檔；
• 經常使用正則表達式會寫；

工程化

• npm 經常使用命令和簡單應用；
• git 經常使用命令和簡單應用；
• webpack 能搭建一個應用；

React.js

對於面前前端三大框架，你們都不陌生了。建議擇其一，而後瞭解入門知識。我安利的是 React.js，我的傾向，無外乎其餘。主要學習中英文官網入門知識。結合 create-react-app 腳手架。

Node.js

• 基礎知識；
• express 或 koa2 簡單應用；

說明：上面學習內容不求學完都記得，能掌握 70%-80% 就能夠了，主要有個先入爲主的概念，之後碰到這類問題，知道怎麼去描述問題，培養獨立解決問題的能力。

最後，祝你好運。有什麼補充，請按文章看頭說的方法給出你的想法。前端中級，我會盡快寫完，不要離開哦。