TySheMo前端數據管理模型

NO IMAGE

TySheMo是一個前端數據(狀態)管理工具。它面向複雜的前端數據管理,用於在前端結構化數據的不斷變化中,清晰地控制數據變動,使數據變動不引起錯誤,並且方便表單數據的恢復、校驗、格式化提交。

在需要對數據類型進行校驗,數據變動引發界面變動,數據校驗,格式化後輸出數據,保證數據運算時得到想要的結果等一系列複雜的數據變化需求,TySheMo可以在項目中發揮不錯的的作用。雖然它不追求性能,但是在確保數據類型和格式安全上,它具有非常優秀的思想,讓對數據有強烈依賴的業務可以在複雜的邏輯中保證不出錯。

類型檢查系統

雖然我們已經有typescript這樣的類型檢查系統,但是,typescript是在編譯時進行類型檢查的,在運行時,我們需要對一些動態的數據(特別是從後臺api返回的數據)進行類型和格式檢查。在支持graphql的系統中似乎不必這麼擔心,但目前大多數的restful應用,還是需要有一個工具去做這樣的一件事。

TySheMo將數據類型的檢查抽象出三個層面的對象:原型、類型、規則。它們分別在原子、結構、邏輯層面對數據進行校驗,而且是在運行時。如果校驗失敗,你還可以通過拋出的錯誤得到更為詳細的信息。

TySheMo前端數據管理模型

TySheMo內部提供了多個數據原型(類似基礎數據類型)擴展,並且直接使用js標準庫中的內置對象作為原型,免去需要用字符串來定義類型的麻煩。內置了Dict, List, Enum, Tuple, Range這幾種類型。通過對後臺api數據的檢查,就可以即時避免由於api返回數據類型或結構引起的錯誤。同時,它還提供了更為豐富的類型檢查規範,你可以閱讀它的文檔瞭解更多用法。

數據模式

TySheMo提供了一種定義結構化數據的方式,用於對一個結構化數據進行規範化定義。數據模式是一個抽象的數據結構範型,它不是具體的數據,但規定了數據本身的結構規範。並且,作為工具庫,TySheMo提供了Schema類,schema實例擁有根據定義規範數據的能力。

更為重要的是Schema是一種數據結構和行為邏輯約束的範例。行業裡有json schema這樣的先驅,我們在這些先行者的基礎上,提煉出對業務有幫助的部分,形成一套類似後臺數據庫結構描述一樣的定義語言,用以在前端去描述一個結構化,但隨時變化的數據對象。

TySheMo前端數據管理模型

它基於數據類型檢查系統,你需要在type屬性傳入對應的類型。對於Schema實例而言,它是無狀態的,它所提供的接口是純粹的工廠,不會產生任何內部資源。這樣的設計,使得Schema有可能成為規範,在開發中/測試中,確保業務中給的數據是按照規範給定的,否則,就會拋出錯誤。

數據模型

TySheMo提供了基於Schema的數據模型Model,是一個管理狀態數據的容器。數據被放在數據模型中管理時,由於Schema的約束,數據不得不按照規範運行。它提供了當代數據響應的特性,你可以觀察數據變化,從而來決定如何變動界面。

作為工具庫,TySheMo從業務出發對數據模型的寫作方式進行了約束。一個數據模型,是一個class,並且需要定義它的schema。要將數據放到模型中進行管理,你必須實例化模型,並且使用模型接口進行數據修改和格式化。但到最後,你會發現,模型的使用異常簡單,真正複雜的部分,往往在於,如何通過Schema制定你的數據規範。

TySheMo前端數據管理模型

這只是對Model的數據響應最簡單的一個演示,你還可以通過Model提供的能力,完成更多的事情。你可以把它和react, vue, angular結合使用,你可以在任何應用中使用它。特別是在表單數據管理上,TySheMo可以做到非常出色。關於Model的細節和更多特性,你可以閱讀使用文檔瞭解。

結語

TySheMo不解決所有問題,而是專注將一個應用中的某個局部的數據管理做到極致。你從來沒有體驗過,同一個表單的業務邏輯,你不需要修改業務邏輯代碼部分,而只需要修改UI交互的邏輯,就可以完全適應react, vue, angular。你也許不需要它,但也許也需要它,這取決於你如何在你但應用中管理你的數據。如果你對這個項目感興趣,可以通過github參與項目。

(完)

相關文章

Promise的使用及簡單實現

前端驅動的接口數據檢查、文檔生成、mock以及接口自動化測試

React中的雙向綁定

學不動系列:新前端框架Nautil,哇~