ncform：一種令人愉悅的表單開發方式，僅需配置即可生成表單 UI 及其互動行為

JavaScript · 發表 2019-03-27 09:09:13

摘要： ncform English Version ncform，一種令人愉悅的表單開發方式，僅需配置即可生成表單UI及其互動行為。自帶豐富的標準組件和校驗規則，開箱即用。具備強大的控制元件互動和擴充套件能力，做你所想。如果你猶豫不決...

ncform

English Version

ncform，一種令人愉悅的表單開發方式，僅需配置即可生成表單UI及其互動行為。

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

具備強大的 控制元件互動 和 擴充套件能力 ，做你所想。

如果你猶豫不決，你可以閱讀這篇文章：如何選型

Playground

在 Playground 體驗一下ncform的魅力，可加深你對ncform的瞭解

Playground 展示了ncform大部分的使用場景例子（I believe the example is the best document），建議先仔細瀏覽下，例子中的配置實際開發中一般都可以直接使用滴

Quick Start

In node.js

1.install

npm i @ncform/ncform @ncform/ncform-common --save
npm i @ncform/ncform-theme-elementui element-ui axios --save

2.import

import Vue from 'vue';
import vueNcform from '@ncform/ncform';

import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ncformStdComps from '@ncform/ncform-theme-elementui';
import axios from 'axios';

Vue.use(Element);
Vue.use(vueNcform, { extComponents: ncformStdComps });
window.$http = Vue.prototype.$http = axios;

3.usage

# demo.vue

<template>
<div>
<ncform :form-schema="formSchema" form-name="your-form-name" v-model="formSchema.value" @submit="submit()"></ncform>
<el-button @click="submit()">Submit</el-button>
</div>
</template>
<script>
export default {
data () {
return {
formSchema: {
type: 'object',
properties: {
name: {
type: 'string'
}
}
}
}
},
methods: {
submit () {
this.$ncformValidate('your-form-name').then(data => {
if (data.result) {
console.log(this.$data.formSchema.value)
// do what you like to do
}
})
}
}
}
</script>

可參考 ncform-demo 專案

In browser

<html>

<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
</head>

<body>
<div id="demo">
<ncform :form-schema="formSchema" form-name="your-form-name" v-model="formSchema.value" @submit="submit()"></ncform>
<el-button @click="submit()">Submit</el-button>
</div>

<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript" src="https://unpkg.com/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@ncform/ncform/dist/vueNcform.min.js"></script>

<script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/@ncform/ncform-theme-elementui/dist/ncformStdComps.min.js"></script>

<script type="text/javascript">
Vue.use(vueNcform, { extComponents: ncformStdComps });

// Bootstrap the app
new Vue({
el: '#demo',
data: {
formSchema: {
type: 'object',
properties: {
name: {
type: 'string'
}
}
}
},
methods: {
submit() {
this.$ncformValidate('your-form-name').then(data => {
if (data.result) {
// do what you like to do
}
});
}
}
});
</script>
</body>

</html>

特性

配置生成：一個JSON資料結構完整描述一個表單的UI及其互動行為，表單的開發工作就完成了
靈活互動：通過強大的 dx表示式 ，表單控制元件可靈活與其它表單控制元件進行互動
標準組件：ncform定義了一套標準的表單元件配置規範，未經擴充套件即可滿足你90%以上的表單開發需求
校驗豐富：自帶常用的十幾種驗證規則，滿足你90%以上的表單驗證需求
擴充套件友好：表單的元件和校驗規則都可靈活擴充套件，並且提供了工具簡化擴充套件工作

文件

解決痛點

後臺管理系統中絕大部分的功能不是查詢列表，就是錄入表單。

表單的開發是一種無趣的，無營養的，高消耗的重複體力活，費時費力。

表單控制元件間的互動功能，表單項的校驗規則，都極容易產生“八哥”。

SO，為了提高表單開發效率，減少失誤，提高表單規範和健壯性，最重要，提高開發人員的開發幸福感，專案因此而生

重複造輪子？

圈子裡比較有名的類似方案（參考專案列舉的幾個），存在以下一個或多個的問題：

基本完全按照json-schema來設計，而僅用json-schmea來描述一個表單並不合適
對於表單項之間的關聯互動，複雜的驗證邏輯，沒有很好的解決方案
無法僅提供一份配置就完成所有表單的UI及互動行為（意義在於配置可儲存）
預設提供的基礎元件不夠豐富，難以覆蓋實際開發中常用的表單元件
很久沒維護，程式碼編寫風格過於久遠，難於擴充套件
元件擴充套件問題：當前主流的元件實現方案是Vue和React，沒有友好的方案，需要使用者自行擴充套件支援

為了解決以上問題，走上了造輪子之路。。。

為什麼不用標準的json-schema？

因為json-schema是面向資料(data)而非表單(ui)，對於宣告一個表單不太友好。

對於一個表單，關心的是有哪些表單項，表單項長啥樣，校驗規則怎樣，這些都跟欄位相關，在一處管理最直觀

來個簡單的對比：

json-schema例子：

ncform例子：

json-schema對於驗證規則，宣告在各個地方，不好管理。而ncform都集中在rules。這種設計也便於後面開發表單製作IDE

dx表示式：

通過 dx 表示式，你可以通過 {{$root.xxx}} 取得指定欄位的值，然後用原生的JS書寫你的任意邏輯表示式

指定物件中的屬性值，例子：

disabled: 'dx: {{$root.person.age}} < 18'

指定陣列中的某一項的值，例子：

disabled: 'dx: {{$root.persons[0].age}} < 18'

指定陣列中同一項的屬性，例子：

disabled: 'dx: {{$root.persons[i].age}} < 18'
disabled: 'dx: {{$root.persons[i + 1].age}} < 18'

訪問全域性配置中的常量資料，例子:

disabled: 'dx: {{$root.person.age}} === {{$const.max}}'

// 全域性配置如下：
globalConfig: {
constants: { max: 18 }
}

設計思想

ncform = ncform容器 + ncform主題標準組件

一個系統專案，一般都會使用一種UI庫（如vue）及其之上的UI實現方案（如elementui）為了與之和平共處，ncform的標準組件可採用與之一致的UI實現方案

ncform Vue版預設提供了elementui主題的標準組件【點選檢視】

如果你是iview的粉絲，通過遵循ncform標準組件的規範開發iview主題的標準組件即可

思想：把各種主題的標準組件“丟進”ncform容器，就是一個可配的表單開發利器

Schema Generator

通過 Schema Generator ，可以加速你寫form schema的速度

參考專案

作者

肖瑋（Daniel.xiao），ncform的設計者和主要實現者
羅振考（Kyle.lo），ncform表單校驗部分的實現者和標準組件的主力開發者