最佳实践:对移动版网站上的组件做出反应

时间:2017-02-08 19:44:19

标签: javascript reactjs

我想要一些关于反应组件使用的建议/意见。

当面对网站的桌面和移动版本(不是应用程序)的两种不同设计时,您是否使用相同的组件并使用媒体查询或JavaScript窗口大小等修改各个部分或者您是否在需要时创建不同的组件如果它是移动网站,会有不同的呈现方式吗?

您根据自己的经验/意见使用的任何策略都会有很大帮助。很多不同的人将不胜感激!

谢谢!

1 个答案:

答案 0 :(得分:2)

我会使用响应式设计的网络标准和像bootstrap或foundation这样的库。除非您针对不同的平台(例如,本机与Web),否则无需编写不同的视图。这将节省您的时间和精力,因为您从编写不同组件获得的收益并不大。

如果有特定的页面可以更好地使用完全不同的UI,你可以混合使用两者。简单地创建两个包含大量文本的主页没有任何优势,这个问题已通过响应式设计实践解决,而不是利用它们是一个倒退。

尽可能多地利用组件重新使用。如果桌面共享5/6功能以一种方式写入5,它们可以不同地缩放以进行碎化并写入第6个版本的两个版本。

我不会说这两个选项是相互排斥的。尽可能利用响应式设计实践,并尽可能利用响应的组件化。如果您发现自己不确定要走哪条路,可能就意味着使用响应式设计(恕我直言)。

我设计的应用目标是真正不同的平台。我们想要本地和网络并排。您正在寻找的是一个中间立场,因为许多组件可能会被共享,但少数可能需要不同的功能,因此组件。我见过两个app结构,一个按类型组织你的应用程序(例如组件与容器),另一个根据页面结构组织代码(索引,帐户,登录,共享)。我发现当需要混合完成相同功能但目标不同平台的组件时,最好按页面结构分离,就像在索引页面中一样,我可以在需要时并排放置iOS索引和Web索引。这允许我有两个无状态组件和一个阶段性容器来为它们供电。这对于更大的应用程序而言在心理上也更有意义,并允许您完成更多您想要做的事情。

总的来说,如果您需要使用if语句来隐藏和显示功能,请考虑将其分解为可重用的组件,并创建由单个状态完整组件提供支持的移动和桌面演示组件。