(資料圖片)

本文首發自「慕課網」，想了解更多IT干貨內容，程序員圈內熱聞，歡迎關注！

作者|慕課網精英講師 Rosen

為什么自建 UI 框架？

市面上開源的 UI 框架有很多，但一般規模比較大的公司都還會選擇自建一套 UI 框架。公司愿意花費這個成本打造自己的UI 框架，肯定是現有的開源框架不能完全滿足業務上的需求。下面來說下自建框架的好處：

源碼可以改動。我們在使用外部框架的時候，考慮到框架要升級，所以一般要求是不改動其源碼。尤其是以 npm 方式安裝的框架或插件，源碼更是不能動的。所以如果是自建框架的話，我們是能控制框架內部代碼的。可以完全滿足產品的設計風格。外部框架的樣式是已經確定的，和實際產品的設計上肯定有差異。這個時候如果用外部框架就要在它上面以打補丁的方式進行樣式覆蓋，這種補丁多了以后也會成為一種災難。功能定制化。每個業務都有自己注重的地方，比如去哪兒網這類網站在日歷和篩選這些功能上要求比較多，滴滴可能對地圖方面的要求比較多。自建 UI 框架就是可以做到定制化，讓框架的設計聚焦在自己業務的側重點上，把要求高的組件做的更精細，把沒用到組件剔除掉。利于風險控制。外部框架的 Bug 也是一個比較大的問題，使用的時候遇到了只能等框架升級，或者也是用比較丑的補丁打上去。

雖然自建框架好處很多，但外部框架也是有用的。在一些對設計風格要求不高，功能相對簡單的系統上，就完全可以使用外部的框架。比如我們常見的后臺管理系統，它一般就是增刪改查的功能，公司內部人員使用，對樣式要求不高，這時候就可以考慮用上 bootstrap 這類框架進行快速搭建。

考慮使用外部框架還是自建框架，其實就是一個成本的權衡。自建框架帶來的收益（要考慮到未來的收益）能覆蓋住開發自建框架成本的話，那就值得去開發一套自己的框架的。

但我為什么強烈要求同學要掌握自己制作 UI 框架的技能呢？那是因為它是初級前端開發向中級前端開發前進的必學技能，想想看，你是一個大公司的前端 UI 庫的開發的參與者或者甚至是發起人、主導者，你下回跳槽的薪金還怕要不上嘛。

UI框架的設計要求

當我們準備自建一套 UI 框架的時候，就要 UI 的幾個貢獻者一起合作，完成這個工作。在設計的時候，應該滿足以下的要求：

友好。之前說過，UI 最重要的作用就是讓用戶用的舒服。所以在開發 UI 時首先要考慮的就是讓里面的組件更人性化，比如不重要且過長的文本要折疊，列表滾動要有慣性，操作有反饋但不會過分打擾，等等?！坝押谩敝饕菍Ξa品和UI設計師提出的要求，但前端開發人員不能覺得這不管我的事，團隊里每個人都應該有自己的想法和提建議的義務。美觀。這是構成用戶體驗另外一個比較重要的因素。在廣大的用戶群體中，顏控還是不少的。美觀的界面一方面能讓使用者心情愉悅，同時還能體現出一個產品的精細度，提高用戶對產品的信賴。效率。我們開發一個 UI 框架，最主要的動力是可以提高開發效率。這一條才是對我們前端開發人員提出的要求。我們在對UI框架做代碼設計的時候，考慮的一定是讓代碼更容易復用，并且對業務范圍內的情況考慮的盡量全面。這樣才能讓使用這套 UI 框架的開發人員節省出在 UI 上的工作量，爭取早日值回票價。易擴展。最后還有一個要求，就是我們的框架要易擴展。我們在設計的時候，不能考慮到所有的業務情況，所以框架中的代碼一定是有作用域限制的，容易被覆蓋的，以及容易和其他框架或組件兼容的。這就要我們在寫代碼的時候要有一定的規范，詳細的規范我們下章再聊。

小結

這篇文章主要就講了兩方面的內容。一個是弄清楚在什么情況下我們最好自己開發 UI 框架，又在什么情況下可以使用外部框架。另外一個是要知道在設計一個 UI 框架的時候要從哪幾方面去考慮，不要偏離了自建框架時的初心。如果非要給自建框架找兩個關鍵詞，那我覺得應該是“效率”和“風險控制”。

歡迎關注「慕課網」，發現更多IT圈優質內容，分享干貨知識，幫助你成為更好的程序員！