做UI --- 看似沒有太高深的技術含量, 但是確實整個前後端最煩人的任務, 尤其是web應用, 裏面有各種控件和文本框, 除此之外還要合理的用UI表現數據的狀態和關係, 暗示用戶操作等待, 我每次考慮倒着寫細節的時候都非常不開森.
在介紹我最愛的json-editor之前先來思考幾個問題:
有沒有思考過, 幾乎所有的表單/編輯器都是一個json?
比如這個:
其中輸入框/大文本框/(日期, 顏色)選擇器/dataset(可輸入可選)/都是string類型, 數字輸入框/滑塊都可以是number類型, switch/開關是boolean類型(也可以是null), 多選按鈕/add&remove按鈕則是array類型, 整個編輯器的輸出就是一個object類型.
所以說, 用戶登錄框可以表示爲:
{
username:'Jim',
password:'123'
}
賬戶信息編輯界面可以是:
{
ID:'JinHengyu',
age:22,
married:false,
skills:['javascript','node.js','mongodb']
}
在線寫文章的:
{
title:'how to use json-editor?',
author:'Jim',
date:1550300733224,
class:null,
content:'ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent',
tags:['json','UI','web','original']
}
我一直認爲JavaScript對軟件行業最大的貢獻是JSON, json是一個'文檔', 它用string描述任何一個事物, string類型是在網絡傳輸以及外部存儲都風雨無阻的存在, 所以json就這樣流行開來了...
爲何要辛辛苦苦設計每一個控件, 最後再一條條讀出來呢?
爲啥不設計一個json對象的GUI編輯器框架,模擬上述'表單', 以一個原始json爲輸入, 以編輯好的json爲輸出?
當然, 這個編輯器肯定不能是代碼編輯器, 比如這個:
雖然json代碼很簡單, 但暴露給用戶就會帶來很大的安全隱患, 而且也沒人願意直接編輯json代碼, 許多批量操作的功能沒法實施, 那如果是這樣就好多了:
嗯, 這種UI是我們開發者比較熟悉的簡易對象編輯器, 它出現在瀏覽器的開發者工具以及IDE當中, 但對外行的用戶來說還是不夠友好, 所以依然不能拿來用.
最主要的原因是對於同一個數據類型有多種控件模式, 比如string類型可以使文本框也可以是select選擇器, 不同的模式不僅能提高效率, 也能在view層面上對數據進行的約束, 所以編輯器模式是必不可少的.
選擇最優雅的編輯模式
json-editor對每一種數據列行提供許多內置模式, 每一個模式又可以定製樣式:
除了圖形化, json-editor也提供了代碼編輯器, 支持多種編程語言, 就不展開講了.
JSON Schema
JSON Schema是一個正在進行中的草案, 旨在通過另一個json來描述並約束這個json的結構和類型, JOSN Schema提供了一套非常簡單的描述語法比如:
{ "type": "string" }
json-editor當然也遵循了這個標準, 利用schema渲染編輯器, 有了標準的支持, 我們就可以正大光明的使用這個框架了! 使用了一段時間後, 我發現它的確沒讓我失望, 很精簡很強大.
其實github上不止我推薦的這個框架, 還有其他競爭的JSON編輯器框架也同樣遵守json schema, 我選擇的這個雖然只有不到1k的star, 但它並不是私人項目, 而是有一個orgnization, 所以心理上感覺有保障(也許是矯情吧)
再增強 --- Promise化
JavaScript/typescript中一切都是promise, 即使完全同步的代碼都可以封裝成一個特殊的promise, 基於這一點, 可以將整個用戶操作封裝成一個promise:
首先將json-editor放在對話框中(主界面和對話框的生命週期形成一種棧結構);
對話框上至少2個按鈕,一個是'Cancel', 另一個是'OK'或者'Submit'
editor打開的那一刻promise誕生, editor輸入待編輯的JSON;
用戶點擊Cancel的時候對話框消失, promise被rejected然後銷燬;
用戶點擊OK, promise被resolved, 解析值爲editor的輸出json;
封裝完後json-editor就正式模塊化了, 但前提是editor必須是臨時生成的, 否則不需要模塊化成promise.
--- 玩 ---