如何快速掌握一個ui框架

IT男爵發表於2018-12-05

當今前端界,各種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引入。

如何快速掌握一個ui框架

  1. 元件的應用,安裝好框架,就涉及到實際應用,在講實際應用之前,先講一下大家看現有專案會出現的情況,在看現有專案時,該專案裡使用了某個ui框架,然後專案程式碼裡各種陌生的屬性,看著讓人云裡霧裡,摸不著頭腦,出現這種情況,首先一是對專案不熟悉,這個無可厚非,其次是因為你對應用這個ui框架裡元件的屬性和功能不瞭解所致。實際使用一個框架,很多新手同學對於應用,都是把程式碼貼上複製過去,卻忽略了去看實際的使用說明或者看的不仔細,任何一個ui框架裡的元件,官網裡面都有對應這個元件的api,屬性的作用,方法的呼叫,以及使用的注意事項。其實這個時候我更加建議新手同學,先多花點時間去看這個元件的api,瞭解它的用法和注意事項,這樣你在開發過程才會更加的事半功倍。
  2. 框架的認識,每個ui框架呢,都有一些自己特有的元件,說白了就是自己有,別人沒有的,也正是因為這個原因,在專案啟動初期,在技術選型時,這也是對ui框架的一個選擇標準,我們需要它的某個功能來實現我們的需求,當然也涉及到實際應用和可擴充套件性。說到元件,這裡並不想去說各個框架特有的,而是想說大家都有的,因為你對這個的認識,將決定你對ui框架使用的熟練度,說白了就是你使用框架的段位在幾級,初級,中級,高階,還是大神級。我對ui框架裡的元件分為這幾大型別:
  • 佈局型元件:主要指柵格系統元件,layout佈局元件等
  • 基礎型元件:主要指按鈕,圖示,字型,顏色等
  • 導航型元件:主要指選單,tab標籤,分頁控制元件元件,下拉選單元件等
  • 表單型元件:input輸入框,checkbox複選,radio單選,評分,日期,form表單等
  • 對話方塊型元件:主要指確認對話方塊,資訊提示框
  • 資料檢視元件:主要指table表格,list列表等

上面幾個型別幾乎是所有ui框架絕對都有的元件型別,唯一的差別有可能是各個ui框架對該型別命名的不同而已了,而功能也幾乎一樣,而所有元件都是封裝出來的小元件,根據功能需求都會提供:**“屬性,方法,事件”**這幾個介面出來供我們使用,因此我們在呼叫元件時,對應的去檢視它的api就OK了,使用也就如此簡單了。

總結

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

相關文章