一个接口、多种状态的页面结构合并示例

两个页面要合并
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,有改动
  1. 各处出现的同一个数据参数块,需保证 html 结构的统一(如果样式有差异,用css来区分),这样便于js统一加数据。(可通过 modules 方式 @@include mustache 模板实现)
  2. 引用css,最外层元素给个 class 名,其子元素尽量不用 class 的方式,而是用 .class ul li span 这一类,直接用标签名。否则,html 会充斥大量名字很长的 class 名,导致代码看起来不工整,不易理解全貌。
  3. 切图请参照 ai 图进行,如果 ai 图和线框图有差异,请找产品和视觉设计解决冲突。
  4. 页面中请不要有重复项,否则给理解会带来无谓的负担 。(可通过 modules 方式 @@include mustache 模板实现)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容