使用decj简化Web前端开发（二） 声明式表单增强和页面初始化

引言

表单（Form）是Web应用中数据展现和收集常用的HTML元素。开发人员经常需要处理表单的数据填充、数据校验和格式化以及数据打包。另外，页面在加载完毕后往往需要执行一段初始化逻辑。本期将介绍decj对HTML表单的声明式增强和声明式页面/模块初始化这2个特性。

声明式表单功能增强

decj以声明式编程的方式对表单数据展现和收集功能进行增强。在数据展现方面，decj支持根据指定的数据自动将数据填充到表单中、对表单字段值进行自动格式化。在数据收集方面，decj支持对表单字段值进行自动校验、对表单数据自动打包提交。同时，decj支持对表单的Reset按钮的功能进行增强。

模块业务对象元数据

decj的表单增强功能依赖于模块的业务对象元数据。从MVC（Model-View-Control）设计模式的角度来看，表单本身属于View，其所展现和收集的数据属于Model。decj称呼每个Model的实例为一个业务对象（Business Object，简称BO）。一个页面中可以有多个表单，这些表单对应各自的业务对象。模块的业务对象元数据则用于描述一个模块所涉及的各个业务对象的信息，包括业务对象的名称、别名和类型。业务对象类型则描述了该类型的业务对象包含哪些字段以及每个字段的名称、别名、字段类型、数据校验规则以及格式化要求。

模块的业务对象元数据是一个普通Javascript对象，可以使用JSON进行声明。其格式化如下：

{"boMetaData":{
    "BO类型名称":{
      //字段声明
    }
  },
  "bo":{"BO名称":{"type":"BO类型名称","alias":"BO别名"}}
}

上述JSON对象中，属性“bo”的值声明了模块使用了哪些BO，并声明了各个BO的名称、别名以及BO类型名。BO的别名默认为BO名称本身，它对应于表单的name属性值。每个BO类型的声明包含了若干个字段声明。每个字段声明的格式如下：

"字段名称":{
  "stereoType": "字段类型名称",
  "alias":"字段别名",
  "typeParam":{},//声明字段类型参数
  "validation": {
    "数据校验规则": {}//声明数据校验规则
  }
}

字段声明描述了每个字段的类型名称（stereoType）、字段别名（alias）、字段类型参数（typeParam）及数据校验规则（validation）。其中字段别名默认为字段名本身，它对应表单控件的name属性值。

假设某IT社交网站要实现一个会员信息编辑的功能，会员信息包括会员的姓名、性别、技能专长领域等，如图1所示：

图1. 虚构的某IT社交网站的会员信息页面

本栏目更多精彩内容：http://www.bianceng.cn/webkf/tools/

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索数据
， 对象
， 表单
， 收集网页字段
， web表单
， 类型
， 别名
， 字段
， 表单页面
， 格式化字段数据
， 页面表单
， 字段别名
， 声明对象
表单字段
前端 简化信息录入、前端表单验证、前端自动生成form表单、前端表单验证插件、前端提交表单，以便于您获取更多的相关知识。