DIV+CSS前端重构日志

DIV+CSS前端重构日志

    有很长一段时间没有上来更新文章了,主要因为最近在做两个网站的前端重构,一个是电子商务的,一个是需要响应式设计效果重构。应该有很多前端对重构网站并不陌生,可能有很多人做过不少网站的重构。但是说实在的,我实在是讨厌至极网站前端的DIV+CSS的重构,因为你要忍受各种个各样你觉得非常奇葩的代码居然在所有浏览器里面都兼容,呵呵!鄙视当初写代码的人的同时也深深的佩服着这神迹般的手法。


    今天想写下关于我自己平时是怎么重构前端的一些做法,当然我的做法肯定不是标准,只是我自己工作中总结出来,自认为比较好的方法。欢迎各位来吐槽哈。


那么来说说我认为重构的主要两个方法吧:

    (1)整站的代码进行重构,不保留旧版的任何一点代码。

    (2)在旧版本的代码里面进行重构,尽可能在不影响目前网站结构的情况下,进行重构。(这是个痛苦的过程)。


    我在想应该有很多有代码洁癖的人都喜欢第一种方案,将那些坑爹的代码都整理成标准的规范的代码。但是实际工作中公司的项目是不会让你有那么多时间去做这种事情的,因为第一种方案需要重新完全就开发一套新的代码,这种方式是非常耗时间,而且即使你开发完了,还要重新和后台开发人员配合把新的代码加载到程序中,这样子对现有的系统会产生很大的影响,因为这样就相当于整个项目都进行了重构,包括开发那边,而且要重新走一次测试流程。这种做法当然前端是爽了,以后维护代码更好控制了,但是对其他人员而言,并没有任何的好处。



以上做法大多数公司都不会让你那么做的,所以痛苦的事情是我们必须要选择第二种方案,我这个星期做的两个项目的重构有一个就是要用第二种了,虽然百般不情愿,但是没办法,工作就是工作。我现在就来讲下我用这种方法重构的一些不步骤:


1、我先检查一下现有的公用样式里面的代码结构,我们没办法完全剔除老旧代码的坑爹,但是我们可以先把能用的代码都提取出来,或者说记录下来。


2、我会尽可能的把现有混乱的样式表整理一下,把里面混乱不堪且没有注释的内容都注释一下,为以后维护做铺垫。


3、把旧的代码能够优化的代码尽可能的优化成为如今比较正规,比较规范的代码,即使哪天你不在这个公司了,别人也可以轻易的看懂你写的的东西。


    总结一下第三步,在我重构的痛苦人生中,我发现最多问题就是很多前端居然没有完全理解浮动的真正意思,在各种地方乱用清除浮动的方法,在各种没必要的地方都用浮动来解决页面布局。浮动确实是现在布局最常用到的方法,当然座位一个合格的前端,我觉得是必须要真正理解浮动的意义的,网上搜索一下DIV浮动教程一大把,但是依旧很多人没去看,也有可能觉得是太难了,我真的觉得我需要再写一片关于浮动的内容文章,分享给那些还没理解浮动的意义的开发者们。(后续必须写)。

    

当然这些不会用浮动的人,都是用最原始的方法在清除浮动:

<div class="clear"></div>

虽然这个方法太暴力,太好用,兼容太好,但是已经有比这个方法更好的解决方案了,详情请点击这里


其实我现在在做DIV布局的我会尽可能的避免使用浮动来布局。我比较喜欢用display:inline-block,来将块元素转换成内联元素这样子就不需要浮动也可以让两个DIV都排到一行上面了:

.display{display:inline-block;*display:inline;*zoom:1;}

关于display:inline-block,的用法推荐看下这篇文章《你真的懂display:inline-block吗》


关于前端重构的第一个方案,全站重构,我想就不需讲太多了,因为如果这样子的话,你可以完全按照自己的想方案来重构网站,最好是按照标准的写法来布局,这样子后面的人维护会很轻松。当然我这周痛苦的网站改版依旧继续进行中



转载请注明来自 520UED http://www.520ued.com/article/538829a7b992a7c43f5c2046

comments powered by Disqus