页面
一个完整的程序模块由一个前端页面和多个后端服务组成,然后使用后端服务的 URL 将前端和后端关联起来。我们将用户可以看到的、可以交互的前端称为页面。
随着 web 技术的发展,我们理解或看待“页面”的角度一直在变化,朝着更规范、更简单的方向变。我们借助时下流行的 MVVM(Model-View-ViewModel) 框架重新审视界面,归纳出页面三要素,但旧瓶装新酒,边界更清晰,内涵更丰富。
页面的三个组成要素:
- 外观(ui)
- 数据(data)
- 行为(behavior)
外观
一个网页的外观是由 HTML 和 CSS 实现的,但 HTML 和 CSS 都是实现细节,如果直接依赖实现细节,我们就没有办法用相同的概念描述 Android 页面或 iOS 页面,所以我们将外观的组成抽象为:
- 结构 - 使用 UI 组件逐层嵌套形成树状结构,且只有一个根节点,并称之为
Page
- 样式 - 使用主题的概念统一设置和更换样式,如
Dojo Theme
技术
注意:为了让概念更加简单和纯粹,我们认为结构只能由 UI 组件一个元素组成。
数据
一个应用程序中的数据可根据使用范围划分层级:
- 全局数据 - 全局共享的数据,所有页面都可以使用
- 页面数据 - 只有所在的页面才可以使用
页面数据本可以再进一步细分,如按区块等,但如果我们使用 React Redux
或 Dojo Store
等技术将页面中的数据集中存储后,就无需进一步拆分。
页面中的数据,分为两大类:
- 业务数据
- 交互数据 - 如数据有效性校验结果和提示信息等
页面中的数据会独立、集中存储,但又能注入到页面的结构中。
行为
一提到页面中的行为或交互,我们就想到了 JavaScript。但 JavaScript 依然是实现细节,我们将 JavaScript 做的所有事情抽象为一个概念,并称之为“行为”。
只有外观和数据的页面,只能称为静态页面,显然我们日常使用的更多是动态页面,这就需要在静态页面上加上变的因素,我们也称之为“行为”。
在介绍静态页面往动态页面的转换时,需要先介绍一个重要概念:驱动。页面不会无缘无故的变,它必然是由其他因素驱动着变的。
目前总结出两种驱动页面变化的原因:
- 数据变更驱动(内因)
- 用户交互驱动(外因)
在介绍外观和数据时,我们不仅说明了如何拔高抽象,也说明了如何落地实现。同样,行为也需要落地实现,我们使用纯函数来描述一个行为。
纯函数:返回结果只依赖于它的参数,并且在执行过程里面没有副作用,是幂等的,无状态的。
Block Lang 官网 https://blocklang.com
Block Lang 源码 https://github.com/blocklang/ 或 https://gitee.com/blocklang/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。