如何快速掌握一個ui框架

當今前端界，各類ui框架數不勝數，並且各個大廠家，都有一套本身的框架在那擺着，這讓咱們前端開發者們情何以堪。如此多的前端ui框架，咱們該如何選擇呢，如何快速掌握應用到實際開發中呢？特別是咱們新手同窗，剛開始接觸框架時不是特別的理解，也不大會用。這即是咱們今天討論的問題。

框架的意義

框架的意義，什麼是框架的意義，是讓你去想這個框架給咱們解決了什麼問題，提供了什麼幫助，爲何選擇框架？這個答案是顯而易見的：

1. 統一性，選用一個Ui框架，這個框架會對樣式進行統一，交互動畫進行統一，這樣就保證了咱們這個系統的完整性，也不至一個頁面一個風格，讓人家感受這是拼湊起來的同樣。
2. 兼容性，所謂兼容，不是傳統意義上的去兼容啥IE 6 7 8那些低版本瀏覽器，而是對主流的標準瀏覽器的兼容性，舉個例子：一個checkbox複選框在IE上顯示一個樣式，谷歌上又是一個樣子，火狐上又是一個樣子，這個時候框架開發者們就會對它的樣式進行統一，併兼容各類小問題。
3. 快速性，快速性很好理解，就是快速高效開發的意思，由於各類ui框架會封裝不少咱們經常使用的各類組件，這樣咱們就不用重複的去開發那些html結構和功能了。

使用框架

有了上面對ui框架的認識，那接下來確定是要使用框架，老前端開發自沒必要說，我這裏總結兩個新手同窗常出現的問題：

1. 安裝，這個問題幾乎是新手同窗百分百遇到的問題，這個問題的緣由在於：由於如今的spa單頁應用的開發，不像之前傳統的開發，使用scripr標籤src屬性引入便可，而是使用npm安裝，而後在進行注入，而後新手同窗們對此就很陌生了。我以爲出現這個問題很重要的一個問題，是由於馬虎，拋開國外的框架不說，像國內的框架，他們的框架安裝上的使用說明，官網上其實都寫得很詳細得，並且是百分百適合國人閱讀習慣得，而恰恰不少新手同窗卻老是在安裝上出現問題，各類報錯，問題就是出在馬虎,馬虎得緣由就是不少同窗不去人家官網看，而是先去百度一通，搜出各類教程博客，搜出得那些教程博客，自己也不會有太多錯，畢竟人家花心思寫了，而是在你引入後忘記了注入或者缺乏了引入樣式，好比：vue項目，你不僅要引入主框架(js文件)，主框架你還須要被vue.use()執行注入，還須要相應得引入css；angular項目(angular2以上)，引入主框架後，你須要在@NgModule({})裏的imports屬性裏導入，注意，angular項目在ui框架樣式文件和vue有那麼丟丟差異，vue通常寫在main.js裏就能夠了，而angular項目通常都會引入到項目裏的全局css文件style.css,執行@import引入。

2. 組件的應用，安裝好框架，就涉及到實際應用，在講實際應用以前，先講一下你們看現有項目會出現的狀況，在看現有項目時，該項目裏使用了某個ui框架，而後項目代碼裏各類陌生的屬性，看着讓人云裏霧裏，摸不着頭腦，出現這種狀況，首先一是對項目不熟悉，這個無可厚非，其次是由於你對應用這個ui框架裏組件的屬性和功能不瞭解所致。實際使用一個框架，不少新手同窗對於應用，都是把代碼粘貼複製過去，卻忽略了去看實際的使用說明或者看的不仔細，任何一個ui框架裏的組件，官網裏面都有對應這個組件的api，屬性的做用，方法的調用，以及使用的注意事項。其實這個時候我更加建議新手同窗，先多花點時間去看這個組件的api,瞭解它的用法和注意事項，這樣你在開發過程纔會更加的事半功倍。
3. 框架的認識，每一個ui框架呢，都有一些本身特有的組件，說白了就是本身有，別人沒有的，也正是由於這個緣由，在項目啓動初期，在技術選型時，這也是對ui框架的一個選擇標準，咱們須要它的某個功能來實現咱們的需求，固然也涉及到實際應用和可擴展性。說到組件，這裏並不想去說各個框架特有的，而是想說你們都有的，由於你對這個的認識，將決定你對ui框架使用的熟練度，說白了就是你使用框架的段位在幾級，初級，中級，高級，仍是大神級。我對ui框架裏的組件分爲這幾大類型：

• 佈局型組件：主要指柵格系統組件，layout佈局組件等
• 基礎型組件：主要指按鈕，圖標，字體，顏色等
• 導航型組件：主要指菜單，tab標籤，分頁控件組件，下拉列表組件等
• 表單型組件：input輸入框，checkbox複選,radio單選，評分，日期，form表單等
• 對話框型組件：主要指確認對話框，信息提示框
• 數據視圖組件：主要指table表格，list列表等

上面幾個類型幾乎是全部ui框架絕對都有的組件類型，惟一的差異有多是各個ui框架對該類型命名的不一樣而已了，而功能也幾乎同樣，而全部組件都是封裝出來的小組件，根據功能需求都會提供：**「屬性，方法，事件」**這幾個接口出來供咱們使用，所以咱們在調用組件時，對應的去查看它的api就OK了，使用也就如此簡單了。

總結

本篇文章更多都是些理論知識，目的是幫助新手前端同窗們對ui框架的認識，不會辣麼惶恐和懼怕，而ui框架應用的核心精髓其實就跟咱們掌握,js,jquery,vue,angular同樣，耐心仔細的看他們的api，並適當的練習下小demo，相信你們均可以很快上手的。