如何快速入門新的H5前端框架

FlowGuanEr發表於2019-04-17
H5前端框架

H5的框架近三年多以來發展的特別快，且各個公司用的框架不盡相同，有時候好不容易研究會了其中一種，結果入職新公司或者換專案時，又換框架了。很多時候前端都要快速的用一種沒有用過的框架去寫專案。

這篇文章只說怎麼快速入門，至於框架本身深層次的理念和底層程式碼邏輯，需要自己去深挖。如果你剛接觸前端不久，那這篇文章的幫助可能沒那麼大（沒有幫助也可能因為我寫的不好）。

如果有人接觸過很多種的H5框架，那麼就大概能知道，H5的框架在程式碼的書寫規範上，封裝模式上，都很類似。它們之所以這麼類似，是因為H5開發本身的體系比較簡單。

在H5開發中，無論遇到什麼樣的專案，歸根結底，就三部分，結構，樣式，邏輯。剛開始學H5，我們就強調了。為什麼要提到這個，因為只要是H5的框架，就離不開這三個部分。所以在H5框架裡，只要掌握了這三部分及它們的關係，就能快速入門這個框架。

下面只說步驟，沒有程式碼示例，你要去結合官方文件。在看以下步驟之前，花幾分鐘時間大致的過一遍文件，看看有哪些內容。

框架本身的特點是什麼

學習一門新的框架之前，一定要知道它自己有什麼特點（優點和缺點），這樣你才能知道你在哪一種專案中用哪一種框架比較好。就像你要追一個女孩之前，一定要弄清楚這個女孩的性格特徵和喜好一樣。比如Bootstrap適合做響應式的佈局，JQuery降低了DOM的操作程式碼量。新的框架之所以會出現，基本上都是因為舊的程式碼模式在某方面有不足。

H5的框架，特點大多都是，模組化開發和元件化的呼叫（封裝，這兩個字幾乎是貫穿所有框架），且絕大部分都是用物件導向的程式設計思想實現的（可見物件導向有多重要）。

框架的目錄樹

  1. 整個專案的結構入口（HTML檔案）和JS邏輯入口。

  2. 單個元件的呈現方式和呼叫。

    一般框架都有嚴格的命名規範及模組劃分規範，檔案與檔案之間的層級關係很重要。所以要搞清楚，我們的專案開發程式碼應該在哪個資料夾下。單個元件的結構、樣式、指令碼的建立及呼叫。
    至於單個元件的使用，多半都是將當前這個元件匯出，然後在使用他的父級元件裡匯入，按照框架指定的方式引用就可以了。

  3. 可以更改的配置有哪些，這些配置分別都在哪個配置檔案裡。

框架HTML程式碼的宣告和渲染

每個框架HTML程式碼的宣告和渲染方式都不一樣，拿三大框架示例：

  1. Vue：寫在單個元件的.vue檔案裡，當元件被呼叫時自動渲染；
  2. React：使用JSX語法建立DOM，並利用類的render函式渲染；
  3. Angular：要新建一個單獨的html檔案，並且要在指令碼的ts檔案中做路徑配置。

框架CSS程式碼的宣告和渲染

一般情況下框架都會被使用於大型的PC端OA系統，無論是手機端還是框架本身也有對應的UI框架，比如Element-ui，IView（Weapp，Vux），Ant等等，開發時我們都用UI框架開發，只有特殊情況才會自己寫樣式。
所以還是要找到在哪裡宣告樣式（區域性的和全域性的），樣式如何生效到對應元件上。

框架指令碼（JS/TS）程式碼的宣告和渲染

這裡要強調一下TS的重要性，它的語法模式類似於Java，完全模仿了強型別語言。個人覺得語言的約束越明確，學起來越簡單。目前三大框架V、A、R的最新版本都基於TS，所以建議最好在研究框架之前先研究ES6和TS。

一般情況下，框架中都會有一個根上下文環境，每個元件也都會有自己獨立的上下文環境。所以我們一般先看一下整個專案的邏輯入口檔案及基本配置，然後再去研究元件的指令碼。

元件中的指令碼：

  1. 變數和函式的宣告；
    Vue和小程式在每個元件的上下文環境物件中提供一個物件專門宣告資料，React和Angular中將資料宣告在類的屬性上。
  2. 元件的生命週期，生命週期中的鉤子函式；框架提供的預設事件；
  3. 變數在DOM中的渲染（宣告式的渲染，屬性渲染，條件渲染，列表渲染），Vue和Angular中都是使用指令，但是React程式碼比較靠近底層，相對來說略難；
  4. 函式的呼叫和傳參；
  5. 函式中訪問或設定變數的值；
  6. 函式中訪問當前元件上下文環境中的函式和封裝好的公共函式；
  7. 事件:
    （1）事件的繫結方式；
    （2）事件的冒泡、捕獲；
    （3）事件物件；
    （4）引數傳遞；
    （5）繫結事件的事件處理程式中this的指向（一般情況下指向當前元件的上下文環境）；
  8. 無論是哪種框架，都屬於前端框架，所以各種封裝理念都不會變，在開發過程中，高頻使用的函式，按功能劃分的配置（路由和狀態管理）等都可以封裝匯出，然後匯入某個檔案使用。ES6+的版本和TS都提供export和import功能。

高階

元件的封裝和使用

  1. 父元件呼叫子元件；
  2. 元件之間的資料互動；

路由的配置和呼叫

  1. 一級路由；
  2. 巢狀路由；
  3. 預設路由；
  4. 路由傳參；
  5. 路由接受引數；
  6. 路由跳轉過程中的自動觸發事件（如跳轉路由前、路由切換成功後等，各個框架中的叫法不一樣）；
  7. 404元件的路由匹配。

路由中要注意的問題：

  1. 呼叫方式。在我們Web的基礎開發中，要切換頁面中渲染的資料，有兩種方式，一是通過超連結標籤直接跳轉，二是在某個非同步操作的回撥中通過JS完成跳轉，所以各大框架中的路由呼叫都提供標籤跳轉和指令碼程式碼跳轉兩種方式；
  2. 路由傳參。引數暴露在url中和引數不暴露在url中。當然不同的傳參方式對應了不同的接受引數的方式。

HTTP請求

  1. 安裝和呼叫；
  2. 跨域的處理。

狀態管理庫

Vue: vuex;
React: mobx;
Angular: ngrx;

框架的UI框架

IView、Element-UI、Ant等

相關文章