页面重构时的注意事项

blog

1. 重构页面时，什么样的代码才算是好的代码？

这个我感觉要从三方面来做答，基础的就不说了，那些语义化，结构化，兼容性等等方面的问题。说说中级部分的：

• 页面的健壮性：　这个怎么说呢，按我的理解，UI出的psd图是一个页面理想状态下的形态，而真实上线后，会出现三种极端状态，一，数据极多，二，数据极少，三，数据刚好(其实就是PSD设置描述的一个状态)。所以在页面排版的时候，考虑这设计之外的两种状态，以免数据太多的时候，撑破布局，页面走样。以免数据太少，页面高度变小，布局不对齐，会打破整个页面的平衡。UI设计时为了效率或经验问题出的图，刚好是理想状态，不多不少，但经验丰富的，会在项目后期补出一个无数据时的装饰页面。

• 页面的扩展性：可以说，这个也是第一条的扩充，扩展性的意思为，在页面的模块很少的时候，要考虑未来添加子模块或兄弟模块的状态，为将来留好css，html扩展的出入口。在将来添加模块的时候，尽可能少的去动原来的html结构，使html易于扩展，尽可能少的去修改css，使css能够继承可复用。一般的处理就是多套一层div，或其它解决办法。

• 页面的复用性：　由于页面中风格相似的模块很多，或页面中与页面中相似的模拟很多，但是有的高点有的低点，这样建议把表现形式的样式放在一个class中，物理属性放在一个class中。还有就是装饰性的图片决不不以明标签的方式插入到页面中，内容式的内容绝对以的方式插入中去，以免将来多主题，多语言版本的实现。
  大概就这么多，唉，上次面试都没有想起这么多，郁闷。

2. 重构时如何告诉设计师，他设计的东西太丑？

• 个人本身的专业度，如果你是从一个设计转过来的前端，并且虽然在从事前端，但一直在关注着前端，这样在保证自身水平或有认知能力的前提下，去提一下建议，那能保证是有质量，而不是随便说说。比如：欧美国家的人为什么喜欢饱和度那么重的页面风格，那是因为他们在赤道附近，接受紫外线比较强，所以喜欢重色。比如，能分清冷暖色，能分清各个颜色的表达意义，一般各个颜色搭配之后是为了突出页面内容版块而且强调一定是有序，而不是无序的。

• 沟通时的语气或说话时的文字组织，一定要注意。这不但体现一个人的情商，更体现一个人的智商。话有三说，巧着为妙。为何他与人相处恰恰刚好，而我却处处被动，这是有道理的。
  个人建议：注意建议，比如以下场景，你这个东西在我的显示器上看的偏黄，与我们产品logo的主色冲突太大，是不是故意为之，还是我显示器的问题，能不能到我这来看看。一定要注意，是你故意为之，或我这看看。即抬高了对方，又把场景的主动权掌握在自己的手里。

• 本身话语权，如果你具备一个有话语权的人，或者有这个品牌认知，让大家有这个共识，这人，说的东西一般靠谱。可以去说，否则，点评别人的江山，还不如管好自己的三亩地。