學習計劃
HTML5
- 認識HTML5語義化的意義。
- 熟悉HTML5新特性
- 瞭解如何快速的載入HTML頁面，以及完善使用者體驗如：閱讀模式、無障礙設定，
- 瞭解Canvas、Svg
CSS3
- 熟悉css3新特性，如：transform、transtion等等。
- 瞭解Css重繪是什麼？
- 熟悉Css繪製順序，Css在繪製的過程中也是有順序的，熟悉Css繪製順序，CSS會優先繪製元素的定位、大小然後才是其他的修飾，包括顏色、透明度等等，所以在css的編寫順序以位置、大小優先。
- 熟悉Sass、Less（css擴充套件語法），專案越大Css也就越難維護，而Sass、Less的出現就是為了解決這種問題，當然還有其他的方案例如：css-in-js，元件化css等等
- 熟悉Css的優先順序，並瞭解什麼是硬體加速。
JS
- 熟悉JS的基礎語法
- 熟悉JS和客戶端的互動，例如DOM操作，節點的操作，ajax請求等等
- JS是弱物件語言，那麼JS中如何實現一個類？請學習原型建構函式，並理解原型鏈的作用。
- 熟悉TypeScript語言，TypeScript是一個JS的超集，它的出現讓JS更加的像一門物件導向語言，TypeScript支援動態型別，相容ES6以及其他的原生語法。
- 瞭解polyfills和bable。在前端加速發展的程式中他們充當了很重要的角色，目前JS版本草案已經到了ES8，目前主流是ES6，但是目前主流瀏覽器大多全面相容Es5，那麼在使用高階語法的同時，你得需要向下相容，這就是它們存在的意義。
- 瞭解模組化規範（CommonJS、AMD），瞭解它們帶來的作用。
- 瞭解webPack等打包工具，打包工具的出現讓前端專案的開發趨向於自動化、工程化。包括檔案大小的壓縮，Css自動字首的處理等等。
- 瞭解JsLint、EsLint、TsLint 程式碼規範檢查工具
Angular(Js MVVM框架)
Angular的基礎語言採用TypeScipt，TypeScript得益於靜態型別的檢查以及強型別特性，在開發過程中可以加強相互協作，大大的減少程式碼錯誤，目前已經逐漸成為了趨勢。
Angular的底層嵌入了了Rxjs，什麼是Rxjs? RxJS 是使用 Observables 的響應式程式設計的庫。
響應式程式設計是一種面向資料流和變化傳播的程式設計正規化。這意味著可以在程式語言中很方便地表達靜態或動態的資料流，而相關的計算模型會自動將變化的值通過資料流進行傳播。
響應式程式設計可以加深你程式碼抽象的程度，讓你可以更專注於定義與事件相互依賴的業務邏輯，而不是把大量精力放在實現細節上，同時，使用響應式程式設計還能讓你的程式碼變得更加簡潔。
- 熟悉Angular的語法。
- 熟悉Angular路由機制。
- 熟悉元件互動，熟悉表單操作。
- 熟悉Rxjs，理解響應式程式設計思想
- 在根據官方文件學習的時候請優先理解它的思想。
- 請著重理解DI(依賴注入)
- 瞭解什麼是元件化？什麼是模組化？
- 以上理解之後請了解Zone.js，它為Angular做了些什麼事情？
- 瞭解什麼是自定義元件。
- 瞭解什麼是影子DOM。
- 熟悉HTML5 history，並參照Angular路由，並思考Angular的路由實現的機制。
- 去了解Angular如何優化效能的方案。
程式碼規範
- HTML、Css規範請參照：https://codeguide.bootcss.com/
- JS程式碼規範請參照：https://google.github.io/styl…
- TypeScript 規範請參照Tslint規範，Angular內建了一套
- Angular 程式碼風格請參照 https://angular.io/guide/styl…