作为一个前端er,掌握布局,绝对比你学习花俏的样式来的实在。

网站的维护与升级离不开开发人员的辛勤劳动与精诚合作,在项目运营中,假如我负责了前端,那么我不仅需要对亲手写出来的代码负责,还需要对后续维护它的人负责,虽然CSS是一门标记语言,但是代码优劣的区别还是非常大的,虽然东拼西凑写一个主题不难,但初学者和老手的区别除了花费时间的差距之外,还有兼容性,自适应,性能,可维护性,二次开发等问题存在。

最近接了一个私活,说的好像有公活似得,需要对一个网站进行响应式布局,使之具备移动兼容性,在我看过网站之后还未拿到源码之前,我在本地写好了几个模块的重构代码,心想,这简单,拿到源码之后套入容器就可以了,当我真正拿到源码的时候,整个人都不好了,因为代码比较老,甚至还不是 HTML5 规范,嵌套标签多的超乎我想象,冗余随处可见,然后傻傻的看着并不规范的样式代码发呆...

看过源码之后,这份差事已经从响应式布局变成了页面重构,我需要整理一大坨代码,这好比将碎纸机撕碎的纸屑重新拼凑回去成为完整的一张纸,心想,算了吧,这差事不适合我。重新讨论了酬劳之后,我还是决定接下这份差事,并不是因为酬劳有多高,而是在于这对我来说是一个挑战,当我再次看到网站源码时,带上不那么消极的情绪,硬着头皮完完全全整个分析了一遍,因为代码比较老,可读性很差,我决定将她改头换面,抛弃原有的样式,净化冗余的标签,进行新一轮开发。

改头换面的第一件事就是布局,之前研究过弹性盒 Flexbox ,虽然功能强大但是兼容性不咋地,心想这是一份差事,客户对浏览器的兼容性会有要求,就放弃了这个想法,而采用传统的布局方式进行布局,为加速开发,我使用了预处理器 Sass 的工具 susy,这对提高效率帮助非常大,这也是前端er的一个必备技能,她所带来的灵活与洒脱绝对超乎想象,随便一搜就可以搜到很多实用的变量,一键加速开发周期。

当我写好界面的响应布局时,客户电话打来,说推荐我用框架去写,整个人再次不好了,我说用框架对兼容性有一点影响,他说没关系,因为用框架以后的开发人员可以更好的去维护,我瞬间明白,网站就像房子,并不是搭好了之后就可以放任不管了,随着时间的推移,不仅会变得脏乱,甚至还可能会脱瓦,漏雨,或者需要重新装潢一番,网站也一样,所有的更新、维护和升级都需要接下去的开发人员站在当前的代码之上而付出努力,在一个项目中,我写的代码可能会影响到接下去更多的人,所以对自己的代码负责,对后续维护的人负责是一个优质开发者的责任。

前端开发,布局为大,刚才我把网站比作房子,我认为房子的根基就是布局,将会影响到整个生存周期,好好学习布局吧,这将会非常有用,在前面我也有写过 CSS书写规范编写高质量JS的基本要点 的博文,顺便分享几篇谈布局的好文

Read More »