你好,游客 登录
背景:
阅读新闻

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

[日期:2017-12-19] 来源:网络  作者: [字体: ]

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

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

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

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

  

 

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

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

  

 

  什么是页面重构

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

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

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

  

 

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

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

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

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

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

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

  

 

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

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

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

  盒子模型

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

  

 

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

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

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

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

  

 

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

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

  当时我的内心是这样的:

  

 

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

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

  绝对定位布局

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

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

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

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

  

 

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

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

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

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

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

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

  绝对定位布局 - 低效分析

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

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

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

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

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

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

  

 

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

  浮动布局

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

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

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

  

 

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

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

  

 

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

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

  「这个。。。」

  

 

  页面重构之口诀

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

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

  

 

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

  「明白了吗?」

  「还不是很明白。」

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

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

  

 

  「一个部分吧。」

  「对的。」

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

  

 

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

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

  

 

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

  

 

  「这个。。。」

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

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

  

 

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

  

 

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

  

 

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

  

 

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

  「那这个呢?」

  

 

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

  「这个呢?」

  

 

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

  

 

  「这个呢?」

  

 

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

  

 

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

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

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

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

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

  总结

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

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

收藏 推荐 打印 | 录入:Cstor | 阅读:
相关新闻      
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款