两个页面要合并
Paste_Image.png
理想的合并结果
Paste_Image.png
简单合并
简单合并
注：很明显，section one 和 two 中的 “1”是重复的，需要重构舍去。
5 种呈现状态
属于一个数据接口，该接口有 5 种呈现状态。注：本文仅示范 3 种。
Paste_Image.png
是否需要合并？
- 一个接口，js 代码处理数据的要求；
- 页面结构并不复杂；
- 页面结构可复用；
追求和折中
-
技术追求
js 和 css 都是基于 html 结构的，因此合理的 html 结构至关重要。通过 css 实现页面的各种呈现（presentation）。通过 js 实现数据加载。通过这种方式有效地分离了数据和表现，极大地增强了各自作业的自由度、调整的灵活度。
在实际重构过程中，由结构变更带来的 css 样式上的调整、js 代码上的整合并不会很简单，不仅需要技术技能，更需要加强对业务的熟悉和了解，才能做好。
有了这种结构意识，不仅会促进技术技能的提升，更有助于促进对业务的深入了解。
业务设计
技术能力
业务设计和技术能力是制约你技术追求的。由于业务设计或者技术能力的限制，我们有时需要采取一些折中措施以敏捷、迭代的方式快速实现业务需求。
请记住，只有保持技术追求，有技术理想，我们才能不断提升技术实现能力，以更好地满足业务和市场需求。
没有技术最求，就不可持续；不考虑现实条件，只适合理论研究。
原文 NodeCode，有改动
- 各处出现的同一个数据参数块，需保证 html 结构的统一（如果样式有差异，用css来区分），这样便于js统一加数据。（可通过 modules 方式 @@include mustache 模板实现）
- 引用css，最外层元素给个 class 名，其子元素尽量不用 class 的方式，而是用 .class ul li span 这一类，直接用标签名。否则，html 会充斥大量名字很长的 class 名，导致代码看起来不工整，不易理解全貌。
- 切图请参照 ai 图进行，如果 ai 图和线框图有差异，请找产品和视觉设计解决冲突。
- 页面中请不要有重复项，否则给理解会带来无谓的负担 。（可通过 modules 方式 @@include mustache 模板实现）
