導(dǎo)言

很多人都會跟我一樣想要實(shí)現(xiàn)一個屬于自己的前端UI框架，因?yàn)樵趯?shí)際開發(fā)過程中如果我們使用別人的UI框架，很多地方會出現(xiàn)使用不順暢，從而大幅度修改，最后導(dǎo)致自己完全不用別人的UI框架。當(dāng)然也有A框架效果不錯，B框架也不錯，最后兩個都引用到項(xiàng)目中，最后導(dǎo)致項(xiàng)目UI沖突。所以我也誕生了實(shí)現(xiàn)一個屬于自己的前端UI框架的想法，那么UI框架的實(shí)現(xiàn)有哪些注意事項(xiàng)呢？

UI框架

市面上比較的火的UI框架逐步成熟，大多大同小異，那么他們都有些什么值得借鑒的嗎？接下我們一一列舉一下目前比較火的UI框架，如：
基于jq的：mui,Twitterde的bootstrap等。
基于vue:餓了么的Element和MintUI,VUX等。
基于React：阿里螞蟻的Antd,Material-UI等。
基于小程序的：colorUI，weUI等
通過以上UI框架的使用與總結(jié)不難發(fā)現(xiàn)他們的相同點(diǎn)，那就是模塊化，組件化，把公有組件模塊提出出來，私用組件獨(dú)立化，從而實(shí)現(xiàn)代碼精簡，業(yè)務(wù)獨(dú)立。以上我覺得比較優(yōu)秀就要數(shù)boostrap和colorUI，bootstrap屬于老資格的UI組件庫了，不僅運(yùn)用在jq,react，還實(shí)現(xiàn)了響應(yīng)式布局。ColorUI屬于新興的UI組件庫,但是它的優(yōu)點(diǎn)在于著色豐富，更加傾向于中國業(yè)務(wù)，并且css獨(dú)立化完全可以運(yùn)用在vue,react,小程序等多種場景當(dāng)中。

思考&分析

那么怎么實(shí)現(xiàn)自己想要UI框架呢？
第一先給自己的UI組件框架定位吧，我的想法是實(shí)現(xiàn)一個能夠在復(fù)數(shù)上框架上運(yùn)行的UI組件，那么就要滿足css樣式鏈表獨(dú)立，功能業(yè)務(wù)獨(dú)立，體積小，邏輯清晰等特點(diǎn)，還有需要考慮頁面布局采用百分比布局兼容，以及采用rem等單位，還要考慮各大瀏覽器的兼容處理，減少直接對css的編輯與重復(fù)代碼的書寫。
首先確認(rèn)公有部分，公有部分有字體大小，字體顏色，背景顏色，圓角幅度....,私用組件類又可以分為獨(dú)立組件，復(fù)合組件，業(yè)務(wù)套件等，然后每個組件獨(dú)立一個模塊可以單獨(dú)引用。關(guān)于前端UI框架其實(shí)就是整理平時開發(fā)習(xí)慣，把比較常用的東西封裝起來就成為了框架。

公有組件庫

字體大小

字體大小.png

字體大小展示.png

文件地址：https://github.com/sunql0827/Baseui/blob/master/src/css/fontSize.css

字體顏色

字體顏色.png

字體顏色一般最常見的字體除了三原色，還有黑白色以外，還很多常見的顏色，我這里簡單列舉出來一些，一般UI設(shè)計(jì)中顏色不推薦完全色，怎么理解呢，比如黑色一般采用#333333,當(dāng)然還包括#666666，#999999，#cccccc都是比較常用字體顏色。

<div class="grids-item text-black">text-black</div>
<div class="grids-item text-blue">text-blue</div>
<div class="grids-item text-brown">text-brown</div>
<div class="grids-item text-cyan">text-cyan</div>
<div class="grids-item text-green">text-green</div>
<div class="grids-item text-grey">text-grey</div>
<div class="grids-item text-mauve">text-mauve</div>
<div class="grids-item text-olive">text-olive</div>
<div class="grids-item text-orange">text-orange</div>
<div class="grids-item text-pink">text-pink</div>
<div class="grids-item text-purple">text-purple</div>
<div class="grids-item text-red">text-red</div>
<div class="grids-item text-white">text-white</div>
<div class="grids-item text-yellow">text-yellow</div>

文件地址：https://github.com/sunql0827/Baseui/blob/master/src/css/fontColor.css

背景顏色

背景顏色.png

背景顏色由于中國人的喜好，在app背景色上普遍都會選擇淺色調(diào)的簡約風(fēng)格，常見的背景色顏色代碼一般有：#cccccc,#dcdcdc,#ededed,#efefef等為背景色。

文件地址：https://github.com/sunql0827/Baseui/blob/master/src/css/bgColor.css

圓角幅度

常見圓角一般分為風(fēng)格與尺寸：
風(fēng)格：圓形，半圓，左邊上下圓角，右邊上下圓角，上邊左右圓角，下邊左右圓角
尺寸：50%，5px,8px,10px,12px

.radius-circle{
    border-radius: 50%;
}
.radius-circle-topright{
    border-top-right-radius: 50%;
}
.radius-circle-topleft{
    border-top-left-radius: 50%;
}
.radius-circle-bottomright{
    border-bottom-right-radius: 50%;
}
.radius-circle-bottomleft{
    border-bottom-left-radius: 50%;
}
.radius-5{
    border-radius: 5px;
}
.radius-8{
    border-radius: 8px;
}
.radius-10{
    border-radius: 10px;
}
.radius-12{
    border-radius: 12px;
}

文件地址:https://github.com/sunql0827/Baseui/blob/master/src/css/borderRadius.css

內(nèi)外間距

內(nèi)外邊距一般常用的為1px,2px,5px,12px,20px

文件地址:https://github.com/sunql0827/Baseui/blob/master/src/css/space.css

小結(jié)

本節(jié)為公有組件第一節(jié)，大概概括了常用的一些屬性，可以說基礎(chǔ)UI框架的搭建是完全沒有任何技術(shù)含量的，所以UI框架也不是什么很高大上的東西，別人可以，你也可以。雖然很多人都說重復(fù)造輪子是沒必要的，但是往往很多人都忽略這句話的前提是你擁有造這個輪子的能力，這個能力不僅僅是你知道這個怎么寫，還要有對應(yīng)的框架思維。接下來我會持續(xù)完善這套文章，包含獨(dú)立組件，復(fù)合組件，套件組件等，一步一步深入完整的UI框架是怎么搭建起來的。

完整項(xiàng)目鏈接：https://github.com/sunql0827/Baseui