前端知識體系介紹
這里排版比較亂，可以參考這個：https://hackmd.io/s/rJ7ll5nrb (有點醉，博客園連markdown的鏈接語法都解析錯，請自行復制粘帖)
拿到第一張工作牌，第一次參加公司培訓，感覺很奇妙。很久沒寫文章了，今天給各位園友分享一下我入職遠光大約三周的體會。（ps：因為這是一個練習markdown語法的作業，邏輯性不強，隨便寫的😄）
隨便說說😄
我是6月份投的簡歷，崗位是前端開發崗，屬於公司的大數據事業部，感覺面試表現不是太好，當時面試官問我關於session和cookie的問題，答的不好，然后面試官很耐心講了一遍（感謝殷工）。后來收到郵件說面試通過了（可能公司對應屆生要求不是太高），非常高興，遠光軟件還是不錯的，主要是做電力公司管理軟件的（財務管理，燃料管理之類的），主要客戶時國家電網、南方電網，很牛比👍👍👍，有木有。
7.6號提前一天入職了，因為7、8、9去北京參加愛奇藝的比賽了（尷尬😬，第一天就請假，錯過了與小伙伴們玩游戲的機會，可氣的是沒得獎）。入職第一天，辦理了入職手續，然后領了電腦，安排了工位，然后就是裝軟件裝了一天。（感謝亞婷姐為我們跑前跑后，感謝蔡工的指導。❤️❤️❤️）
這一天的體會是公司的安全工作好嚴格啊（不知道其他公司是不是也是這樣）。沒法訪問外網，文件是加密的，要登錄一個什么客戶端才能解密。沒法訪問外網還是很頭疼的，雖然公司共享里邊有一些必要的軟件，但是有的自己喜歡的ide還是沒法裝。后來殷工說訪問外網是需要寫申請書的。
后來到公司就是參加培訓了，首先是做的公司產品、管理規范、項目管理工具方面的介紹，說實話，不太能聽懂。然后就是一個為期一個多星期的前端技能的培訓（今天下午有測試），講的比較粗，大致上把前端的一些東西拉了一遍。這個時今天分享的重點。
前端技術棧
-
前端基礎
以上是前端的基本功，一些HTML5的新特性，新API還有CSS3的一些新特性，以及ES6的新語法也是比較熱門的，培訓中都有涉及。 -
框架或庫
這是前端常用到的庫和框架，包括：
- jQuery
- bootstrap
- requireJs
- echarts
- vue
- angularJs
- ionic
-
一些工具
目前用的最多的工具主要時npm模塊管理工具，gulp、grunt、webpack等自動化或者模塊管理工具。培訓主要講的時webpack。上幾個圖。
前端的其他方面
-
性能與安全
- 從瀏覽器渲染角度考慮性能（並發下載，阻塞等等）
- 從js執行效率考慮性能
1.避免內存泄漏
2.避免意外全局變量
3.避免蠻力算法
4.減少dom操作 - 考慮跨站點腳本攻擊和跨站點偽造（不要相信任何用戶輸入）
-
前端延伸
- 借助v8引擎通過nodejs向服務端延伸
- 向桌面應用延伸
以上就是前端方面的知識體系，兩周左右的培訓將這些東西基本點到了。為了練習一下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語法不多，但是還是請給個滿分！因為學姐最美了！心地最最善良了！