页面

一个完整的程序模块由一个前端页面和多个后端服务组成，然后使用后端服务的 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 Redux 或 Dojo Store 等技术将页面中的数据集中存储后，就无需进一步拆分。

页面中的数据，分为两大类：

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

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

行为

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

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

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

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

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

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

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

Block Lang 官网 https://blocklang.com

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