BlockLang 页面（设计草稿）

SwordFly 发布于2019-08-26 10:56 / 2769人阅读

摘要：我们将用户可以看到的可以交互的前端称为页面。只有外观和数据的页面，只能称为静态页面，显然我们日常使用的更多是动态页面，这就需要在静态页面上加上变的因素，我们也称之为行为。在介绍静态页面往动态页面的转换时，需要先介绍一个重要概念驱动。

页面

一个完整的程序模块由一个前端页面和多个后端服务组成，然后使用后端服务的 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/

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106864.html

BlockLang 0.2.0 发布啦

摘要：官网欢迎您了解发布的功能。中使用提交功能管理页面等项目资源的变更。 BlockLang 官网：https://blocklang.com 欢迎您了解 Block Lang 0.2.0 发布的功能。此版本增加三个功能：在项目中创建空页面在项目中创建分组使用版本控制系统管理新创建的页面创建空页面页面，等同 web 项目中的网页，或小程序中的页面，其中包含页面布局、页面样式和...

alphahans 2019-08-19 11:42 评论0 收藏0
BlockLang - 软件拼装工厂

摘要：相信每个人都可按照自己的需求，拼装出称心的软件。告别传统的业务系统开发模式，人人都能高效率的拼装出高质量的业务系统。转眼间，做业务系统的软件开发已有十个年头，从刚开始的激情满满，到周而复始地一个接一个的做项目，虽然竭尽全力将一些常用的代码或模式封装到框架中，但依然感觉到了无尽的重复，而正是这无尽的重复在逐渐的吞噬着我的工作热情。我意识到，虽然我热爱软件研发，但目前的业务系统软件研发...

Charles 2019-08-16 16:50 评论0 收藏0
100行代码，轻松搞定文本编辑器中草稿箱

摘要：本文节选自设计模式就该这样学使用备忘录模式实现草稿箱功能大家都用过网页中的富文本编辑器，编辑器通常都会附带草稿箱撤销等操作。首先创建发起人角色编辑器类。本文节选自《设计模式就该这样学》1　使用备忘录模式实现草稿箱功能大家都用过网页中的富文本编辑器，编辑器通常都会附带草稿箱、撤销等操作。下面用一段代码来实现一个...

番茄西红柿 2021-11-24 09:39 评论0 收藏2637
songEagle开发系列：如何科学有效的让博客文章实时保存

摘要：一写在前面如何实现文章的实时保存一般写文章的写博客的网站都会有这个功能点，这样保证了用户在不小心退出的情况下数据的保存下来，这样的交互比较符合用户的使用心理学。一、写在前面如何实现文章的实时保存？一般写文章的写博客的网站都会有这个功能点，这样保证了用户在不小心退出的情况下数据的保存下来，这样的交互比较符合用户的使用心理学。对于用户来说这是一个非常实用的功能，作为一个博客来说，有这个...

hatlonely 2019-08-26 13:54 评论0 收藏0
Nicon-支持私有部署的开源字体图标管理平台！

摘要：静态资源的访问通过配置代理实现页面的访问，跟服务端工程毫无关系，服务端只负责提供异步接口。集中管理异步接口配置的模块 Nicon 一言不合，先上平台Nicon。该平台接入github登录，采用七牛CDN存储，欢迎大家试用。 Nicon 是一个集图标上传、展示、使用于一身的字体图标管理平台，流程简单，符合日常开发使用习惯，适合企业在内部部署使用。采用 Iconfont 字体图标替换项目中...

trigkit4 2019-08-30 14:09 评论0 收藏0