UI设计师必看:详解最全面的组件化开发与设计指南
|
5. 便于查错；这便于查错，是耦合性降低的一个副产品。它可以大大加快错误排查的速度。如果页面上出现问题，可以找出每个可能有关的组件，逐个拔除，直到恢复正常。这样就能迅速锁定错误发生的位置。同时组件内也可以形成完整的自测单元，也方便了测试工作。 如下图，突然出现某个弹窗样式错乱。如果采用组件化开发，只要检查弹窗这个组件的代码，如果是这部分代码出现问题了，只需要解决这部分代码就行了，如果弹窗组件没有问题，则说明不是弹窗代码导致的bug，不需要解决弹窗，而是去排查别处的代码，这样就能大大缩小排查范围。 6. 便于修改；假如设计师每个页面改同一个地方要花一个小时，那开发做同样的事情至少要花一个上午，至少！封装成组件，可以把这个时间缩短到10分钟。毕竟不用去改几十个页面的HTML、CSS和JS，改一个组件就可以了。比方说，来了一个新需求，要求所有页面的标题字号都要加大，开发同学如果不按照组件化开发，那就要一个个页面的改了。我想这就是别的开发可以出去浪，而你却要不停地加班的原因之一吧。 设计师要懂的页面布局原理 讲了组件化的意义，本来顺理成章应该讲组件化的具体做法。但在这之前其实有必要插入这一块内容，帮助没有前端基础的设计师了解，开发是如何把页面搭建起来的。大家可以先有一个粗略的想象，就像是重力朝上的俄罗斯方块。页面元素都是从下往上这样一行一行搭出来的，不过这个玩家有强迫症，他一定会从左上角、右上角或者中间位置搭起。当然……搭满一行并不会消除。 ¯_( ツ )_/¯ 布局原理： 1. 行内元素与块元素；这网页布局中有两个概念：行内元素和块元素。它们是非此即彼的关系，网页里只要是你能看见的东西，一定不是行内元素就是块元素。 这两种元素的表现略有不同。图中虚线框代表一行，但实际上这是不可见的，只是我为了说明布局方式画出来的，其中的绿色矩形才是页面上真实可见的元素。 如上图，我们看第一行，这里有3个行内元素。内容长度不同，它们表现出来的宽度就不同，这是一种会随内容变化而改变尺寸的布局单元，而且它们总是从左到右横向排列，只要一行里排得下。再看第二行，这里只有1个块元素。你看它内容很短，就三个字，却占了一整行。没错，块元素就是这么任性。就像自习室一卷厕纸占一排座位那样。最后看第三行。浅绿色是一个块元素，深绿色是它内部的元素。所以元素之间是可以嵌套的，无论多么复杂的页面，都是这样一层层嵌套形成的。但是要注意，块元素内可以嵌入行内元素和块元素，行内元素只能嵌入行内元素。请看其中的深绿色部分，第二行是一个块元素，设定了宽度，并且居中排列。其实前两个行内元素的右边明明有空间，而且右边还放得下一个行内元素。但即使如此，它还是要占一整行。当然，块元素这个独占一行的特性有例外，我们接下来就会说。 2. 浮动；刚才讲的是常规的布局方式，我们现在讲两种打破常规的方式。 如下图所示，浮动有两个方向，向左和向右。被加上了浮动属性的元素，表现都会变得类似于行内元素，根据内容变化尺寸。第一行的左右浮动元素都可以是块元素，但它们却排在了一行里。第二行和第三行是一组对比，表现了非浮动元素与浮动元素混合排列时的规则。第二行的文字是一个常规布局的元素，可以看到左右浮动的元素各就各位，常规布局的文字很灵活地填充空隙，就像报纸排版一样。而第三行里的情况，文字段落也加上左浮动属性，并且限定宽度，它就会跟在左浮动元素的右侧。当然，如果文字不限定宽度，它还是会独占一行，因为文字足够多。这和块元素独占一行的道理不同，它仍然带有浮动属性，本应该跟在左浮动元素的右边。只是因为自身宽度太大，一行挤不下了。 3. 绝对定位；另一种打破常规的布局方式是绝对定位。 （编辑：济源站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
