前端知識體系

前端知識體系介紹

這裏排版比較亂，能夠參考這個：https://hackmd.io/s/rJ7ll5nrb (有點醉，博客園連markdown的連接語法都解析錯，請自行復制粘帖)
拿到第一張工做牌，第一次參加公司培訓，感受很奇妙。好久沒寫文章了，今天給各位園友分享一下我入職遠光大約三週的體會。（ps：由於這是一個練習markdown語法的做業，邏輯性不強，隨便寫的😄）

隨便說說😄

我是6月份投的簡歷，崗位是前端開發崗，屬於公司的大數據事業部，感受面試表現不是太好，當時面試官問我關於session和cookie的問題，答的很差，而後面試官很耐心講了一遍（感謝殷工）。後來收到郵件說面試經過了（可能公司對應屆生要求不是過高），很是高興，遠光軟件仍是不錯的，主要是作電力公司管理軟件的（財務管理，燃料管理之類的），主要客戶時國家電網、南方電網，很牛比👍👍👍，有木有。

7.6號提早一天入職了，由於七、八、9去北京參加愛奇藝的比賽了（尷尬😬，第一天就請假，錯過了與小夥伴們玩遊戲的機會，可氣的是沒得獎）。入職第一天，辦理了入職手續，而後領了電腦，安排了工位，而後就是裝軟件裝了一天。（感謝亞婷姐爲咱們跑前跑後，感謝蔡工的指導。❤️❤️❤️）

這一天的體會是公司的安全工做好嚴格啊（不知道其餘公司是否是也是這樣）。無法訪問外網，文件是加密的，要登陸一個什麼客戶端才能解密。無法訪問外網仍是很頭疼的，雖然公司共享裏邊有一些必要的軟件，可是有的本身喜歡的ide仍是無法裝。後來殷工說訪問外網是須要寫申請書的。

後來到公司就是參加培訓了，首先是作的公司產品、管理規範、項目管理工具方面的介紹，說實話，不太能聽懂。而後就是一個爲期一個多星期的前端技能的培訓（今天下午有測試），講的比較粗，大體上把前端的一些東西拉了一遍。這個時今天分享的重點。

---

前端技術棧

• 前端基礎
  
  
  以上是前端的基本功，一些HTML5的新特性，新API還有CSS3的一些新特性，以及ES6的新語法也是比較熱門的，培訓中都有涉及。

• 框架或庫
  
  
  
  這是前端經常使用到的庫和框架，包括：

1. jQuery
2. bootstrap
3. requireJs
4. echarts
5. vue
6. angularJs
7. ionic

• 一些工具

目前用的最多的工具主要時npm模塊管理工具，gulp、grunt、webpack等自動化或者模塊管理工具。培訓主要講的時webpack。上幾個圖。

---

前端的其餘方面

• 性能與安全

1. 從瀏覽器渲染角度考慮性能（併發下載，阻塞等等）
2. 從js執行效率考慮性能
   1.避免內存泄漏
   2.避免意外全局變量
   3.避免蠻力算法
   4.減小dom操做
3. 考慮跨站點腳本攻擊和跨站點僞造（不要相信任何用戶輸入）

• 前端延伸

1. 藉助v8引擎經過nodejs向服務端延伸
2. 向桌面應用延伸

以上就是前端方面的知識體系，兩週左右的培訓將這些東西基本點到了。爲了練習一下markdown語法，大～熊先作一個表格總結一下前端知識體系，而後簡要介紹一些東西。

項目	1	2	3	4	5	6	7
前端基礎	html5	css3	javascript	ES6
前端框架與庫	jquery	bootstrap	vue	angularjs	ionic	requirejs	react
前端工具	webpack	grunt	gulp	less	sass
前端其餘	性能	安全	兼容	nodejs	計算機網絡

表一：前端知識庫

---

前端基礎--html5

html5前兩年很是火，h5的主要改變有下面幾點：

• 新增了一些結構元素，例如header，section，footer等等
• 新增了一些屬性，例如contentEditable
• 新增一些表單類型，number，url等
• 廢除了一些不那麼經常使用或者能夠經過css實現的元素
• 新增了一些好用的接口
• 與存儲相關的localStroage、sessionStroage、indexedDB
• 與文件訪問相關的FileSystem相關的接口
• cache接口
• canvas
• video、audio
• websocket
• webworker
• 還有新增了一些事件

更多請參考：w3school

---

前端基礎--css3

不得不說css3真的很棒，尤爲是他的動畫，可是學好也是很難的。css3涉及的東西以下：

• 選擇器的擴展
• 一些樣式，例如背景、文字、邊框等等
• 一些佈局相關的東西，例如flex，column等等
• 一些變形，transform
• 過分效果,transition
• 基於關鍵幀的動畫，animation

更多請參考：w3school

---

前端新知--ES6

ES6看上去怪怪的，不過挺好玩的，我比較喜歡他的函數參數默認值，模塊管理，還有promise。參考阮一峯老師的那本書，ES6的要點以下：

• let 和 const 關鍵字
• 變量的解構賦值
• 字符串的擴展
• 正則的擴展
• 數值的擴展
• 函數的擴展
• 數組的擴展
• 對象的擴展
• Symbol
• Set 和 Map 數據結構
• Proxy
• Reflect
• Promise 對象
• Iterator 和 for...of 循環
• Generator 函數的語法
• Generator 函數的異步應用
• async 函數
• Class 的基本語法
• Class 的繼承
• Decorator
• Module 的語法
• Module 的加載實現

給一段ES6的代碼（是否是很怪，ps：練習代碼塊編寫）

function bar(func = () => foo) {
  let foo = 'inner';
  console.log(func());
}

bar() // ReferenceError: foo is not defined

更多請參考：ES6標準入門

---

前端框架或庫--jquery

全部學前端的不可能不知道jquery，我的認爲jquery有以下特色：

• 強大的選擇器，固然如今經過h5的api也能夠實現
• 好用的方法
• 良好的兼容性
• 動畫的支持
• 豐富的插件

更多請參考：jqury文檔

---

前端框架或庫--bootstrap

有了bootstrap，寫幾個class就能夠作一個漂亮的響應式頁面，並且還能夠用他的至關好用的js插件。very 彎的four！👏👏👏

更多請參考：bootstrap中文文檔

---

前端框架或庫--vue

國內大神尤雨溪經典做品，讓咱們向這位大神致敬。這款框架很是容易學容易用，本人10分鐘就會用了（此處運用了誇張手法）。她有很是豐富的組件可用（請注意個人用詞：她），跟angular1長得很像，很是棒！還有一點須要再次強調，國產精品！👏

更多請參考：vue中文文檔

---

前端框架或庫--angular

你走開！angular4！我已經認不得你了。他採用了typescript，具體我也不太瞭解。後面學習了在更幾篇文章。

參考：官網

---

前端框架或庫--ionic

這個我就更不熟了，聽說是混合式應用必備利器。我要去學習了！不要攔我！

參考：官網

---

前端框架或庫--echarts

Echarts很牛逼哦！小弟也是剛學的，經過幾個簡單的配置就能夠畫出各類圖表了，nice！媽媽不再用擔憂我不會畫圖了。

參考：官網

---

前端框架或庫--requirejs

這是一個遵循AMD規範的模塊管理庫，我不是特熟，我是用的webpack，能夠用es6的import export

參考：官網

---

前端工具簡介

工具是幹嗎的，幫咱們偷懶的。

• grunt是一個任務執行器
• gulp是一個流式的任務執行器
• webpack是一個模塊打包工具

我的用的比較多的是webpack。具體能夠到各自的官網學習。webpack有個中文版的，文檔很好懂。

---

總結一下咯

上面就是這幾天培訓所講的核心內容的整理，只是點到而已，若是你想詳細學習的話去官網看文章就行了，也能夠看一些寫的比較好的博客。若是你有什麼新的知識要補充，或者法現文章中的任何問題請留言給我。最後要是你以爲大熊的文章寫的不錯，歡迎關注我，還差兩個粉絲就有40個粉絲了！！！

芳學姐，我用的morkdown語法很少，可是仍是請給個滿分！由於學姐最美了！心地最最善良了！