乐趣区

BlockLang-页面设计草稿

页面

一个完整的程序模块由一个前端页面和多个后端服务组成,然后使用后端服务的 URL 将前端和后端关联起来。我们将用户可以看到的、可以交互的前端称为 页面

随着 web 技术的发展,我们理解或看待“页面”的角度一直在变化,朝着更规范、更简单的方向变。我们借助时下流行的 MVVM(Model-View-ViewModel) 框架重新审视界面,归纳出页面三要素,但旧瓶装新酒,边界更清晰,内涵更丰富。

页面的三个组成要素:

  1. 外观(ui)
  2. 数据(data)
  3. 行为(behavior)

外观

一个网页的外观是由 HTML 和 CSS 实现的,但 HTML 和 CSS 都是实现细节,如果直接依赖实现细节,我们就没有办法用相同的概念描述 Android 页面或 iOS 页面,所以我们将外观的组成抽象为:

  1. 结构 – 使用 UI 组件逐层嵌套形成树状结构,且只有一个根节点,并称之为 Page
  2. 样式 – 使用主题的概念统一设置和更换样式,如 Dojo Theme 技术

注意:为了让概念更加简单和纯粹,我们认为结构只能由 UI 组件 一个元素组成。

数据

一个应用程序中的数据可根据使用范围划分层级:

  1. 全局数据 – 全局共享的数据,所有页面都可以使用
  2. 页面数据 – 只有所在的页面才可以使用

页面数据本可以再进一步细分,如按区块等,但如果我们使用 React ReduxDojo Store 等技术将页面中的数据集中存储后,就无需进一步拆分。

页面中的数据,分为两大类:

  1. 业务数据
  2. 交互数据 – 如数据有效性校验结果和提示信息等

页面中的数据会独立、集中存储,但又能注入到页面的结构中。

行为

一提到页面中的行为或交互,我们就想到了 JavaScript。但 JavaScript 依然是实现细节,我们将 JavaScript 做的所有事情抽象为一个概念,并称之为“行为”。

只有外观和数据的页面,只能称为静态页面,显然我们日常使用的更多是动态页面,这就需要在静态页面上加上变的因素,我们也称之为“行为”。

在介绍静态页面往动态页面的转换时,需要先介绍一个重要概念:驱动。页面不会无缘无故的变,它必然是由其他因素驱动着变的。

目前总结出两种 驱动 页面变化的原因:

  1. 数据变更驱动(内因)
  2. 用户交互驱动(外因)

在介绍外观和数据时,我们不仅说明了如何拔高抽象,也说明了如何落地实现。同样,行为也需要落地实现,我们使用纯函数来描述一个行为。

纯函数:返回结果只依赖于它的参数,并且在执行过程里面没有副作用,是幂等的,无状态的。

Block Lang 官网 https://blocklang.com

Block Lang 源码 https://github.com/blocklang/ 或 https://gitee.com/blocklang/

退出移动版