TySheMo 前端數據管理模型

• 項目地址：github.com/tangshuang/…
• 使用文檔：www.tangshuang.net/7101.html
• 使用案例：github.com/tangshuang/…

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

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

類型檢查系統

雖然咱們已經有typescript這樣的類型檢查系統，可是，typescript是在編譯時進行類型檢查的，在運行時，咱們須要對一些動態的數據（特別是從後臺api返回的數據）進行類型和格式檢查。在支持graphql的系統中彷佛沒必要這麼擔憂，但目前大多數的restful應用，仍是須要有一個工具去作這樣的一件事。

TySheMo將數據類型的檢查抽象出三個層面的對象：原型、類型、規則。它們分別在原子、結構、邏輯層面對數據進行校驗，並且是在運行時。若是校驗失敗，你還能夠經過拋出的錯誤獲得更爲詳細的信息。

TySheMo內部提供了多個數據原型（相似基礎數據類型）擴展，而且直接使用js標準庫中的內置對象做爲原型，免去須要用字符串來定義類型的麻煩。內置了Dict, List, Enum, Tuple, Range這幾種類型。經過對後臺api數據的檢查，就能夠即時避免因爲api返回數據類型或結構引發的錯誤。同時，它還提供了更爲豐富的類型檢查規範，你能夠閱讀它的文檔瞭解更多用法。

數據模式

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

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

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

數據模型

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

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

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

結語

TySheMo不解決全部問題，而是專一將一個應用中的某個局部的數據管理作到極致。你歷來沒有體驗過，同一個表單的業務邏輯，你不須要修改業務邏輯代碼部分，而只須要修改UI交互的邏輯，就能夠徹底適應react, vue, angular。你也許不須要它，但也許也須要它，這取決於你如何在你但應用中管理你的數據。若是你對這個項目感興趣，能夠經過github參與項目。

（完）