BlockLang 頁面（設計草稿）

SwordFly 發布于2019-08-26 10:56 / 2824人閱讀

摘要：我們將用戶可以看到的可以交互的前端稱為頁面。只有外觀和數據的頁面，只能稱為靜態頁面，顯然我們日常使用的更多是動態頁面，這就需要在靜態頁面上加上變的因素，我們也稱之為行為。在介紹靜態頁面往動態頁面的轉換時，需要先介紹一個重要概念驅動。

頁面

一個完整的程序模塊由一個前端頁面和多個后端服務組成，然后使用后端服務的 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/

GPU云服務器云服務器 BlockLang 頁面設計網頁頁面設計網站頁面設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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