ui设计的布局方式：UI样式库自建你需要了解的知识

小君 2022-11-06 16:04:24 258

ui设计的布局方式：UI样式库自建你需要了解的知识内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式 > 浏览器默认样式当我们在浏览器里输入一个 URL 后，最终会呈现一个完整的网页。这中间会经历如下的过程:比如一个页面主要分为内容层、导航层和蒙版提示层。可以规定：伪元素选择器是用于向某些元素设置特殊效果。伪元素选择器选中的并不是真实的 DOM 元素，所以叫伪元素选择器。伪元素选择器常用的也就下面 5 个：Tips：

UI 是什么？

先来说下 UI，这俩字母是 User Interface 的缩写，一般翻译成“用户界面”。UI 最主要的功能就是建立用户和系统后台之间的联系，系统后台通过 UI 把数据转换成可视化的内容展示给用户，同时用户也要通过 UI 把操作指令（包括数据）传给系统后台。

常见ui框架

Bootstrap，强大的 UI 框架。它同时支持 PC 端和移动端，还可以做到自适应；组件非常全面；稳定性好，不容易出问题；还提供了基于 jQuery 的 JS 组件库（据说5.x版本后会剔除对jQuery的依赖）。它的缺点就是体积太过庞大，太过大而全。
WeUI，微信官方出品的。这个框架设计比较简洁美观，提供了移动端一些基础的组件，体积很小，没有提供 JS 组件。
VUX-UI，基于 VUE 的 UI 库。它实际是在 WeUI 的基础上做了一些改造，并使用 VUE 实现了一些 JS 组件库。
Ant Design Mobile，基于 React 的移动端 UI 框架。它和 VUX-UI 的定位是一样的，只不过是基于 React。另外这个UI 框架的设计是单独开发的，没有基于 WeUI。
Frozen UI（腾讯）、Mint UI（饿了么）、Cube UI（滴滴）。这些都是各个大公司内部的 UI 框架，做得成熟了，就做了开源提供给外部的开发者使用

为什么自建 UI 框架？

市面上开源的 UI 框架有很多，但一般规模比较大的公司都还会选择自建一套 UI 框架。公司愿意花费这个成本打造自己的UI 框架，肯定是现有的开源框架不能完全满足业务上的需求。下面来说下自建框架的好处：

源码可以改动。我们在使用外部框架的时候，考虑到框架要升级，所以一般要求是不改动其源码。尤其是以 npm 方式安装的框架或插件，源码更是不能动的。所以如果是自建框架的话，我们是能控制框架内部代码的。
可以完全满足产品的设计风格。外部框架的样式是已经确定的，和实际产品的设计上肯定有差异。这个时候如果用外部框架就要在它上面以打补丁的方式进行样式覆盖，这种补丁多了以后也会成为一种灾难。
功能定制化。每个业务都有自己注重的地方，比如去哪儿网这类网站在日历和筛选这些功能上要求比较多，滴滴可能对地图方面的要求比较多。自建 UI 框架就是可以做到定制化，让框架的设计聚焦在自己业务的侧重点上，把要求高的组件做的更精细，把没用到组件剔除掉。
利于风险控制。外部框架的 Bug 也是一个比较大的问题，使用的时候遇到了只能等框架升级，或者也是用比较丑的补丁打上去。

UI框架的设计要求

当我们准备自建一套 UI 框架的时候，就要 UI 的几个贡献者一起合作，完成这个工作。在设计的时候，应该满足以下的要求：

友好。之前说过，UI 最重要的作用就是让用户用的舒服。所以在开发 UI 时首先要考虑的就是让里面的组件更人性化，比如不重要且过长的文本要折叠，列表滚动要有惯性，操作有反馈但不会过分打扰，等等。“友好”主要是对产品和UI设计师提出的要求，但前端开发人员不能觉得这不关我的事，团队里每个人都应该有自己的想法和提建议的义务。
美观。这是构成用户体验另外一个比较重要的因素。在广大的用户群体中，颜控还是不少的。美观的界面一方面能让使用者心情愉悦，同时还能体现出一个产品的精细度，提高用户对产品的信赖。
效率。我们开发一个 UI 框架，最主要的动力是可以提高开发效率。这一条才是对我们前端开发人员提出的要求。我们在对UI框架做代码设计的时候，考虑的一定是让代码更容易复用，并且对业务范围内的情况考虑的尽量全面。这样才能让使用这套 UI 框架的开发人员节省出在 UI 上的工作量，争取早日值回票价。
易扩展。最后还有一个要求，就是我们的框架要易扩展。我们在设计的时候，不能考虑到所有的业务情况，所以框架中的代码一定是有作用域限制的，容易被覆盖的，以及容易和其他框架或组件兼容的。这就要我们在写代码的时候要有一定的规范，详细的规范我们下章再聊。

课前准备

z-index的规划，不能随意用。

比如一个页面主要分为内容层、导航层和蒙版提示层。可以规定：

内容层的z-index值从100到200之间；
导航层要盖住内容层，z-index可以用到200-300
蒙版提示层要盖住一切，z-index可以用到300-400.

伪元素选择器

伪元素选择器是用于向某些元素设置特殊效果。伪元素选择器选中的并不是真实的 DOM 元素，所以叫伪元素选择器。伪元素选择器常用的也就下面 5 个：

::first-line，为某个元素的第一行文字使用样式。
::first-letter，为某个元素中的文字的首字母或第一个字使用样式。
::before，在某个元素之前插入一些内容。
::after，在某个元素之后插入一些内容。
::selection，对光标选中的元素添加样式。

Tips：

伪元素选择器构造的元素是虚拟的，所以不能用 JS 去操作它。
如果同时使用了 before 和 first-letter 两个伪类，第一个字是要从 before 里的内容开始算起的，如果 before里面的内容是一个非文本元素，那 first-letter 也会作用在这个非文本元素上，但是不一定能生效。
first-line 和 first-letter 不适用于内联元素，在内联元素中这两个选择器都会失效。
在 CSS3 中，规定了伪类用一个冒号（:）表示，伪元素用两个冒号表示（::）。但除了 selection，其余四个伪元素选择器已经在 CSS2 中存在且和伪类用的是一样的单冒号表示的。为了向下兼容，现在的浏览器中伪元素选择器用单冒号和双冒号都可以。在没有兼容问题的情况下，还是建议大家按照新的 CSS3 标准来开发。

页面的加载和渲染全过程

当我们在浏览器里输入一个 URL 后，最终会呈现一个完整的网页。这中间会经历如下的过程:

HTML 的加载
输入 URL 后，最先拿到的是 HTML 文件。HTML是一个网页的基础，所以要在最开始的时候下载它。HTML下载完成以后就会开始对它进行解析。
其他静态资源下载
HTML 在解析的过程中，如果发现 HTML 文本里面夹杂的一些外部的资源链接，比如 CSS、JS 和图片等时，会立即启用别的线程下载这些静态资源。这里有个特殊的是 JS 文件，当遇到 JS 文件的时候，HTML 的解析会停下来，等 JS 文件下载结束并且执行完，HTML 的解析工作再接着来。这样做是因为 JS 里可能会出现修改已经完成的解析结果，有白白浪费资源的风险，所以 HTML 解析器干脆等 JS 折腾完了再干。
DOM 树构建
在 HTML 解析的同时，解析器会把解析完的HTML转化成DOM 对象，再进一步构建 DOM 树。
CSSOM 树构建
当 CSS 下载完，CSS 解析器就开始对 CSS 进行解析，把 CSS 解析成 CSS 对象，然后把这些 CSS 对象组装起来，构建出一棵 CSSOM 树。
渲染树构建
DOM 树和 CSSOM 树都构建完成以后，浏览器会根据这两棵树构建出一棵渲染树。
布局计算
渲染树构建完成以后，所有元素的位置关系和需要应用的样式就确定了。这时候浏览器会计算出所有元素的大小和绝对位置。
渲染
布局计算完成以后，浏览器就可以在页面上渲染元素了。比如从 (x1 y1) 到（x2 y2）的正方形区域渲染成蓝色。经过渲染引擎的处理后，整个页面就显示在了屏幕上。