阅读 2746

后端工程师入门前端页面重构(一):口诀

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

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

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

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

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

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

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

什么是页面重构

好,第一个问题:所谓的「页面重构」到底是干嘛的?

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

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

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

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

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

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

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

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

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

那么,你说说看什么是「盒子模型」?

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

盒子模型

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

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

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

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

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

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

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

当时我的内心是这样的:

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

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

绝对定位布局

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

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

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

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

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

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

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

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

在绝对定位中,不会使用 margin 来表示位置偏移,我们应该使用 top 和 left 。(可参见:position

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

绝对定位布局 - 低效分析

「啊,低效的?为什么是低效的?」

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

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

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

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

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

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

浮动布局

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

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

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

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

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

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

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

「这个。。。」

页面重构之口诀

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

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

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

「明白了吗?」

「还不是很明白。」

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

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

「一个部分吧。」

「对的。」

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

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

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

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

「这个。。。」

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

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

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

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

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

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

「那这个呢?」

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

「这个呢?」

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

「这个呢?」

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

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

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

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

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

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

总结

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

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

关注下面的标签,发现更多相似文章
评论