資訊專(zhuān)欄INFORMATION COLUMN
摘要：我們將用戶可以看到的可以交互的前端稱(chēng)為頁(yè)面。只有外觀和數(shù)據(jù)的頁(yè)面，只能稱(chēng)為靜態(tài)頁(yè)面，顯然我們?nèi)粘Ｊ褂玫母嗍莿?dòng)態(tài)頁(yè)面，這就需要在靜態(tài)頁(yè)面上加上變的因素，我們也稱(chēng)之為行為。在介紹靜態(tài)頁(yè)面往動(dòng)態(tài)頁(yè)面的轉(zhuǎn)換時(shí)，需要先介紹一個(gè)重要概念驅(qū)動(dòng)。
頁(yè)面
一個(gè)完整的程序模塊由一個(gè)前端頁(yè)面和多個(gè)后端服務(wù)組成，然后使用后端服務(wù)的 URL 將前端和后端關(guān)聯(lián)起來(lái)。我們將用戶可以看到的、可以交互的前端稱(chēng)為頁(yè)面。
隨著 web 技術(shù)的發(fā)展，我們理解或看待“頁(yè)面”的角度一直在變化，朝著更規(guī)范、更簡(jiǎn)單的方向變。我們借助時(shí)下流行的 MVVM(Model-View-ViewModel) 框架重新審視界面，歸納出頁(yè)面三要素，但舊瓶裝新酒，邊界更清晰，內(nèi)涵更豐富。
頁(yè)面的三個(gè)組成要素：
外觀(ui)
數(shù)據(jù)(data)
行為(behavior)
外觀一個(gè)網(wǎng)頁(yè)的外觀是由 HTML 和 CSS 實(shí)現(xiàn)的，但 HTML 和 CSS 都是實(shí)現(xiàn)細(xì)節(jié)，如果直接依賴(lài)實(shí)現(xiàn)細(xì)節(jié)，我們就沒(méi)有辦法用相同的概念描述 Android 頁(yè)面或 iOS 頁(yè)面，所以我們將外觀的組成抽象為：
結(jié)構(gòu) - 使用 UI 組件逐層嵌套形成樹(shù)狀結(jié)構(gòu)，且只有一個(gè)根節(jié)點(diǎn)，并稱(chēng)之為 Page
樣式 - 使用主題的概念統(tǒng)一設(shè)置和更換樣式，如 Dojo Theme 技術(shù)
注意：為了讓概念更加簡(jiǎn)單和純粹，我們認(rèn)為結(jié)構(gòu)只能由 UI 組件一個(gè)元素組成。
數(shù)據(jù)一個(gè)應(yīng)用程序中的數(shù)據(jù)可根據(jù)使用范圍劃分層級(jí)：
全局?jǐn)?shù)據(jù) - 全局共享的數(shù)據(jù)，所有頁(yè)面都可以使用
頁(yè)面數(shù)據(jù) - 只有所在的頁(yè)面才可以使用
頁(yè)面數(shù)據(jù)本可以再進(jìn)一步細(xì)分，如按區(qū)塊等，但如果我們使用 React Redux 或 Dojo Store 等技術(shù)將頁(yè)面中的數(shù)據(jù)集中存儲(chǔ)后，就無(wú)需進(jìn)一步拆分。
頁(yè)面中的數(shù)據(jù)，分為兩大類(lèi)：
業(yè)務(wù)數(shù)據(jù)
交互數(shù)據(jù) - 如數(shù)據(jù)有效性校驗(yàn)結(jié)果和提示信息等
頁(yè)面中的數(shù)據(jù)會(huì)獨(dú)立、集中存儲(chǔ)，但又能注入到頁(yè)面的結(jié)構(gòu)中。
行為一提到頁(yè)面中的行為或交互，我們就想到了 JavaScript。但 JavaScript 依然是實(shí)現(xiàn)細(xì)節(jié)，我們將 JavaScript 做的所有事情抽象為一個(gè)概念，并稱(chēng)之為“行為”。
只有外觀和數(shù)據(jù)的頁(yè)面，只能稱(chēng)為靜態(tài)頁(yè)面，顯然我們?nèi)粘Ｊ褂玫母嗍莿?dòng)態(tài)頁(yè)面，這就需要在靜態(tài)頁(yè)面上加上變的因素，我們也稱(chēng)之為“行為”。
在介紹靜態(tài)頁(yè)面往動(dòng)態(tài)頁(yè)面的轉(zhuǎn)換時(shí)，需要先介紹一個(gè)重要概念：驅(qū)動(dòng)。頁(yè)面不會(huì)無(wú)緣無(wú)故的變，它必然是由其他因素驅(qū)動(dòng)著變的。
目前總結(jié)出兩種驅(qū)動(dòng)頁(yè)面變化的原因：
數(shù)據(jù)變更驅(qū)動(dòng)（內(nèi)因）
用戶交互驅(qū)動(dòng)（外因）
在介紹外觀和數(shù)據(jù)時(shí)，我們不僅說(shuō)明了如何拔高抽象，也說(shuō)明了如何落地實(shí)現(xiàn)。同樣，行為也需要落地實(shí)現(xiàn)，我們使用純函數(shù)來(lái)描述一個(gè)行為。
純函數(shù)：返回結(jié)果只依賴(lài)于它的參數(shù)，并且在執(zhí)行過(guò)程里面沒(méi)有副作用，是冪等的，無(wú)狀態(tài)的。
Block Lang 官網(wǎng) https://blocklang.com
Block Lang 源碼 https://github.com/blocklang/ 或 https://gitee.com/blocklang/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106864.html
摘要：官網(wǎng)歡迎您了解發(fā)布的功能。中使用提交功能管理頁(yè)面等項(xiàng)目資源的變更。 BlockLang 官網(wǎng)：https://blocklang.com 歡迎您了解 Block Lang 0.2.0 發(fā)布的功能。此版本增加三個(gè)功能： 在項(xiàng)目中創(chuàng)建空頁(yè)面 在項(xiàng)目中創(chuàng)建分組 使用版本控制系統(tǒng)管理新創(chuàng)建的頁(yè)面 創(chuàng)建空頁(yè)面 頁(yè)面，等同 web 項(xiàng)目中的網(wǎng)頁(yè)，或小程序中的頁(yè)面，其中包含頁(yè)面布局、頁(yè)面樣式和...
摘要：相信每個(gè)人都可按照自己的需求，拼裝出稱(chēng)心的軟件。告別傳統(tǒng)的業(yè)務(wù)系統(tǒng)開(kāi)發(fā)模式，人人都能高效率的拼裝出高質(zhì)量的業(yè)務(wù)系統(tǒng)。 轉(zhuǎn)眼間，做業(yè)務(wù)系統(tǒng)的軟件開(kāi)發(fā)已有十個(gè)年頭，從剛開(kāi)始的激情滿滿，到周而復(fù)始地一個(gè)接一個(gè)的做項(xiàng)目，雖然竭盡全力將一些常用的代碼或模式封裝到框架中，但依然感覺(jué)到了無(wú)盡的重復(fù)，而正是這無(wú)盡的重復(fù)在逐漸的吞噬著我的工作熱情。 我意識(shí)到，雖然我熱愛(ài)軟件研發(fā)，但目前的業(yè)務(wù)系統(tǒng)軟件研發(fā)...
摘要：本文節(jié)選自設(shè)計(jì)模式就該這樣學(xué)使用備忘錄模式實(shí)現(xiàn)草稿箱功能大家都用過(guò)網(wǎng)頁(yè)中的富文本編輯器，編輯器通常都會(huì)附帶草稿箱撤銷(xiāo)等操作。首先創(chuàng)建發(fā)起人角色編輯器類(lèi)。 本文節(jié)選自《設(shè)計(jì)模式就該這樣學(xué)》1 使用備忘錄模式實(shí)現(xiàn)草稿箱功能大家都用過(guò)網(wǎng)頁(yè)中的富文本編輯器，編輯器通常都會(huì)附帶草稿箱、撤銷(xiāo)等操作。下面用一段代碼來(lái)實(shí)現(xiàn)一個(gè)...
摘要：一寫(xiě)在前面如何實(shí)現(xiàn)文章的實(shí)時(shí)保存一般寫(xiě)文章的寫(xiě)博客的網(wǎng)站都會(huì)有這個(gè)功能點(diǎn)，這樣保證了用戶在不小心退出的情況下數(shù)據(jù)的保存下來(lái)，這樣的交互比較符合用戶的使用心理學(xué)。 一、寫(xiě)在前面 如何實(shí)現(xiàn)文章的實(shí)時(shí)保存？一般寫(xiě)文章的寫(xiě)博客的網(wǎng)站都會(huì)有這個(gè)功能點(diǎn)，這樣保證了用戶在不小心退出的情況下數(shù)據(jù)的保存下來(lái)，這樣的交互比較符合用戶的使用心理學(xué)。對(duì)于用戶來(lái)說(shuō)這是一個(gè)非常實(shí)用的功能，作為一個(gè)博客來(lái)說(shuō)，有這個(gè)...
摘要：靜態(tài)資源的訪問(wèn)通過(guò)配置代理實(shí)現(xiàn)頁(yè)面的訪問(wèn)，跟服務(wù)端工程毫無(wú)關(guān)系，服務(wù)端只負(fù)責(zé)提供異步接口。集中管理異步接口配置的模塊 Nicon 一言不合，先上平臺(tái)Nicon。該平臺(tái)接入github登錄，采用七牛CDN存儲(chǔ)，歡迎大家試用。 Nicon 是一個(gè)集圖標(biāo)上傳、展示、使用于一身的字體圖標(biāo)管理平臺(tái)，流程簡(jiǎn)單，符合日常開(kāi)發(fā)使用習(xí)慣，適合企業(yè)在內(nèi)部部署使用。采用 Iconfont 字體圖標(biāo)替換項(xiàng)目中...
閱讀 1684·2023-04-25 19:51
閱讀 2009·2019-08-30 15:55
閱讀 1892·2019-08-30 15:44
閱讀 2762·2019-08-30 13:58
閱讀 2774·2019-08-29 16:37
閱讀 1150·2019-08-29 15:34
閱讀 4150·2019-08-29 11:05
閱讀 2731·2019-08-28 17:51
