前端-基礎知識體系（初級-上）

前言

經常有人問我，如何成爲一名初、中、高級前端。而且發現我身邊的大多數人知識面並非很成體系，總會有各類知識漏洞。若是你還不清楚如何纔算初級工程師，本身的知識體系有沒有漏洞，能夠參考這篇我整理的知識點及相應教程。javascript

若是你的知識體系存在漏洞，那麼所學的知識就很難融會貫通。初中高級是有條主線的。不要走歪路。php

1、概念

什麼是javascript ： zh.javascript.info/introcss

開發工具進階：插件及 Emmet語法 www.jianshu.com/p/182a67c32…html

2、js基礎知識

ES三、五、6中的繼承 juejin.im/post/5a4852…

十、Class

class基本語法 zh.javascript.info/class

類繼承 zh.javascript.info/class-inher…

靜態屬性和靜態方法 zh.javascript.info/static-prop…

十一、錯誤處理

try catch zh.javascript.info/try-catch

十二、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…

十一、模塊

模塊簡介 zh.javascript.info/modules-int…

導入導出 zh.javascript.info/import-expo…

動態導入 zh.javascript.info/modules-dyn…

十二、正則

正則用法 zh.javascript.info/localstorag…

3、Document基礎知識

一、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…

二、事件

瀏覽器事件 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… （第三期不用看）

4、網絡

一、http

互聯網模型 www.ruanyifeng.com/blog/2012/0…

互聯網協議 www.ruanyifeng.com/blog/2016/0…

二、Storing data in the browser

Cookie zh.javascript.info/cookie

LocalStorage、SessionStorage zh.javascript.info/localstorag…

三、request

XMLHttpRequest segmentfault.com/a/119000000…

Axios 全攻略 ykloveyxk.github.io/2017/02/25/…

Axios官方文檔 www.axios-js.com/zh-cn/docs/

5、CSS

一、基礎css

css基礎教程 www.w3cschool.cn/css/css-tut…

css rgba www.cnblogs.com/xiao-pang/p…

css 量度單位 blog.csdn.net/geekmubai/a…

二、佈局

佈局方式概念 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/…

三、css選擇器

選擇器 www.w3school.com.cn/cssref/css_…

僞類、僞元素 segmentfault.com/a/119000001…

四、動畫

Transform www.w3school.com.cn/cssref/pr_t…

Transition juejin.im/post/5b137e…

Animation www.php.cn/css-tutoria…

五、css變量

css變量 www.ruanyifeng.com/blog/2017/0…

END

這篇知識點乾貨是我在映客用於雛鷹培養計劃用的。相應考題我就先不發出來了。若是someone頗有須要，同樣評論留言。固然，你也能夠用於本身公司內部培養計劃用，後續中高級知識體系，不久就會發布出來。

我總結的教程都是一些通俗易懂篩選出來的。方便你們學習，並非官方晦澀難懂的文檔。

下一篇在這裏

前端-基礎知識體系（初級-下）

前端-基礎知識體系（初級-上）

目錄

前言

1、概念

2、js基礎知識

一、數據

二、運算

三、對象

四、數組

五、JSON

六、Date

七、functions

八、原型

九、繼承