3.1 功能设计
功能设计的时候可能需要反复修改，以什么为标准呢？听老板的还是听用户的？虽然这是一个“顾客就是上帝”的时代，但有些设计原则还是要遵循的，因为有时候“上帝”也会犯错误，更多的时候“上帝”是善变的。
（1）避免重复原则（DRY, Don't repeat yourself），编程的最基本原则是避免重复，换句话说就是提高代码复用率。
（2）简单原则（Keep It Simple and Stupid），简单是用户最佳体验之一，像苹果就是用简单打败一切。简单的代码占用时间少、漏洞少，并且易于修改。
（3）低耦合原则（Minimize Coupling），即这部分代码的使用和修改影响到其他部分的代码要尽可能地少，否则牵一发而动全身的悲剧无人愿意看到。
（4）别让我思考（Don't make me think），代码不仅是写给机器的，更多是写给人看的，所以编写的代码一定要易于读易于理解，最终才易于维护。“如果一个维护者不再继续维护你的代码，很可能他是有想杀了你的冲动。”
（5）单一责任原则（Single Responsibility Principle），某个代码的功能，应该保证只有单一的明确的执行任务，否则一旦修改会增加关联测试的烦琐程度。
（6）最大限度凝聚原则（Maximize Cohesion），尽量将功能相似相近的代码放在同一个部分。程序中常听到的“类”这个词就取之于“物以类聚”，类就是为了“类聚”相似相近的代码。
（7）避免过早优化（Avoid Premature Optimization），现在社会到处都有“完美主义者”，如果代码运行没有想象中的慢，就别去“完美”它，否则要花费更多的代价。
3.1.1 HTML、CSS和JavaScript的分层关系
通过第1章我们了解到HTML是最早出来的，CSS和JavaScript则稍晚出现。它们实质上的关系应该如图3-1所示。
图3-1 UI分层关系结构
看到这里似乎应该思考一下前面的范例是否有“重构”的空间？答案是肯定的。重构原因之一就是代码是否便于阅读。如果在设计时一开始就考虑进去，会使后期的维护工作变得相对便捷，找HTML代码的就直接找html文件，找JavaScript代码的就直接找js文件，找CSS代码的就直接找css文件。
将JavaScript和HTML分离是前端必须要做的一件事。JavaScript的诞生是要让HTML更丰富，而不是更杂乱。混合在一起会导致：bug跟踪工具难以调试。随着分工更细化，编写HTML的人不一定要负责编写JavaScript。
CSS和HTML一般也是分离的，不过这大都是网页设计师或者前端重构工程师的任务。
另外，保持CSS和JavaScript之间清晰的分离很有挑战性，例如第2章的范例有控制style.width的，还有控制style.display的，是否需要完全分离确实需要视具体情况而定，不过如果完全不注意这一点，任由其发展，一旦出现问题，大家首先去找CSS，精疲力尽时才会去JavaScript中查找样式问题。
3.1.2 照片展示功能设计
网易是国内早期提供相册功能的公司之一，相册用户群体很大，参考其相册会发现，照片展示的基本功能如下：
● 有大图和缩略图。
● 有上一张图和下一张图切换。
● 有键盘控制显示上一张图和下一张图。
● 有显示上一组和下一组功能。