从零开始实现前端UI框架-公有组件库篇

2019-06-30 本文已影响10人渝聆墨

导言

很多人都会跟我一样想要实现一个属于自己的前端UI框架，因为在实际开发过程中如果我们使用别人的UI框架，很多地方会出现使用不顺畅，从而大幅度修改，最后导致自己完全不用别人的UI框架。当然也有A框架效果不错，B框架也不错，最后两个都引用到项目中，最后导致项目UI冲突。所以我也诞生了实现一个属于自己的前端UI框架的想法，那么UI框架的实现有哪些注意事项呢？

UI框架

市面上比较的火的UI框架逐步成熟，大多大同小异，那么他们都有些什么值得借鉴的吗？接下我们一一列举一下目前比较火的UI框架，如：
基于jq的：mui,Twitterde的bootstrap等。
基于vue:饿了么的Element和MintUI,VUX等。
基于React：阿里蚂蚁的Antd,Material-UI等。
基于小程序的：colorUI，weUI等
通过以上UI框架的使用与总结不难发现他们的相同点，那就是模块化，组件化，把公有组件模块提出出来，私用组件独立化，从而实现代码精简，业务独立。以上我觉得比较优秀就要数boostrap和colorUI，bootstrap属于老资格的UI组件库了，不仅运用在jq,react，还实现了响应式布局。ColorUI属于新兴的UI组件库,但是它的优点在于着色丰富，更加倾向于中国业务，并且css独立化完全可以运用在vue,react,小程序等多种场景当中。

思考&分析

那么怎么实现自己想要UI框架呢？
第一先给自己的UI组件框架定位吧，我的想法是实现一个能够在复数上框架上运行的UI组件，那么就要满足css样式链表独立，功能业务独立，体积小，逻辑清晰等特点，还有需要考虑页面布局采用百分比布局兼容，以及采用rem等单位，还要考虑各大浏览器的兼容处理，减少直接对css的编辑与重复代码的书写。
首先确认公有部分，公有部分有字体大小，字体颜色，背景颜色，圆角幅度....,私用组件类又可以分为独立组件，复合组件，业务套件等，然后每个组件独立一个模块可以单独引用。关于前端UI框架其实就是整理平时开发习惯，把比较常用的东西封装起来就成为了框架。

公有组件库

字体颜色

字体颜色.png

字体颜色一般最常见的字体除了三原色，还有黑白色以外，还很多常见的颜色，我这里简单列举出来一些，一般UI设计中颜色不推荐完全色，怎么理解呢，比如黑色一般采用#333333,当然还包括#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背景色上普遍都会选择浅色调的简约风格，常见的背景色颜色代码一般有：#cccccc,#dcdcdc,#ededed,#efefef等为背景色。

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

圆角幅度

常见圆角一般分为风格与尺寸：
风格：圆形，半圆，左边上下圆角，右边上下圆角，上边左右圆角，下边左右圆角
尺寸：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

内外间距

内外边距一般常用的为1px,2px,5px,12px,20px

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

小结

本节为公有组件第一节，大概概括了常用的一些属性，可以说基础UI框架的搭建是完全没有任何技术含量的，所以UI框架也不是什么很高大上的东西，别人可以，你也可以。虽然很多人都说重复造轮子是没必要的，但是往往很多人都忽略这句话的前提是你拥有造这个轮子的能力，这个能力不仅仅是你知道这个怎么写，还要有对应的框架思维。接下来我会持续完善这套文章，包含独立组件，复合组件，套件组件等，一步一步深入完整的UI框架是怎么搭建起来的。

完整项目链接：https://github.com/sunql0827/Baseui