目錄
- 前言
- 概念
- js基礎知識
- Document基礎知識
- 網路
- CSS
前言
常常有人問我，如何成為一名初、中、高階前端。並且發現我身邊的大多數人知識面並不是很成體系，總會有各種知識漏洞。如果你還不清楚如何才算初級工程師，自己的知識體系有沒有漏洞，可以參考這篇我整理的知識點及相應教程。
如果你的知識體系存在漏洞，那麼所學的知識就很難融會貫通。初中高階是有條主線的。不要走歪路。
ps：紅色需精通，綠色瞭解
一、概念
什麼是javascript ： zh.javascript.info/intro
開發工具進階：外掛 及 Emmet語法 www.jianshu.com/p/182a67c32…
二、js基礎知識
1、資料
變數 zh.javascript.info/variables
數字型別 zh.javascript.info/number
型別轉換 zh.javascript.info/type-conver…
型別檢測 zh.javascript.info/instanceof
2、運算
值的比較 zh.javascript.info/comparison
運算子 zh.javascript.info/operators
條件運算子 zh.javascript.info/ifelse
邏輯運算子 zh.javascript.info/logical-ope…
Switch zh.javascript.info/switch
ES5迴圈 zh.javascript.info/while-for
程式碼結構 zh.javascript.info/structure
3、物件
物件原始值轉換 zh.javascript.info/object-topr…
建構函式和操作符 zh.javascript.info/constructor…
物件的鍵、值、項 zh.javascript.info/keys-values…
Object.prototype developer.mozilla.org/zh-CN/docs/…
4、陣列
陣列方法 zh.javascript.info/array-metho…
解構賦值 zh.javascript.info/destructuri…
Array.prototype developer.mozilla.org/zh-CN/docs/…
5、JSON
6、Date
時間和日期 zh.javascript.info/date
7、functions
函式簡介 zh.javascript.info/function-ba…
函式物件 zh.javascript.info/function-ob…
函式表示式 zh.javascript.info/function-ex…
遞迴和堆疊 zh.javascript.info/recursion
this原理 www.ruanyifeng.com/blog/2018/0…
Rest與Spread zh.javascript.info/rest-parame…
排程 zh.javascript.info/settimeout-…
柯里化 zh.javascript.info/currying-pa…
8、原型
原型簡介 zh.javascript.info/prototype-m…
原生的原型 zh.javascript.info/native-prot…
9、繼承
ES3、5、6中的繼承 juejin.im/post/5a4852…
10、Class
class基本語法 zh.javascript.info/class
類繼承 zh.javascript.info/class-inher…
靜態屬性和靜態方法 zh.javascript.info/static-prop…
11、錯誤處理
try catch zh.javascript.info/try-catch
12、Promise，async/await
回撥 zh.javascript.info/callbacks
Promise zh.javascript.info/promise-bas…
Promise鏈 zh.javascript.info/promise-cha…
Promise錯誤處理 zh.javascript.info/promise-err…
PromiseAPI zh.javascript.info/promise-api
Async/await juejin.im/post/5a9516…
11、模組
模組簡介 zh.javascript.info/modules-int…
匯入匯出 zh.javascript.info/import-expo…
動態匯入 zh.javascript.info/modules-dyn…
12、正則
正則用法 zh.javascript.info/localstorag…
三、Document基礎知識
1、DOM
瀏覽器環境 zh.javascript.info/browser-env…
DOM樹 zh.javascript.info/dom-nodes
DOM節點 zh.javascript.info/dom-navigat…
DOM獲取 zh.javascript.info/searching-e…
DOM屬性 zh.javascript.info/basic-dom-n…
DOM方法 zh.javascript.info/modifying-d…
DOM樣式 zh.javascript.info/styles-and-…
元素尺寸與滾動 zh.javascript.info/size-and-sc…
zh.javascript.info/size-and-sc…
2、事件
瀏覽器事件 zh.javascript.info/introductio…
移動端事件 juejin.im/post/59ede9…
監聽事件 www.runoob.com/jsref/met-e…
事件冒泡 segmentfault.com/a/119000000…
事件委託 zh.javascript.info/event-deleg…
預設動作 zh.javascript.info/default-bro…
滑鼠事件 zh.javascript.info/mouse-event…
移動事件 zh.javascript.info/mousemove-m…
拖放事件 zh.javascript.info/mouse-drag-…
鍵盤事件 zh.javascript.info/keyboard-ev…
滾動事件 zh.javascript.info/onscroll
防抖與節流 juejin.im/post/5b8de8… （第三期不用看）
四、網路
1、http
網際網路模型 www.ruanyifeng.com/blog/2012/0…
網際網路協議 www.ruanyifeng.com/blog/2016/0…
2、Storing data in the browser
Cookie zh.javascript.info/cookie
LocalStorage、SessionStorage zh.javascript.info/localstorag…
3、request
XMLHttpRequest segmentfault.com/a/119000000…
Axios 全攻略 ykloveyxk.github.io/2017/02/25/…
Axios官方文件 www.axios-js.com/zh-cn/docs/
五、CSS
1、基礎css
css基礎教程 www.w3cschool.cn/css/css-tut…
css rgba www.cnblogs.com/xiao-pang/p…
css 量度單位 blog.csdn.net/geekmubai/a…
2、佈局
佈局方式概念 www.jianshu.com/p/d9718a5be…
佈局方式實踐 segmentfault.com/a/119000001…
定位佈局 www.cnblogs.com/Ry-yuan/p/6…
flex佈局 www.ruanyifeng.com/blog/2015/0…
媒體查詢 developer.mozilla.org/zh-CN/docs/…
3、css選擇器
選擇器 www.w3school.com.cn/cssref/css_…
偽類、偽元素 segmentfault.com/a/119000001…
4、動畫
Transform www.w3school.com.cn/cssref/pr_t…
Transition juejin.im/post/5b137e…
Animation www.php.cn/css-tutoria…
5、css變數
css變數 www.ruanyifeng.com/blog/2017/0…
END
這篇知識點乾貨是我在映客用於雛鷹培養計劃用的。相應考題我就先不發出來了。如果someone很有需要，一樣評論留言。當然，你也可以用於自己公司內部培養計劃用，後續中高階知識體系，不久就會發布出來。
我總結的教程都是一些通俗易懂篩選出來的。方便大家學習，並不是官方晦澀難懂的文件。
下一篇在這裡