如何快速掌握一個ui框架
阿新 • • 發佈：2018-12-05
當今前端界，各種ui框架數不勝數，而且各個大廠家，都有一套自己的框架在那擺著，這讓我們前端開發者們情何以堪。如此多的前端ui框架，我們該如何選擇呢，如何快速掌握應用到實際開發中呢？特別是我們新手同學，剛開始接觸框架時不是特別的理解，也不大會用。這便是我們今天討論的問題。
框架的意義
框架的意義，什麼是框架的意義，是讓你去想這個框架給我們解決了什麼問題，提供了什麼幫助，為什麼選擇框架？這個答案是顯而易見的：
- 統一性，選用一個Ui框架，這個框架會對樣式進行統一，互動動畫進行統一，這樣就保證了我們這個系統的完整性，也不至一個頁面一個風格，讓人家感覺這是拼湊起來的一樣。
- 相容性，所謂相容，不是傳統意義上的去相容啥IE 6 7 8那些低版本瀏覽器，而是對主流的標準瀏覽器的相容性，舉個例子：一個checkbox複選框在IE上顯示一個樣式，谷歌上又是一個樣子，火狐上又是一個樣子，這個時候框架開發者們就會對它的樣式進行統一，併兼容各種小問題。
- 快速性，快速性很好理解，就是快速高效開發的意思，因為各種ui框架會封裝很多我們常用的各種元件，這樣我們就不用重複的去開發那些html結構和功能了。
使用框架
有了上面對ui框架的認識，那接下來肯定是要使用框架，老前端開發自不必說，我這裡總結兩個新手同學常出現的問題：
- 安裝，這個問題幾乎是新手同學百分百遇到的問題，這個問題的原因在於：因為現在的spa單頁應用的開發，不像以前傳統的開發，使用scripr標籤src屬性引入即可，而是使用npm安裝，然後在進行注入，然後新手同學們對此就很陌生了。我覺得出現這個問題很重要的一個問題，是因為馬虎，拋開國外的框架不說，像國內的框架，他們的框架安裝上的使用說明，官網上其實都寫得很詳細得，而且是百分百適合國人閱讀習慣得，而偏偏很多新手同學卻總是在安裝上出現問題，各種報錯，問題就是出在馬虎,馬虎得原因就是很多同學不去人家官網看，而是先去百度一通，搜出各種教程部落格，搜出得那些教程部落格，本身也不會有太多錯，畢竟人家花心思寫了，而是在你引入後忘記了注入或者缺少了引入樣式，比如：vue專案，你不只要引入主框架(js檔案)，主框架你還需要被vue.use()執行注入，還需要相應得引入css；angular專案(angular2以上)，引入主框架後，你需要在@NgModule({})裡的imports屬性裡匯入，注意，angular專案在ui框架樣式檔案和vue有那麼丟丟差別，vue一般寫在main.js裡就可以了，而angular專案一般都會引入到專案裡的全域性css檔案style.css,執行@import引入。
- 元件的應用，安裝好框架，就涉及到實際應用，在講實際應用之前，先講一下大家看現有專案會出現的情況，在看現有專案時，該專案裡使用了某個ui框架，然後專案程式碼裡各種陌生的屬性，看著讓人云裡霧裡，摸不著頭腦，出現這種情況，首先一是對專案不熟悉，這個無可厚非，其次是因為你對應用這個ui框架裡元件的屬性和功能不瞭解所致。實際使用一個框架，很多新手同學對於應用，都是把程式碼貼上複製過去，卻忽略了去看實際的使用說明或者看的不仔細，任何一個ui框架裡的元件，官網裡面都有對應這個元件的api，屬性的作用，方法的呼叫，以及使用的注意事項。其實這個時候我更加建議新手同學，先多花點時間去看這個元件的api,瞭解它的用法和注意事項，這樣你在開發過程才會更加的事半功倍。
- 框架的認識，每個ui框架呢，都有一些自己特有的元件，說白了就是自己有，別人沒有的，也正是因為這個原因，在專案啟動初期，在技術選型時，這也是對ui框架的一個選擇標準，我們需要它的某個功能來實現我們的需求，當然也涉及到實際應用和可擴充套件性。說到元件，這裡並不想去說各個框架特有的，而是想說大家都有的，因為你對這個的認識，將決定你對ui框架使用的熟練度，說白了就是你使用框架的段位在幾級，初級，中級，高階，還是大神級。我對ui框架裡的元件分為這幾大類型：
- 佈局型元件：主要指柵格系統元件，layout佈局元件等
- 基礎型元件：主要指按鈕，圖示，字型，顏色等
- 導航型元件：主要指選單，tab標籤，分頁控制元件元件，下拉列表元件等
- 表單型元件：input輸入框，checkbox複選,radio單選，評分，日期，form表單等
- 對話方塊型元件：主要指確認對話方塊，資訊提示框
- 資料檢視元件：主要指table表格，list列表等
上面幾個型別幾乎是所有ui框架絕對都有的元件型別，唯一的差別有可能是各個ui框架對該型別命名的不同而已了，而功能也幾乎一樣，而所有元件都是封裝出來的小元件，根據功能需求都會提供：**“屬性，方法，事件”**這幾個接口出來供我們使用，因此我們在呼叫元件時，對應的去檢視它的api就OK了，使用也就如此簡單了。
總結
本篇文章更多都是些理論知識，目的是幫助新手前端同學們對ui框架的認識，不會辣麼惶恐和害怕，而ui框架應用的核心精髓其實就跟我們掌握,js,jquery,vue,angular一樣，耐心仔細的看他們的api，並適當的練習下小demo，相信大家都可以很快上手的。