拉勾网系列页面重构-总结

686 阅读3分钟

演示地址: http://47.100.222.240/lagou (复制链接到浏览器中打开效果更好)

源码:github.com/songguoguo9…

总结一下之前的工作内容,好久前做的,但我觉得需要好好给它画个句号

本项目目的

1,为了重新复习html,css做的一个实战,锻炼自己拿到任何一系列页面,如何从0到1的进行像素级还原的能力

2,在不使用其他任何技术的情况下,只用html,css写,想体会下这种纯粹的工具下会有什么局限性;以及如何使用现有的技术知识解决问题,重走一遍革命人的路程

在不依靠任何工具框架的情况纯html,css编写页面的一些体会:【真的过程很痛苦】

遇到的问题

1,分析页面结构时,发现很多结构重复的部分,如果每个页面这些相同的代码都重写一遍,真的效率很低

2,css样式如果每一个样式都重写,会造成文件太长,不易维护,读起来困难,且大量代码冗余

3,在有限短短几天的时间,如何保证每天项目有效率的开发,完成产品交付

解决方案

1,拿到任何一系列的页面后,观察页面结构:

  • 看哪些部分被重复利用在多个页面中---(如本实例中的header和footer部分;)
  • 哪些部分是相似部分---(如本实例中的轮播图那一块,在首页和校园页中都有;还有sidebar;还有面板切换展示公司处理简历)24hot及it-hot;
  • 对页面整体布局在脑中有一个清晰的概念 ,html结构怎样正确合理的安排也很重要,考虑后续与数据渲染如何方便。

2,开始着手编写每一模块的html和css(分文件,写好注释)

  • 先写一个common.css,用于存放一些全局用到的css样式

  • 采取先布局,后样式的编写规则

    • 根据场景需要,选择性的采用浮动,定位,flex,或者grid进行布局
    • 对局部进行细节样式的修改,直到复刻完成,注意使用属性继承,不写多余代码,使代码精简而有效
  • 样式分全局样式文件,局部样式文件 局部样式分两类: 一:是每个可重用模块的样式; 二:是每个其他子页面可能需要再添加的一些样式

  • 按照上述步骤首页应该可以完全搞出来,后续拼凑其他页面,注意样式的引用,按照文档中结构的先后顺序引用。

3,项目计划安排

lagou0.1 ->lagou1.1

展望

对框架和工具,实际项目中还是要针对具体情况具体问题有选择性的使用。

总结

可能写着写着就容易因大量的代码而烦躁,但要冷静,思考如何处理问题很关键,同时也体会到,要多练“懒人思维”(我自己瞎造的词):这里并不是贬义,而是希望自己能够多往能开发一些可通用的代码方向上发展,使日常的开发工作更有效率。