dojo dragon main logo

用户体验

Web 应用程序本质上是通过用户界面提供体验的,应用程序的作者需要考虑各种因素,以向用户展示最好的界面。一致的可视化外观和可访问性通常是最显眼的因素,但也需要关注效率和性能,无论是应用程序的逻辑,还是交付的内容,都有助于提升 web 应用程序的用户体验。

主题

应用程序提供最佳用户体验的一种方式是向最终用户提供一致的外观。这可能与在类似的元素中使用一致的字体一样简单,但通常会扩展到使用相同的色调显示应用程序,甚至实现一整套设计语言,如 Material Design。

Dojo 的样式管道使用 CSS 模块将样式规则封装到特定的部件中,避免在大型代码库中交叉污染。但是,样式并不是完全隔离的——集中的 CSS 变量能够定义公共的主题属性并在应用程序的所有部件间共享。也可以为 Dojo 部件套件提供自定义主题。

详见 Dojo 样式和主题参考文档,了解如何创建应用程序主题。

UI 部件套件

通过部件套件,Dojo 提供了一些现成的 UI 组件。开发人员可以立即使用这些部件制作许多常见的页面,如 combobox、button、list、tab、text input 和 calendar 等部件。

Dojo 的部件支持国际化、可访问性主题,让开发人员在无需自定义 UI 组件的情况下,能够灵活的交付应用程序专有的用户体验。

导航路由

虽然有些应用程序为用户提供了一个主视图,其中可以处理大部分工作,但很多应用程序中用户需要访问更多的区块。帮助页面、设置面板或者分步骤工作流这些例子中,应用程序可能有多个界面,用户可以在任何时间访问这些界面。

应用程序的每块内容都需要唯一标识符,这样用户就可以访问它们。这些标识符也必须要支持为链接设置书签和分享链接,以便跳转到应用程序特定区块。用户也需要在不同区块间导航,以便可以访问应用程序提供的所有功能。导航可以前进到下一步、后退到上一步或者根据用户的选择在多个选项间跳转。

使用静态文件的传统网站包含可单独识别的内容,因为站点中的每个静态文件都能单独访问。HTML 文件可使用锚点元素,通过点击链接在不同文件间导航,而不必手动修改浏览器地址栏中的 URI。

顾名思义,单页面 web 应用程序只有一个主文件,用户通过该文件访问整个应用程序。但是,这些单页面应用可以使用 URI(连同 URI 已有的优点)来标识每一个小节。

路由组件为跨层级的路由提供了导航选项,并会将相应的已标识的路由分发到相应的应用程序区块。路由还将处理任何错误条件,例如导航到不存在的路由。

Dojo 路由

Dojo 的路由系统允许将 URL 的子路径注册为路由,以链接到某个特定类型部件上,这个特定类型的部件称为 Outlet。当用户导航到特定的路由时,将会渲染注册到该路由上的 Outlet 部件。

当用户导航到 Outlet 时,就会“渲染” Outlet,但 Outlet 很少直接处理应用程序的渲染。Outlet 主要是处理导航的封装器(传入查询参数或者处理错误的回调),而将渲染功能委托给应用程序中的其他部件。

类似于在传统 HTML 页面中使用的锚点,应用程序可以使用与 Outlet 关联的 Link 部件向用户提供导航选项。

当使用路由时,Dojo 的构建系统能为应用程序中的所有顶级路由自动生成单独的包。然后可以根据需要将每个包独立的交付给用户。

详见 Dojo 路由参考指南,了解如何在自己的应用程序中实现路由。