后端工程师入门前端页面重构（一）：口诀

本文由 KnewHow 发表在 ScalaCool 团队博客。

大家好，我是 KnewHow，一名前 Java 开发工程师。为什么要说是「前」呢？这要从两周前我加入一家新公司说起。

入职第一天，实习导师告诉我会有一个月的新人引导计划，当时心里还是美滋滋的，觉得这个公司比较人性化，没有把工程师当劳动力使。

但随后，我就被震撼到了。因为面试时就得知公司崇尚的是全栈文化，在部署完一切办公环境之后，实习导师告诉我开始学习的第一个技能竟然是：「前端页面重构」！！！

当时我的内心是这样子的。

要知道，我对于前端，除了几个基本的标签外，可是一无所知。然而，我很快调整了状态，不就是前端开发么，应该难不倒机智的我。

—————————— 以下开始严肃脸 —————————

什么是页面重构

好，第一个问题：所谓的「页面重构」到底是干嘛的？

实习导师提出了要求，一定要有自己深刻的见解，好吧。。。。。

于是，我的视线离开了电脑屏幕，开始寻求不一样的答案。很快，我注意到了我的办公桌面，是这样子滴。

在我看来，前端页面重构，本质不就是处理空间布局的关系吗？

于是，机智如我，很快得出了自己的见解和答案。

上面的这张图片是日常生活一个场景，「 一张办公桌上面摆放着一些物品。桌面是背景，书和键盘并排的放着，白色书和紫色书交叠着，紫色书上面放着一个鼠标」。

其实这就是一个布局，也类似一张网页。

然后我看了看旁边同事的桌子，也看了看整个公司的办公环境。

然后我发现在一个布局中，存在三种关系：组成、包含和交叠。

于是，我把这个结论告诉了实习导师。实习导师听后思考许久，但还是表达了赞赏。之后，他又提出了第二个问题：

那么，你说说看什么是「盒子模型」？

这一次，我马上 Google 了这个概念。机智如我，基于我以上的结论，很快我又得出了以下的解读。

盒子模型

在我看来，「盒子模型」，本质就是去处理布局中，元素大小、位置和距离的关系。

在上面的场景中，键盘和紫色书是有尺寸、边框的，它们是并排放置的，彼此之间的距离可以使用盒子模型中的「外边距（margin）」来表示。

鼠标被紫色书包含着（如果按照完全 2D 的视角），它们的距离可以使用「内边距（padding）」来表示。

白色书和紫色书交叠在一起的，这个如何表示呢？

哈哈，它们其实同样可以使用某一方的「外边距(margin)」来处理，只不过值要是负数而已。

我找到了实习导师，把我刚刚总结的答案告诉了他，他微微一笑：「这个回答还算不错」，接着又问道：

那么在网页布局中，「盒子模型」是怎么被使用的呢？

当时我的内心是这样的：

你怎么这么多问题，你特么还有完没完!!!

理智的我压制了自己的小情绪，不就是怎么使用「盒子模型」吗？

绝对定位布局

机智的我思考片刻，很快就有了答案，这也太简单了！

直觉上我们只要把网页划分成一个个小块，然后调整它们的位置就行了。

拿豆瓣的首页来说，我们可以把第一行分为三块，分别为豆瓣的 logo、搜索框以及后面的热搜主题。

然后我们只需要使用「外边距(margin)」来设置他们和浏览器左边界之间的距离，就 OK 了。

哈哈，我简直就是个天才。

我把我的答案告诉了实习导师。心里美滋滋的：「我聪明吧」。

实习导师轻瞟了一眼我的答案，预料中的赞美和肯定并没有出现。

他目光转向我，说：「你的这种方案是可行的，但是至少犯了两个错误。」

① 在绝对定位中，不会使用 margin 来表示位置偏移，我们应该使用 top 和 left 。（可参见：position）

② 只有入门级别的小白才会使用「绝对定位布局」来作为一个网页的主要布局方式，这种方案是十分低效的！

绝对定位布局 － 低效分析

「啊，低效的？为什么是低效的？」

「在网页中，会有成百上千的元素，如果每个元素你都去量一下它的边距，这个效率是不是很低！」

「iOS 端布局有一个更清晰的描述：绝对定位本质就是通过帧来定位一个视图的起点，高度和宽度。」

「这个就要求你需要去计算每个视图的位置和大小。」

「更可怕的是，如果有一天有一个元素的位置或者大小发生改变，那么其它的元素也可能需要更改，这个更是低效的！」

「简单来说 就是牵一发而动全身！」

「现在的页面布局都使用浮动布局，你去调研一下吧。」

浮动布局

我用 Google 搜索了浮动布局和绝对定位布局。机智的我发现了它们最本质的一个区别：

绝对定位布局使用浏览器的窗口的边界作为参考，一个元素的位置是针对浏览器的边界来设定的。

然而在绝对定位布局中，元素和元素之间视对方为不存在，这意味着当一个元素位置和大小发生了变化，不会对其它元素产生影响。

而在浮动布局中，它的位置通常采用 「 float 」 来处理，一个元素的位置受到其它的元素的影响。

如果有一天被参考的元素位置或者大小发生了变化，那么当前元素的位置也会发生相应的变化。这样就比较高效了。

我兴奋的把调研结果告诉了实习导师，实习导师看了后，说：「还可以吧。」

接着他又问道，「如果现在给你一个网页，你知道怎么布局吗？」

「这个。。。」

页面重构之口诀

「看你这个犹犹豫豫的样子，我直接告诉你好了。」

「我们在网页的左上方放一块磁铁，那么所有元素都会被磁铁所吸引，那么磁力相反的方向，就是我们布局的方向。」

「所以我们布局的方向就是先从左到右，再从上到下，从整体到局部，化整为零！」

「明白了吗？」

「还不是很明白。」

「那我们来做个练习吧。」

「看这个豆瓣的首页，先从整体来看，按照从左到右可以分成几个部分。」

「一个部分吧。」

「对的。」

「因为整个页面就只有中间的那个部分。」

「从上到下，你看看这个页面可以分成几个部分。」

「这个好像有点多了，每一行都可以分成一个部分吧。」

「不错嘛，看你你已经掌握了规律，看看下面的可以分成几个部分。」

「这个。。。」

「不要捉急，按照我的口诀，先看从左到右分成几个部分，再看从上到下分成几个部分。」

「从左到右可以分成三个部分。」

「从上到下就一个部分吧，感觉没有其它东西了。」

「不错不错，我们再来一个难一点的，看看这个可以分成几个部分。」

「从左到右可以分成三个部分。」

「从上到下可以分成一个部分。」

「那这个呢？」

「从左到右一个部分，从上到下也是一个部分。」

「这个呢？」

「从左到右一个部分，从上到下三个部分。」

「这个呢？」

「从左到右一个部分，从上到下四个部分，然后再对更小的模块进行划分。」

「有没有发现什么规律？」

「就是按从左到右，从上到下的顺序，先把网页的进行整体的划分，然后在依次对小模块进行划分，然后再对更小的模块进行划分，一直这么递归划分下去。」

「好的！你已经学会了！」

「啊！这么简单的？那个可以问你一个问题？能不能先从上到下，在从左到右？」

不能，因为人看网页的习惯就是先从左到右，在从上到下，这样的设计会有更好的视觉效果。」

总结

好了，通过本篇文章，我们领悟了前端页面重构的口诀，再来重复一遍：「从左到右，从上到下，化整为零」。

那么，在后续的文章里，我们将进一步介绍所谓的心法和招式。