六、框架和類庫
TypeScript
-
理解泛型、接口等面向對象的相關概念，TypeScript對面向對象理念的實現
泛型：
工程中，我們不僅要創建一致的定義良好的API也要考慮重用性。組件不僅能支持未來的數據類型，也能支持未來的數據類型。
泛型就是用來創建可重用的組件，一個組件可以支持多種類型的數據。
function getData<T>(value: T):T{
return value;
}
getData<number>(123);
getData<string>('21231');
接口：
在TypeScript裏，接口的作用就是爲這些類型命名和爲代碼定義契約。
TypeScript就是一個基於類的面向對象編程語言。類的繼承，重寫。接口，泛型，命名空間
-
理解使用TypeScript的好處，掌握TypeScript基礎語法
typescript提供了一套強類型的規範。便於模塊管理，團隊協作，開發嚴謹且自由。靜態類型檢查，IDE只能提示，代碼重構可讀性高。
-
TypeScript的規則檢測原理
-
可以在React、Vue等框架中使用TypeScript進行開發
React
-
React和vue選型和優缺點、核心架構的區別
-
React中setState的執行機制，如何有效的管理狀態
-
React的事件底層實現機制
-
React的虛擬DOM和Diff算法的內部實現
-
React的Fiber工作原理，解決了什麼問題
-
React Router 和 Vue Router的底層實現原理、動態加載實現原理
-
可熟練應用React API、聲明週期等，可應用HOC、render props、Hooks等高階用法解決問題
-
基於React的特性和原理，可以手動實現一個簡單的React
Vue
-
熟練使用Vue的API、生命週期、鉤子函數
-
MVVM框架設計理念
-
Vue雙向綁定實現原理、Diff算法內部實現
雙向綁定原理：Vue內部通過Object.defineProperty方法屬性攔截的方式，把data對象裏每個數據的讀寫轉化成getter/setter，當數據變化時通知視圖更新。
Diff算法：修改dom時只修改一小塊，不更新整個dom進行整個dom樹的重繪。根據真實DOM生成一個vietual DOM。
-
Vue的事件機制
Vue定義了四種事件監聽的API：$on、$once、$off、$emit
-
從template轉換成真實DOM的實現機制
template => DOM在Vue構建過程中的$mount過程開始的，template先是被編譯成render function，再被渲染成真實DOM。被編譯的過程：第一步parse解析成ast樹，第二步對ast樹進行optimize，檢測出其中不需要進行改變的DOM靜態子樹（可在後續渲染真實DOM過程中petch跳過，減少使用diff算法的工作量），最後generate成所需的code，將ast語法樹轉化成render function字符串。
從template到DOM(Vue.js源碼角度看內部運行機制)
多端開發
-
單頁面應用SPA的原理和優缺點，掌握一種快速開發SPA的方案
單頁面Web應用（single-page application，SPA）：
僅在web頁面初始化時加載相應的HTML、JS、CSS，一旦頁面加載完成了，SPA不會因爲用戶的操作而進行頁面的重新加載或跳轉，而是利用JS動態的變換HTML，從而實現UI與用戶的交互。
優缺點：
1、優點：避免了頁面的重新加載，SPA可以提供較爲流暢的用戶體驗，實現無跳轉刷新。由於瀏覽器的history機制，用hash的變化從而推動頁面變化。
2、缺點：以SPA方式開發的網站不容易管理也不夠安全。由於沒有一頁一頁的網頁給搜索引擎的爬蟲去爬，所以在搜索引擎最佳化SEO的工作上需花費額外功夫。
-
理解viewport、em、rem的原理和用法，分辨率、px、ppi、dpi、dp的區別和實際應用
viewport就是視區窗口，也就是瀏覽器中顯示網頁的部分。PC 端上基本等於設備顯示區域，但在移動端上 viewport 會超出設備的顯示區域（即會有橫向滾動條出現）。
設備默認的viewport在980 - 1024 之間。viewport 實在 meta標籤內進行控制
| 設置 | 解釋 |
| width | 設置layout viewport的寬度，爲一個正整數或字符串“width-device” |
| initial-scale | 設置頁面的初始縮放值，爲一個數字，可以帶小數 |
| minimum-scale | 允許用戶的最小縮放值，爲一個數字，可以帶小數 |
| maximum-scale | 允許用戶的最大縮放值，爲一個數字，可以帶小數 |
| height | 設置 layout viewport 的高度，這個屬性對我們並不重要，很少使用 |
| user-scalable | 是否允許用戶進行縮放，值爲"no"或"yes", no 代表不允許，yes 代表允許 |
默認情況下: 1em = 10px; 1rem = 16px
px: 絕對固定的值，無論頁面放大或者縮小都不會改變。
em: 相對父元素字體大小的倍數。如果父元素的字體爲 12px，那麼子元素 1em 就是 24px。由於是相對父級的倍數，所以多層嵌套時，倍數關係的計算會很頭痛。
rem: 相對根元素字體大小的倍數。相對於 html 的字體大小，如果不做任何修改，瀏覽器默認字體大小爲 16px。
-
移動端頁面適配解決方案、不同機型適配方案
-
掌握一種JS PC客戶端開發技術，如Electron：可搭建Electron開發環境，熟練進行開發，可理解Electron的運作原理
-
掌握一種小程序開發框架或原生小程序開發
-
理解多端框架的內部實現原理，至少了解一個多端框架的使用