整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
然這篇文章花了很長時間，肯定也有其局限性；希望各位不吝指出。
入題
我們儼然能感受到前端崗位現在已經發展成了最重要的研發崗位之一，所以對我們提出的要求也就越來越高。所以我們需要學的也就不僅僅只是 CSS & HTML & JavaScript 了。但這三大件一直都是前端的根本，這一點從未改變。而這三大件中 JavaScript 又是重中之重。
接下來我會結合我的一點經驗，給出前端學習路線的一些具體建議。
目錄
三大件學習
現在每年依舊有很多初級入門的前端開發。所以對初入門的朋友也給出一點意見。
剛入門的朋友，我覺得不應該一開始就學習像 Vue、TypeScript、Webpack 等知識。應該把重點放在 CSS & HTML & JavaScript 基礎知識的學習上。
CSS & HTML
對于剛入門的朋友我依舊建議先將 CSS(3) & HTML(5) 的知識點認真學習一邊。學習的途中最好是學習完一部分就自己在敲一遍代碼，加深自己的記憶。
當然如果你愿意，建議你可以先仿一個網站的靜態頁面（掘金、知乎等都可以），有一些屬性就可以了解他實際的實現場景。
當然剛開始敲代碼的時候還是不要過分依賴自動補全功能，一開始就使用自動補全對你記憶一些屬性時沒有幫助的；踏實點學習，日后會有回報的。
關于 CSS(3) 你需要了解的一些知識點
CSS 說容易也容易，說復雜也復雜；因為 CSS 總是能給你意外的驚喜。
HTML(5) 你需要了解的一些知識點
說到 HTML 我想有很多人是 div 一把梭。因為 div 用的爽，不用擔心默認樣式。
有人說 HTML 語義化的優點很多，比如清晰的頁面結構、有利于 SEO、便于團隊開發和維護；這些我都承認，不過我還是喜歡 div 一把梭。
JavaScript
JavaScript 一直都是我們前端的基石，一定程度上 JavaScript 的理解深度決定了你的發展。所以一定要用心學習。
現在很多人一看到閉包、原型鏈、作用域鏈、繼承之類的文章都是直接跳過，你現在可以自問一下你的確理解這些基礎的知識點嗎？
JavaScript 的基礎知識點確實很多，所以《JavaScript 高級程序設計》 寫了 700 多頁；不過當你 JS 基礎扎實后，你會發現你在學習框架、亦或是學習框架源碼的時候會輕松許多。
JavaScript（ES6+） 你需要了解的一些知識點
上面說的 CSS & HTML & JavaScript 的基礎知識點并不需要你一入門就全部都理解透徹；有些雖然是基礎，但卻也有它的難度。就算是高級也不敢說自己全都掌握了，有句話說的挺好 —— 書讀百遍、其義自見。
我們第一遍學習不可能盡懂，到最少可以給我留下一個印象。過一段時間再學習這塊知識點的時候，你肯定會有一個全新的理解。學習只一個需要一直在線的任務，重復的學習可以幫助你保持持續的競爭力。
我先聲明一點，我并沒有說其他技術不需要去學習，只不過初入門最好重點是先將基礎夯實。
其實三大件的學習不需要花費多少時間，有基礎的大概 3 個月就可以大致的看一遍。 是否真的理解這是后話，不過已經算是入門了。
CSS & HTML & JavaScript 推薦書籍/網站
HTML 不知道推薦什么書。我個人覺得看教程和動手實踐就基本沒什問題。
接下來我們就可以學習一些工具類的庫了。
庫工具
對于庫工具而言我們常用的有 JQuery、underScore、zepto、Moment 等
這些庫給我們提供了很大的便利，省去了我們編寫相關方法的時間，同時也是我們的程序更加穩健 —— 我們自己寫的方法很可能在某些情況下就出 bug 了。
當然對于這些庫我們不僅僅只是去了解 API，我們需要去學習它的源碼。看看如果自己寫相關方法的話是不是也想到了這種方式，這些庫工具是也是一個很好地學習工具，我們不應該忽略。
這種問題的答案不就在 Underscore 源碼里面嗎？
我們在學習庫工具的時候，必定是需要回頭看 JavaScript 基礎的；這也就進一步夯實了基礎。
前端框架（ MVVM ）的學習
當下最火的框架想必一定是 React 和 Vue，如果 JQuery 的存在是是我們更加方便的操作 DOM,那么現在 MVVM 框架則是讓我們從手動更新 DOM 的繁雜操作中解放出來。
至于 React 和 Vue 該學習哪一個，更多的還是看當下公司使用的是哪一個（也不是必然）。對于 Vue(React) 該如何使用其實不用多久就能上手，我們更應該關心的是他們背后的設計思想和實現原理。
一些問題
我們對于框架的 API 使用沒必要花太多時間，應該多研究他們背后的設計思想和實現原理。
Vue 和 React 我該選擇哪一個？
對于這個問題相比很多人都有困擾（有些人兩個都學，也就沒有這個困擾），這個問題已經有很多人回答了。但我還是覺得不是非要選擇哪一個才是政治正確，選擇你需要的。
感興趣的可以看看這篇文章：
React or Vue: Which Javascript UI Library Should You Be Using?
以下是提煉的文中觀點：
Vue的優勢是：
React的優勢是：
Vue 相關資料
對于框架的一些學習資料我個人更傾向于推薦官方文檔，有很多問題官方文檔已經說得很清楚了。市面上有些書籍也就是對官方文檔進行了一個擴寫（不排除有精良之作）。
瀏覽器 & 計算機基礎
如果你希望能能快速進階到高級工程師，那么對于瀏覽器 & 計算機基礎的知識你就必要又有一定的掌握。因為這能讓你更好的理解前端。
瀏覽器一直是 JavaScript 最重要的宿主環境，所以我們必須去了解 JavaScript 在瀏覽器中是如何執行的。
我們前端開發接觸最多的應該就是瀏覽器了，記得工作第一年最頭痛的就是處理 IE 的兼容問題。工作中出現的很多問題都和瀏覽器有關，所以我覺得了解瀏覽器工作原理是非常有必要的。
為何要學習瀏覽器工作原理？
計算機基礎
對于計算機基礎我們需要做到大體了解，這樣的話我們對整體的流程會有一個大概的把握。在實際開發過程中不會過于被動。
需要了解的一些知識點
這里僅僅列出了一部分知識點，如果想全面的學習可以看下面推薦的資料。
瀏覽器 & 網絡基礎推薦書籍/資料
前端工程化
從事前端稍微久一點的開發就一定會有這個感受 —— 前端開發越來越工程化，越來越復雜。
對于前端開發來說，現在前端要做的不只是切頁面調接口這么簡單，我們需要了解的技術無疑更加廣泛。
前端工程化的一點淺見
由于項目的復雜度越來越高，前端需要做的工作就越來越繁重。當項目復雜就會產生許多問題，比如：
前端工程化細分的話我覺得可以分成模塊化、組件化、規范化三個方向。或者說一切能提升前端開發效率，提高前端應用質量的手段和工具都是前端工程化的實踐。
模塊化
組件化
從 UI 拆分下來的每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，我們稱之為組件。
也就是將復雜頁面按功能拆分成多個獨立的組件。
規范化
前端工程化一些知識點
性能優化
提起性能優化，大家最先想到的是什么？我最先想到的是一道面試題：
從輸入 URL 到頁面加載完成的具體過程
因為從直觀層面來看，我們前端需要優化的步驟基本都在這個加載工程當中。
性能優化現在對于前端來說已經是必不可少的技能了，當然現在有些所謂的性能優化的技巧現在都成為了一種需要遵從的規范。
我們需要關注兩個方向的性能優化：
性能優化一些知識點
推薦資料
Nodejs
我們知道由于 Nodejs 的出現，前端開發出現了一個新的高潮。JS 開始可以涉及后端領域，JS 的可能性更大了。
Nodejs 一些知識點
數據結構和算法
這一點我也比較薄弱，就不展開了。關于這部分你可以刷 leetcode。
另外推一本書《學習 JavaScript 數據結構與算法》（第三版）
依葫蘆畫瓢
我們在項目開發的過程中可以接觸到很多優秀的庫工具或者是 UI 庫。如 lodash、underscore、moment、element-ui、antd design 等。
我們可能自己設計不出來這么優秀的工具，但是我們完全可以依葫蘆畫瓢自己按著這些工具寫一遍，你就會發現里面有很多不可思議的技巧、優秀的思想。
依葫蘆畫瓢對學習來說也是一個非常有用的技巧。
序員書庫（ID：OpenSourceTop）綜合整理
綜合自：https://space.bilibili.com/511221970?spm_id_from=333.788.b_765f7570696e666f.2、https://www.zhihu.com/people/zhou-bo-lei
上個月，香港中文大學（CUHK）信息工程系助理教授周博磊在知乎上表示自己有一個大膽的想法：每周把每節課用中文在B站上直播《強化學習》課程：
近日，經過一番內心掙扎的周博磊終于在B站上上傳了第一課。
這門課講了什么？
該課程分為基礎部分和高階強化部分，基礎部分是由8個小節組成，每一節可能會有兩個課時左右，首先從強化學習的基礎開始。
第二部分是高階的課程內容，如圍棋AI AlphaGo、游戲AI AlphaStar、OpenAI Five以及強化學習的分布式構建、生成模型等。課程使用的編程語言是Python，深度學習框架則是PyTorch為主。
此外，周博磊老師還推薦讀者使用《深度學習》這本書，這本書的英文版是開源的，可以免費下載，《深度學習》下載地址：http://incompleteideas.net/book/the- book- 2nd.html
課程適合人群
這門課程面向大三大四以及研一的同學。你應該具備一些線性代數的背景知識，上過概率論、機器學習相關的一門課程（數據挖掘、模式識別、深度學習等）。有Python和PyTorch編程經驗。
第一節課部分PPT展示
第一課包含上下兩個部分，主要介紹強化學習的基本概念、序列決策入門、強化學習編程實踐等內容。部分PPT展示如下：
課程地址：https://space.bilibili.com/511221970?spm_id_from=333.788.b_765f7570696e666f.2
最后，課程的PPT和代碼都會上傳到Github上，需要的同學也可以前往下載。（Github地址：https://github.com/zhoubolei/introRL）
下面的技巧，后三個，請謹慎用于團隊項目中(主要考慮到可讀性的問題)，不然，leader 干你沒商量。
這個技巧用的很多，也非常的簡單
通過兩個取反，可以強制轉換為Boolean類型。較為常用。
這個也特別簡單，String轉化為Number
會自動轉化為number類型的。較為常用。
這個其實非常有實用價值，不算是裝逼。只是其他語言里沒有這么玩的，給不太了解js的同學看那可牛逼大了。
實用價值在于可以防止全局污染。不過現在隨著ES2015的普及已經沒什么必要用這個了，我相信五年之后，這種寫法就會逐漸沒落。
自己干五年，在實習生面前裝逼用也是蠻不錯的嘛~
閉包嘛，js 特別好玩的一個地方。上面的立即執行函數就是對閉包的一種運用。
不了解的回去翻翻書，知乎上也有很多討論，可以去看看。
閉包用起來對初學者來說簡直就是大牛的標志(其實并不是)。
上面用到了閉包，看起來還挺裝逼的吧。不過好像沒什么實用價值。
那么這樣呢？
通過高階函數很輕松的實現判定類別。(別忘了有判定Array的Array.isArray())
當然，很明顯，這只是基礎，并不能更裝逼一點。來看下一節
事件響應前端肯定都寫爛了，一般來說如何寫一個計數器呢？
好像是沒什么問題哦，但是！變量times為什么放在外面，就用了一次放在外面，命名沖突了怎么辦，或者萬一在外面修改了怎么辦。
這個時候這樣一個事件監聽代碼就比較牛逼了
怎么樣，是不是立刻感覺不一樣了。瞬間逼格高了起來！
通過創建一個閉包，把times封裝到里面，然后返回函數。這個用法不太常見。
高能預警
從這里開始，下面的代碼謹慎寫到公司代碼里！
parseInt
這個函數太普通了，怎么能裝逼。答案是
~~
現在摁下
F12
，在console里復制粘貼這樣的代碼：
這個技巧十分裝逼，原理是
~
是一個叫做按位非的操作，會返回數值的反碼。是二進制操作。
原因在于JavaScript中的number都是double類型的，在位操作的時候要轉化成int，兩次~就還是原數。
十六進制操作。其實就是一個Array.prototype.toString(16)的用法
看到這個詞腦袋里冒出的肯定是CSS的顏色。
做到隨機的話可以這樣
底下的原文鏈接非常建議去讀一下，后三個技巧都是在那里學到的。
注：
此隨機數會產生五位，四位，甚至一位的顏色。所以嚴謹的話還是要做一下判定的
@yangfch3
,
然后其實也有了很多改進的地方。詳細請看下面的評論
@scar
,
謝謝
@mitsunchieh
的勘誤, 真的從各位大神身上學到了很多
?
左移操作。這個操作特別叼。一般得玩 C 玩得多的，這個操作會懂一些。一般半路出家的前端碼農可能不太了解(說的是我 ?)。
這個也是二進制操作。將數值二進制左移
解釋上面的
1<<24
的操作。
其實是1左移24位。
000000000000000000000001
左移24位，變成了
1000000000000000000000000
不信？
試著在console粘貼下面的代碼
其實還有一種更容易理解的方法來解釋
二進制操作。
不安逸，不浮躁。任何學習都不是一蹴而就的，牛B就是一個學習積累的過程，別指望兩三個月，你的水平就多么厲害。倚天屠龍記里面的武功最牛B的是張三豐，而不是張無忌。
任何工作都需要多種技能，別忽略了html,css等其他知識的學習。
javascript學習是一個時時刻刻需要思考的技能，他并不是一勞永逸的，所以學習javascript需要自己有一個持續學習的心。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
