讓前端小姐姐愉快地開發表單

前端小姐姐：「新業務功能又有大量的表單要開發了，有沒讓我又高效又愉快地完成這個任務的方案呢？」

哦，我想一想，配置開發理念，應該比較適合，且社區也有好些這種理念的開源項目

前端小姐姐：「什麼叫配置開發理念呢？」

就是隻須要簡單地定義一份JSON配置數據來開發表單

前端小姐姐：「太棒了，我去search下先哈」

過了一會~~

前端小姐姐：「是真有很多，但我選哪一個好呢？」

恩，那咱們就來聊聊配置理念表單開發的選型吧

---

1. 幫助文檔

這是必不可少的啦，沒有文檔，誰敢用呢

2. 直觀特性展現

我可不想一開始就要花大量時間去讀冷冰冰的文字，而後還要發揮本身的想像力

最好有超直觀超形象超方便的方式展現大部分甚至所有的特性，多是這樣的：

3. 開箱即用

最好官方自帶一整套經常使用的表單控件和校驗規則，知足大部分常見場景，就不用去自行擴展太多了

好比如下的組件就常常用到了：

好比如下的校驗規則就常常用到了：

4. 擴展能力

官方就是提供再多的組件和校驗規則，也是沒法知足全部的業務場景的，因此必須 友好（簡單方便） 支持開發者自定義本身的表單組件和校驗規則

5. 支持複雜數據結構

一個表單數據結構，除了簡單的只有一級屬性的對象類型外（如 {name: 'daniel', age: 18}），實際不少場景多是這樣的：

{
  "name": {
    "firstName": "daniel",
    "lastname": "xiao"
  }
}

多是這樣的：

{
  "name": "daniel",
  "hobbies": [
    {
      "id": 1,
      "name": "Coding"
    },
    {
      "id": 2,
      "name": "Singing"
    }
  ]
}

一句話總結就是：支持數組類型，對象嵌套對象，對象嵌套數組，數組的項是普通類型 或 對象類型 或 數組類型

6. 表單控件間交互

我想說，一個表單，不是把表單控件按位置靜靜放在那就好了，控件之間並不獨立，控件之間是有交互的

這裏列舉下具備表明性的一些場景：

• 「贊成才能繼續」 類型

• 「城市選擇器」 類型

• 「大於18歲必填」 類型

• 「日期比較」 類型

• 「全名自動填寫」 類型

感受已經挺多了，就不一一列舉了。

因此，前端小姐姐，若是候選開源項目可以知足以上所提的條件，那就能夠用了

前端小姐姐：「哦，那你有推薦嗎？」

固然。。。

---

哈哈，接下來就是廣告時間了，若是各位看官們以爲以上的選型條件合情合理，那 ncform 就是一個不錯的選擇了

ncform，一種使人愉悅的表單開發方式，僅需配置便可生成表單UI及其交互行爲。

自帶豐富的 標準組件 和 校驗規則，開箱即用。

具有強大的 控件交互 和 擴展能力，作你所想。

訪問官方Github瞭解更多唄：https://github.com/ncform/ncform

---

tags: vue, form, json-schema, generator