简洁易用的表单数据设置和收集管理组件
这篇文章要分享的是我在做表单界面开发的一部分经验，关于表单数据设置和收集这一块的。整体而言，这篇文章总结的东西有以下的特点：
1）api简单，使用起来很容易；
2）简化了表单新增和编辑，可以让新增和编辑使用同一个表单页面；
3）基本上与UI分离，所以很容易应用到各类项目的开发当中。
涉及到的组件不止一个，而且将来还会扩充，这些组件都是根据以前的工作经验开发出来的，没有很高级的东西，每个组件的代码都很少，所以即使文中有介绍不到的地方，你也能通过阅读代码来详细了解。不过我想大部分人应该没有见过这样的使用方式（除了我毕业的时候进的那家公司的同事），我上家公司的朋友刚开始看到我用这种写法的时候都不太理解，但是大家最后都接受并认可了这种用法，因为在开发的时候效率确实还挺高的，这也是我写这篇文章分享出来的目的。
本文相关的代码我都放在github上面去了，原来我都直接上传在博客园，后来发现有的时候要改点东西每次都得重新上传，挺不方便的，还是直接git简单点，另外git还可以通过gh-pages分支来显示静态内容，正好可以用来查看demo。
代码地址：
https://github.com/liuyunzhuge/blog/tree/master/form
demo地址：
http://liuyunzhuge.github.io/blog/form/dist/html/demo1.html?mode=1
http://liuyunzhuge.github.io/blog/form/dist/html/demo1.html?mode=2
关于demo的简单说明：
这两个地址分别用来模拟了一个表单页面的新增和编辑时的场景，我用mode这个url参数来区分当前这个页面是新增还是编辑的状态，mode=1表示新增，mode=2表示编辑。在这个页面里面一共有9个表单元素：
id: 用的是text[type=”hidden”]
name: 用的是text[type=”text”]
birthday: 用的是text[type=”text”]，但是带日期下拉选择的功能
hobby: 是checkbox
gender: 是radio
work：是单选的select
industry：是多选的select
desc：是textarea
detailDesc: 也是textarea，只不过是用富文本编辑器呈现的。
这9个元素涵盖了常见了的表单元素类型，即使将来要增加其它的类型，也逃脱不了使用基本的表单元素来存取值，比如你可能见过的带下拉框或者输入提示的文本框，从本质上来说，在我们获取该字段元素的时候，只会从文本框获取值，而跟下拉框或者输入提示的框没有关系，下拉框仅仅起一个辅助录入的作用，跟我们表单数据收集没有关系，demo中生日这个表单元素就是一个很好的说明，它虽然用到了日期选择的插件，但是即使没有这个插件，也不会影响到文本框值的存取。我把这个说明出来其实是想表达，在表单数据收集或设置的时候，应该考虑一下分离的思想，只有这样写出来的组件才能够不受项目的影响。关于这部分的思想，我推荐一篇更好的文章，感兴趣的可以深入阅读：
demo相关的html文件是src/html/demo1.html，js文件是src/js/app/demo1.js。整个项目用了seajs做模块化，用了gulp来做简单构建，还用到以前的几篇博客总结的一些东西：
1）详解Javascript的继承实现：提供一个class.js，用来定义javascript的类和构建类的继承关系；
2）jquery技巧之让任何组件都支持类似DOM的事件管理：提供一个eventBase.js，用来给任意组件实例提供类似DOM的事件管理功能。
在src/js/app/demo1.js中你可以看到，demo这个表单，在点击保存，收集数据的时候是多么的简单：
demo如果想在本地运行起来的话，可以参考github上readme.md提供的说明。下面开始详细介绍这整套组件的内容。
1. 前言
在传统的表单界面开发中，我们可能会碰到以下这些问题：
1）表单新增跟表单编辑到底是一个页面还是两个页面？
如果用两个页面，开发的时候好像很方便，但是将来维护的时候会很麻烦，因为会存在大量的重复代码。所以我个人更倾向于用一个页面，但是用一个页面的话，在设置表单元素的初始值时会加不少重复的逻辑判断，因为大部分表单元素在新增的时候初始值都是空的，而在编辑的时候可能都是有值的，而我们的表单元素只有一个value属性，如果我们是通过jsp或php等模板来个表单元素赋值，这个处理起来也会很繁琐；
2）checkbox radio以及设置了multiple属性的select元素在设置value的时候也很繁琐，因为它们都不是直接通过value属性来确定初始化值的，而是通过checked或selected属性来判断的，所以在设置初始值的时候需要判断每一个checkbox radio或select的option元素的value值与要设定的初始值是否相等才能给它添加checked或selected属性；
3）select元素的下拉内容有可能不是已知的，需要另外请求再渲染出来，这个时候如果每次都单独为这种需求的select下ajax逻辑显得太低效了
4）在收集表单数据并提交到后台的时候，现有的DOM方式在获取的时候不是很方便，虽然jquery简化了这部分的处理，但是它没有约定，会将所有的表单数据都收集起来，有时候这里面会有一些不必要的数据，如果能够提前约定好要收集的表单元素，就可以避免收集不必要的数据；
5）浏览器标准事件中给所有的表单元素都提供了change事件，但是这个事件有时候还不够方便，要是能把这个事件拆分成一对事件，比如beforeChange跟afterChange，就能适应更复杂的需求场景。从名字大概能猜到这两个事件的作用和触发的时机，这两个事件我没法说它的具体作用到底比单个的change事件强多少，但是从我以前做ERP管理软件的经验来说，beforeChange能够起到很多控制作用，afterChange也能够代替原来的change事件；
6）每个表单元素都有些相似的属性或者相似的行为，如果我们把这些相似的东西都抽象出来，每个表单元素的使用将会变得非常简单，而且将来要扩充像下拉输入这类的表单元素也都会很容易。
为了解决这些问题我的思路是：
1）将页面分为3种模式，新增，编辑，查看模式，分别用url参数mode=1,mode=2,mode=3来区分，新增模式表示当前页面正在录入新的数据，是还没在数据库保存过的；编辑模式表示当前页面正在编辑已经在数据库中存在的数据；查看模式表示当前页面正在查看从数据库中查询出的数据，但是只能看不能改。也许有人会说查看模式没有什么用处，但是在ERP管理系统数据的修改控制是很重要的，所以曾经公司的开发平台里面用了这三种模式来控制页面的状态。不过这个做法有一定的风险，就是知晓这个原理的人，可能通过修改url后面的参数来看到不用的页面状态，比如他只有权限能看到mode=3的页面，但是只要将地址里的mode=3改成mode=2再回车，就能进入编辑的页面状态，所以在一些关键的逻辑的处理中，必须用数据的业务状态来做判断，而不能使用mode，mode仅仅能做到在UI层面的控制；
2）用defaultValue这个option来指定表单元素在新增时候的初始值，用value属性来表示表单元素在编辑或查看模式时的初始值，这样在jsp或者php模板里面，我们只要把初始值写在不同的位置即可，当前端根据mode初始化完组件之后就会显示正确的初始值，而defaultValue这个option我们可以通过data-default-value直接写在表单元素的html上，value属性本身就是表单元素的标准属性，所以可以直接写，如： 
3）我把表单元素的相似的属性跟行为统一封装到了formFieldBase这个组件里面，其它各个表单元素只要继承它即可。
下面先来看看formFieldBase.js的内容，它是最基础最重要的一个组件。
2. formFieldBase.js
代码如下：
define(function (require, exports, module) { var $ = require('jquery'), EventBase = require('mod/eventBase'), Class = require('mod/class'); var DEFAULTS = { name: '',//字段名称 type: '',//字段类型：text checkbox radio date number select ueditor等 value: '',//在mode为2,3时显示的值 defaultValue: '',//在mode为1时显示的值 mode: 1,//可选值有1,2,3，分别代表字段属于新增，编辑和查看模式 onBeforeChange: $.noop,//在字段相关表单元素的value的值发生改变前触发，这个回调可以对字段的值做一些校验 onAfterChange: $.noop,//在字段相关表单元素的value的值发生改变后触发 onInit: $.noop//在字段初始化完毕之后调用 }; function parseValue(value) { //特殊情况处理：当initValue是一个函数或者对象时 typeof(value) == 'function' && (value = value()); typeof(value) == 'object' && (value = JSON.stringify(value)); return $.trim(value); } var FormFieldBase = Class({ instanceMembers: { init: function (element, options) { var $element = this.$element = $(element); //通过this.base调用父类EventBase的init方法 this.base($element); var opts = this.options = this.getOptions(options), that = this; //获取field的name //name有三种来源：opts.name,data-name属性以及name属性 this.name = opts.name || $element.attr('name'); //获取field的mode值：1,2,3分别代表新增，编辑和查看模式 this.mode = ~~opts.mode; //获取field的初始值 this.initValue = (function () { var initValue; if (that.mode === 1) { //新增模式时使用defaultValue作为初始值 initValue = opts.defaultValue; } else { //非新增模式时一般情况下用value作为初始值 //如果value值为空，判断字段对应的元素有没有val的jquery方法 //有的话通过该方法再获取一次值 initValue = $.trim(opts.value) == '' ? (('val' in $element) && $element.val()) : opts.value; } return parseValue(initValue); })(); //获取field的类型 this.type = opts.type; delete opts.value; delete opts.defaultValue; delete opts.mode; delete opts.name; delete opts.type; //注册两个基本事件的监听 if (typeof(opts.onAfterChange) === 'function') { this.on('afterChange', $.proxy(opts.onAfterChange, this)); } if (typeof(opts.onBeforeChange) === 'function') { this.on('beforeChange', $.proxy(opts.onBeforeChange, this)); } if (typeof(opts.onInit) === 'function') { this.on('formFieldInit', $.proxy(opts.onInit, this)); this.on('formFieldInit', $.proxy(function(){ if(this.mode === 3) { this.disable(); } }, this)); } $element.data('formField', this); }, getOptions: function (options) { var defaults = this.getDefaults(), _opts = $.extend({}, defaults, this.$element.data() || {}, options), opts = {}; //保证返回的对象内容项始终与当前类定义的DEFAULTS的内容项保持一致 for (var i in defaults) { if (Object.prototype.hasOwnProperty.call(defaults, i)) { opts[i] = _opts[i]; } } return opts; }, getDefaults: function () { return DEFAULTS; }, triggerInit: function () { this.trigger('formFieldInit'); }, destroy: function () { this.base(); this.$element.data('formField', null); this.options = undefined; this.$element = undefined; this.name = undefined; this.initValue = undefined; this.mode = undefined; this.type = undefined; }, setValue: function (value, trigger) { value = $.trim(parseValue(value)); //如果跟原来的值相同则不处理 if (value === $.trim(this.getValue())) return; //将input的值设置成value this.setFieldValue(value); this._setValue(value, trigger); }, //子类实现这个 _setValue: $.noop, setFieldValue: $.noop, getValue: $.noop, enable: $.noop, disable: $.noop, reset: $.noop }, extend: EventBase, staticMembers: { DEFAULTS: DEFAULTS } }); return FormFieldBase; });
formFieldBase，为所有的表单元素组件定义了以下基本的option：
其中：
name：用来唯一标识一个表单元素，不能重复。如果某个需求中，某个字段需要可能用到多个表单元素，可以在name属性上添加一些索引前缀或后缀来处理。它除了可以在组件初始化的时候通过options传递给组件的构造函数，还可以直接在组件相关的元素上通过name属性或者data-name来属性来设置。
type：用来指定这个组件的类型，它是自定义的，跟input元素上的type完全没有关系。每一个继承formFieldBase的组件都有一个type。它要么是options来传递，要么就是通过data-type来传递，目前已开发的组件有formFieldCheckbox，formFieldDate，formFieldRadio，formFieldText，formFieldSelect，formFieldUeditor，对应的type值是：text,checkbox,radio,select,date跟ueditor。
value：编辑或查看模式时的初始值。
defaultValue: 新增模式时的初始值。
onBeforeChange: 它是beforeChange事件的回调，在值发生改变前触发，在该事件中，如果通过e.preventDefault()阻止了默认行为，表单元素的值将会被重置为上一次修改的后的值，并且不会再触发后面的afterChange事件。
onAfterChange: 它是afterChange事件的回调，在值发生改变后触发。
onInit：它formFieldInit事件的回调，这个事件表示组件何时初始化完毕。触发的时机由具体实现的子类来决定，formFieldBase提供了triggerInit()方法，子类可通过调用这个方法来触发formFieldInit，之所以这么做，是因为各个表单元素触发这个事件的时机是不定的，所以不能在formFieldBase里面来做触发，formFieldBase仅仅提供统一的事件注册，通常在子类的init方法的最后被触发，但也可能不是，比如formFieldSelect组件里面，你就可以看到不一样的触发逻辑。
每个表单元素的初始值都是根据mode来判断获取的，在mode为1的时候只会通过defaultValue这个option来获取初始值，在mode=2的时候，还会通过jquery的val方法来进一步获取值。初始值的设置通过调用reset方法即可，调用时机由各个子类的去决定，一般都是在子类的init方法里面。
通过formFieldBase为所有的表单元素提供了一下api方法：
1) setValue(value, trigger)
用来给表单元素设置值，第二个参数可选，默认调用这个方法的时候都会触发表单元素的change事件，不然beforeChange跟afterChange都无法正确管理。只有当第二个参数为false的时候，才不会触发change事件。formFieldBase提供了_setValue方法，子类不需要覆盖setValue方法，只要覆盖_setValue方法即可。这么做的原因是setValue方法里面有一些公共的逻辑，可以抽象到formFieldBase里面去。这样当调用子类的setValue方法时将会调用父类的setValue方法，最后通过_setValue这个方法来实现不同的子类的逻辑。
2）getValue()
获取表单元素的值。
3）enable()
启用
4）disable()
禁用
5）reset()
重置为初始值，不会触发change，beforeChange以及afterChange事件。
希望前面这些内容能够让你把formFieldBase这个组件的一些我自己的想法看的明白，如果有不明白的可以直接私信跟我交流。下面基于这个formFieldBase，来看下各个不同的表单元素组件是如何实现的。
3. formFieldText.js
代码如下：
define(function (require, exports, module) { var $ = require('jquery'), FormCtrlBase = require('mod/formFieldBase'), Class = require('mod/class'); var DEFAULTS = $.extend({}, FormCtrlBase.DEFAULTS); var FormFieldText = Class({ instanceMembers: { init: function (element, options) { //通过this.base调用父类FormCtrlBase的init方法 this.base(element, options); //设置初始值 this.reset(); var that = this, $element = this.$element; //监听input元素的change事件，并最终通过beforeChange和afterChange来管理 $element.on('change', function (e) { var val = that.getValue(), event; if(val === that.lastValue) return; that.trigger((event = $.Event('beforeChange')), val); //判断beforeChange事件有没有被阻止默认行为 //如果有则把input的值还原成最后一次修改的值 if (event.isDefaultPrevented()) { that.setFieldValue(that.lastValue); $element.focus().select(); return; } //记录最新的input的值 that.lastValue = val; that.trigger('afterChange', val); }); this.triggerInit(); }, getDefaults: function () { return DEFAULTS; }, _setValue: function (value, trigger) { //只要trigger不等于false，调用setValue的时候都要触发change事件 trigger !== false && this.$element.trigger('change'); }, setFieldValue: function (value) { var $element = this.$element, elementDom = this.$element[0]; if (elementDom.tagName.toUpperCase() === 'TEXTAREA') { var v = ' ' + value; elementDom.value = v; elementDom.value = v.substring(1); } else { $element.val(value); } }, getValue: function () { return this.$element.val(); }, disable: function () { this.$element.addClass('disabled').prop('readonly', true); }, enable: function () { this.$element.removeClass('disabled').prop('readonly', false); }, reset: function () { this.setFieldValue(this.initValue); this.lastValue = this.initValue; } }, extend: FormCtrlBase, staticMembers: { DEFAULTS: DEFAULTS } }); return FormFieldText; });
这个组件是最简单的一个，所以就不过多介绍代码，简单说下它的用法。非checkbox和radio的input元素以及textarea元素都能使用它：
<input class="form-control form-field" name="id" data-type="text" data-default-value="" value="1" type="hidden" placeholder=""> <input class="form-control form-field" name="name" data-type="text" data-default-value="" value="felix" type="text" placeholder=""> <textarea class="form-control form-field" name="desc" data-type="text" data-default-value="" rows="3" placeholder="">felix</textarea>
如果是直接通过formFieldText构造函数可以这么用：
new FormFieldText('#name',{ onInit: function(){ console.log(this.getValue()); }, onBeforeChange: function(e, val){ if(val == 'xx') { e.preventDefault(); } } });
(这个例子只是为了说明FormFieldText这个组件的用法，没有任何需求背景)。
4. formFieldCheckbox.js
代码说明：
define(function (require, exports, module) { var $ = require('jquery'), FormCtrlBase = require('mod/formFieldBase'), Class = require('mod/class'); var DEFAULTS = $.extend({ //defaultValue 以及value使用checkbox的值 useInputValue: { forDefaultValue: false, forValue: false } }, FormCtrlBase.DEFAULTS), INPUT_SELECTOR = 'input[type=checkbox]'; var FormFieldCheckbox = Class({ instanceMembers: { init: function (element, options) { //通过this.base调用父类FormCtrlBase的init方法 this.base(element, options); var that = this, $element = this.$element; //获取所有的input元素 var $inputs = this.$inputs = $element.find(INPUT_SELECTOR); //设置它们的name属性，以便能够呈现复选的效果 $inputs.prop('name', this.name); var opts = this.options; if((this.mode == 1 && opts.useInputValue.forDefaultValue) || opts.useInputValue.forValue) { this.initValue = this.getValue(); } //设置初始值 this.reset(); //监听input元素的change事件，并最终通过$element的beforeChange和afterChange来管理 $element.on('change', INPUT_SELECTOR, function (e) { var val = that.getValue(), event; if (val === that.lastValue) return; that.trigger((event = $.Event('beforeChange')), val); //判断beforeChange事件有没有被阻止默认行为 //如果有则把input的值还原成最后一次修改的值 if (event.isDefaultPrevented()) { that.setFieldValue(that.lastValue); return; } //记录最新的input的值 that.lastValue = val; that.trigger('afterChange', val); }); this.triggerInit(); }, getDefaults: function () { return DEFAULTS; }, _setValue: function (value, trigger) { //只要trigger不等于false，调用setValue的时候都要触发change事件 trigger !== false && this.$inputs.eq(0).trigger('change'); }, setFieldValue: function (value) { this.$inputs.val(value.split(',')); }, getValue: function () { var val = []; this.$inputs.filter(':checked').each(function () { val.push(this.value); }); return val.join(','); }, disable: function () { this.$element.addClass('disabled'); this.$inputs.prop('disabled', true); }, enable: function () { this.$element.removeClass('disabled'); this.$inputs.prop('disabled', false); }, reset: function () { this.setFieldValue(this.initValue); this.lastValue = this.initValue; } }, extend: FormCtrlBase, staticMembers: { DEFAULTS: DEFAULTS } }); return FormFieldCheckbox; });
代码也很简单，不过有以下几点值得说明：
1）getValue时如果有多个checkbox被选中，那么最后会把多个值以英文逗号分隔的方式返回
2）setValue的时候如果一次性设置多个checkbox被选中，得传入一个英文逗号分隔的字符串的值
3）为了避免去设定各个checkbox的checked属性，这个组件并不是针对单个的checkbox元素来使用的，而是把这些checkbox的某个公共的父元素作为这个组件的关键元素，所以这个组件在使用的时候，要用data-name,data-value来指定元素的名称和编辑时的初始值。
举例如下：
<div class="col-xs-5 checkbox checkbox-md form-field" data-name="hobby" data-type="checkbox" data-default-value="" data-value="电影,音乐"> <label> <input type="checkbox" value="电影"> <i class="fa checked"></i> 电影 </label> <label> <input type="checkbox" value="音乐"> <i class="fa checked"></i> 音乐 </label> <label> <input type="checkbox" value="游戏"> <i class="fa checked"></i> 游戏 </label> </div>
注意以上代码中的div，它才是真正使用formFieldCheckbox的element。还需要说明的是，尽管这个div元素上还有一些特殊的css，如checkbox，checkbox-md，这些仅仅是UI相关的，跟js逻辑没有关系。
初始化的方式是：
new FormFieldCheckbox('#hobby',{ onInit: function(){ console.log(this.getValue()); }, onBeforeChange: function(e, val){ if(val == 'xx') { e.preventDefault(); } } });
5. formFieldRadio.js
仅展示代码，要说明的东西跟formFieldCheckbox区别很小：
define(function (require, exports, module) { var $ = require('jquery'), FormCtrlBase = require('mod/formFieldBase'), Class = require('mod/class'); var DEFAULTS = $.extend({}, FormCtrlBase.DEFAULTS), INPUT_SELECTOR = 'input[type=radio]'; var FormFieldRadio = Class({ instanceMembers: { init: function (element, options) { //通过this.base调用父类FormCtrlBase的init方法 this.base(element, options); var that = this, $element = this.$element; //获取所有的input元素 var $inputs = this.$inputs = $element.find(INPUT_SELECTOR); //设置它们的name属性，以便能够呈现复选的效果 $inputs.prop('name', this.name); //设置初始值 this.reset(); //监听input元素的change事件，并最终通过$element的beforeChange和afterChange来管理 $element.on('change', INPUT_SELECTOR, function (e) { var val = that.getValue(), event; if(val === that.lastValue) return; that.trigger((event = $.Event('beforeChange')), val); //判断beforeChange事件有没有被阻止默认行为 //如果有则把input的值还原成最后一次修改的值 if (event.isDefaultPrevented()) { that.setFieldValue(that.lastValue); return; } //记录最新的input的值 that.lastValue = val; that.trigger('afterChange', val); }); this.triggerInit(); }, getDefaults: function () { return DEFAULTS; }, _setValue: function (value, trigger) { //只要trigger不等于false，调用setValue的时候都要触发change事件 trigger !== false && this.$inputs.eq(0).trigger('change'); }, setFieldValue: function (value) { if (value !== '') { this.$inputs.filter('[value="' + value + '"]').prop('checked', true); } else { this.$inputs.filter(':checked').each(function () { this.checked = false; }); } }, getValue: function () { return this.$inputs.filter(':checked').val(); }, disable: function () { this.$element.addClass('disabled'); this.$inputs.prop('disabled', true); }, enable: function () { this.$element.removeClass('disabled'); this.$inputs.prop('disabled', false); }, reset: function () { this.setFieldValue(this.initValue); this.lastValue = this.initValue; } }, extend: FormCtrlBase, staticMembers: { DEFAULTS: DEFAULTS } }); return FormFieldRadio; });
7. formFieldSelect.js
代码如下：
define(function (require, exports, module) { var $ = require('jquery'), FormCtrlBase = require('mod/formFieldBase'), Class = require('mod/class'), Ajax = require('mod/ajax'); var DEFAULTS = $.extend({}, FormCtrlBase.DEFAULTS, { url: '', textField: 'text', valueField: 'value', autoAddEmptyOption: true, emptyOptionText: ' ', parseAjax: function (res) { if (res.code == 1) { return res.data || []; } else { return []; } } }); var FormFieldSelect = Class({ instanceMembers: { init: function (element, options) { //通过this.base调用父类FormCtrlBase的init方法 this.base(element, options); var opts = this.options, _ajax; if (!opts.url) { //设置初始值 this.reset(); } else { _ajax = Ajax.get(opts.url); } var that = this, $element = this.$element; //监听input元素的change事件，并最终通过beforeChange和afterChange来管理 $element.on('change', function (e) { var val = that.getValue(), event; if (val === that.lastValue) return; that.trigger((event = $.Event('beforeChange')), val); //判断beforeChange事件有没有被阻止默认行为 //如果有则把input的值还原成最后一次修改的值 if (event.isDefaultPrevented()) { that.setFieldValue(that.lastValue); $element.focus(); return; } //记录最新的input的值 that.lastValue = val; that.trigger('afterChange', val); }); if (!_ajax) { this.triggerInit(); } else { _ajax.done(function (res) { var data = opts.parseAjax(res); that.render(data); that.reset(); that.triggerInit(); }) } }, getDefaults: function () { return DEFAULTS; }, _setValue: function (value, trigger) { //只要trigger不等于false，调用setValue的时候都要触发change事件 trigger !== false && this.$element.trigger('change'); }, render: function (data, clear) { if (Object.prototype.toString.call(data) != '[object Array]') { data = []; } var opts = this.options, textField = opts.textField, valueField = opts.valueField, l = data.length, $element = this.$element; if(clear === true){ $element.html(''); this.lastValue = ''; } if (opts.autoAddEmptyOption) { var o = {}; o[textField] = opts.emptyOptionText; o[valueField] = ''; //other fileds ? l = data.unshift(o); } var html = []; for (var i = 0; i < l; i++) { html.push(['<option value="', data[i][valueField], '">', data[i][textField], '</option>'].join('')); } l && $element.append(html.join('')); }, setFieldValue: function (value) { this.$element.val(value.split(',')); }, getValue: function () { var value = this.$element.val(); if (Object.prototype.toString.call(value) === '[object Array]') { return value.join(','); } return value === null ? '' : value; }, disable: function () { this.$element.addClass('disabled').prop('disabled', true); }, enable: function () { this.$element.removeClass('disabled').prop('disabled', false); }, reset: function () { this.setFieldValue(this.initValue); this.lastValue = this.initValue; } }, extend: FormCtrlBase, staticMembers: { DEFAULTS: DEFAULTS } }); return FormFieldSelect; });
这个组件功能相对多一点，它还提供了几个额外的option:
url: 默认是空的，如果有值的话，将在初始化的时候通过该值发起ajax请求加载下拉的数据。
textField: 只有在url不为空的情况下才会用到，表示ajax返回的数据中哪个字段是用来显示<option>的文本的。
valueField: 只有在url不为空的情况下才会用到，表示ajax返回的数据中哪个字段是用来显示<option>的value的。
autoAddEmptyOption: 只有在url不为空的情况下才会用到，表示是否自动添加一个空的option。
emptyOptionText: 只有在url不为空的情况下才会用到，表示空option的文本。
parseAjax: 回调，只有在url不为空的情况下才会用到，用来解析ajax返回的数据，需要返回一个数组，存放需要渲染成下拉内容的数据。
还需要说明的是：
1）getValue的时候，如果有多个选中的option，它们的值将以英文逗号分隔的形式返回；
2）setValue的时候，如果要一次性设置多个option的选中状态，得以英文逗号分隔的字符串传值；
3）它还提供了一个render(data, clear)，接收2个参数，第二个参数可选，可以用一份新的数据来替换下拉框的内容，第二个参数如果为true，则会把之前的下拉内容清空。
实际用法：
<select class="form-control form-field" name="work" data-type="select" data-default-value="" data-value="UI设计"> <option value="">请选择职业</option> <option value="前端开发">前端开发</option> <option value="UI设计">UI设计</option> <option value="JAVA后端">JAVA后端</option> </select>
构造函数的使用方式与前面的相同，所以不再详细介绍了。
8. formFieldDate.js
代码如下：
define(function (require, exports, module) { var $ = require('jquery'), FormCtrlBase = require('mod/formFieldBase'), hasOwn = Object.prototype.hasOwnProperty, Class = require('mod/class'); //引入picker组件 require('mod/datepicker'); var DEFAULTS = $.extend({}, FormCtrlBase.DEFAULTS), DATEPICKER_DEFAULTS = $.extend($.fn.datepicker.defaults, { autoclose: true, language: 'zh-CN', format: 'yyyy-mm-dd', todayHighlight: true }); function getPickerOptions(options) { var opts = {}; for (var i in DATEPICKER_DEFAULTS) { if (hasOwn.call(DATEPICKER_DEFAULTS, i) && (i in options)) { opts[i] = options[i]; } } return opts; } var FormFieldDate = Class({ instanceMembers: { init: function (element, options) { //通过this.base调用父类FormCtrlBase的init方法 this.base(element, options); //设置初始值 this.reset(); //pickerOptions是datepick组件需要的 this.pickerOptions = getPickerOptions(this.options); var that = this, $element = this.$element; //监听input元素的change事件，并最终通过beforeChange和afterChange来管理 $element.on('change', function (e) { var val = that.getValue(), event; if(val === that.lastValue) return; that.trigger((event = $.Event('beforeChange')), val); //判断beforeChange事件有没有被阻止默认行为 //如果有则把input的值还原成最后一次修改的值 if (event.isDefaultPrevented()) { that.setFieldValue(that.lastValue); return; } //记录最新的input的值 that.lastValue = val; that.trigger('afterChange', val); }); //初始化datepicker组件 $element.datepicker(this.pickerOptions); this.triggerInit(); }, getDefaults: function () { return DEFAULTS; }, _setValue: function (value, trigger) { //只要trigger不等于false，调用setValue的时候都要触发change事件 trigger !== false && this.$element.trigger('change'); }, setFieldValue: function (value) { this.$element.val(value).datepicker('update').blur(); }, getValue: function () { return this.$element.val(); }, disable: function () { //datapicker组件没有disable的方法 //所以禁用和启用只能通过destroy后重新初始化来实现 this.$element.addClass('disabled').prop('readonly', true).datepicker('destroy'); }, enable: function () { this.$element.removeClass('disabled').prop('readonly', false).datepicker(this.pickerOptions); }, reset: function () { this.setFieldValue(this.initValue); this.lastValue = this.initValue; } }, extend: FormCtrlBase, staticMembers: { DEFAULTS: DEFAULTS } }); return FormFieldDate; });
这个组件跟formFieldText没有太多区别，需要说明的是：
1）它依赖了bootstrap-datetimepicker这个插件，来实现日期选择的效果。如果想替换成其它的插件来实现日期选择，需要改这部分的源码；
2）它依赖的日期插件仅仅是起到辅助录入的作用，不影响formFieldBase定义的那些基本的属性和行为。
实际使用的时候，只要把Input元素的data-type指定为date即可：
<input class="form-control form-field" name="birthday" data-type="date" data-default-value="" type="text" placeholder="" readonly value="2000-01-01">
9. formFieldUeditor.js
代码如下：
define(function (require, exports, module) { var $ = require('jquery'), FormCtrlBase = require('mod/formFieldBase'), Class = require('mod/class'); var DEFAULTS = $.extend({ height: 400, ueConfig: {} }, FormCtrlBase.DEFAULTS); var FormFieldUeditor = Class({ instanceMembers: { init: function (element, options) { //通过this.base调用父类FormCtrlBase的init方法 this.base(element, options); var that = this, $element = this.$element, opts = this.options; //监听input元素的change事件，并最终通过beforeChange和afterChange来管理 $element.on('change', function (e) { var val = that.getValue(), event; if (val === that.lastValue) return; that.trigger((event = $.Event('beforeChange')), val); //判断beforeChange事件有没有被阻止默认行为 //如果有则把input的值还原成最后一次修改的值 if (event.isDefaultPrevented()) { that.setFieldValue(that.lastValue); $element.focus().select(); return; } //记录最新的input的值 that.lastValue = val; that.trigger('afterChange', val); }); var editorId = this.name + '-editor', editorName = this.name + '-editor-text', ueScript = [ '<script id="' , editorId , '" name="' , editorName , '" type="text/plain" style="width:100%;height:' , opts.height , 'px;">' , '</script>' ].join(''); this.$element.before(ueScript); //初始化UE组件 this.ue = UE.getEditor(editorId, opts.ueConfig); this.ue && this.ue.ready(function () { that._ueReady = true; /*//粘贴时只粘贴文本 that.ue.execCommand('pasteplain'); //粘贴后再次做格式清理 that.ue.addListener('afterpaste', function (t, arg) { that.ue.execCommand('autotypeset'); });*/ //编辑器文本变化 that.subscribeUeContentChange(); //设置初始值 that.reset(); that.triggerInit(); }); }, subscribeUeContentChange: function () { var editor = this.ue, $element = this.$element; this._ueContentChange = function () { $element.val(editor.getContent()).trigger('change'); }; editor.addListener('contentChange', this._ueContentChange); }, offUeContentChange: function offUeContentChange() { var editor = this.ue; editor.removeListener('contentChange', this._ueContentChange); this._ueContentChange = undefined; }, getDefaults: function () { return DEFAULTS; }, _setValue: function (value, trigger) { //只要trigger不等于false，调用setValue的时候都要触发change事件 trigger !== false && this.$element.trigger('change'); }, setFieldValue: function (value) { var elementDom = this.$element[0], v = ' ' + value; elementDom.value = v; elementDom.value = v.substring(1); var ue = this.ue; if (ue && this._ueReady) { this.offUeContentChange(); ue.setContent(value); this.subscribeUeContentChange(); } }, getValue: function () { return this.$element.val(); }, disable: function () { this.ue && this._ueReady && this.ue.setDisabled(); }, enable: function () { this.ue && this._ueReady && this.ue.setDisabled(); }, reset: function () { this.setFieldValue(this.initValue); this.lastValue = this.initValue; } }, extend: FormCtrlBase, staticMembers: { DEFAULTS: DEFAULTS } }); return FormFieldUeditor; });
之所以写这个完全是为了简化ueditor的使用，就像前面说的，ueditor不改变表单元素在表单开发中的本质，仅仅是辅助录入的作用，实现起来也没什么难度，只要想办法实现setValue getValue enable disabled reset这些重要的api方法即可，ueditor只是个插件，在init方法内找个合适的位置做一下初始化就好了。
实际使用：
<textarea class="form-control form-field" name="detailDesc" data-type="ueditor" data-default-value="" rows="3" placeholder=""><p>I'm felix.</p></textarea>
注意data-type。
10. 文中小结
以上部分已经把formFieldBase以及现有的各个表单元素组件都介绍完了，但是在实际使用过程中，如果我们每个元素都要手动调用构造函数去初始化的话，那就太麻烦了， 这远不是本文想要起到的作用，所以为了简化最终的表单数据设置和收集的功能，我还另外写了两个组件：formFieldMap，这就是个映射表；formMap，这是个容器组件，管理内部所有的表单元素组件实例。在实际需求中，一般只要用到formMap即可。
11. formFieldMap
这个仅仅是为了formMap服务的，因为formMap会根据某个规则找到所有的待初始化的元素，然后根据元素的data-type属性，再根据formFieldMap来找到具体的构造函数：
define(function (require, exports, module) { var FormFieldText = require('mod/formFieldText'), FormFieldCheckbox = require('mod/formFieldCheckbox'), FormFieldRadio = require('mod/formFieldRadio'), FormFieldSelect = require('mod/formFieldSelect'), FormFieldDate = require('mod/formFieldDate'), FormFieldUeditor = require('mod/formFieldUeditor'); return { checkbox: FormFieldCheckbox, date: FormFieldDate, radio: FormFieldRadio, text: FormFieldText, select: FormFieldSelect, ueditor: FormFieldUeditor } });
12. formMap
代码如下：
define(function (require, exports, module) { var $ = require('jquery'), FormFieldMap = require('mod/formFieldMap'), Class = require('mod/class'), hasOwn = Object.prototype.hasOwnProperty, DEFAULTS = { mode: 1, //跟FormFieldBase一致 fieldSelector: '.form-field', //用来获取要初始化的表单元素 fieldOptions: {} //表单组件的option }; var FormMap = Class({ instanceMembers: { init: function (element, options) { var $element = this.$element = $(element), opts = this.options = this.getOptions(options); //存储所有的组件实例 this.cache = {}; var that = this; //初始化所有需要被FormMap管理的组件 $element.find(opts.fieldSelector).each(function () { var $field = $(this); //要求各个表单元素必须得有name或者data-name属性，否则fieldOptions起不到作用 that.add($field, $.extend({ mode: opts.mode }, opts.fieldOptions[$field.attr('name') || $field.data('name')] || {})); }); }, getOptions: function (options) { var defaults = this.getDefaults(), _opts = $.extend({}, defaults, this.$element.data() || {}, options), opts = {}; //保证返回的对象内容项始终与当前类定义的DEFAULTS的内容项保持一致 for (var i in defaults) { if (hasOwn.call(defaults, i)) { opts[i] = _opts[i]; } } return opts; }, getDefaults: function () { return DEFAULTS; }, add: function ($field, fieldOption) { //要求要被FormMap管理的组件必须有data-type属性 var type = $field.data('type'); if (!(type in FormFieldMap)) return; var formField = new FormFieldMap[type]($field, fieldOption || {}); this.cache[formField.name] = { formField: formField, fieldName: formField.name }; }, get: function (name) { var field = this.cache[$.trim(name)]; return field && field.formField; }, remove: function (name) { var formField = this.get(name); if (formField) { delete this.cache[name]; formField.destroy(); } }, reset: function () { var cache = this.cache; for (var i in cache) { if (hasOwn.call(cache, i)) { cache[i].formField.reset(); } } }, getData: function () { var cache = this.cache, data = {}; for (var i in cache) { if (hasOwn.call(cache, i)) { data[cache[i].fieldName] = cache[i].formField.getValue(); } } return data; }, setData: function (data, trigger) { if (Object.prototype.toString.call(data) !== '[object Object]') return; var cache = this.cache; for (var i in cache) { if (hasOwn.call(cache, i) && (i in data)) { cache[i].formField.setValue(data[i], trigger); } } } }, staticMembers: { DEFAULTS: DEFAULTS } }); return FormMap; });
它提供了三个option:
mode: 跟formFieldBase的mode作用是一样的，只不过因为formMap是作用于form元素上的，所以它的mode属性相当于是全局的，会对所有的表单元素都起作用；
fieldSelector: 用来过滤需要被初始化的表单元素的选择器，默认是.form-field，只要一个元素上有这个class，就会被这个容器管理，通常保留默认值即可；
fieldOptions：可以通过它传递各个表单元素的各自的option。
使用举例：
appForm = new Form('#appForm', { mode: Url.getParam('mode'), fieldOptions: { name: { onInit: function(){ } }, work: { onAfterChange: function (e, val) { if(val == 'xxx') { } } } } });
它还提供了以下api方法，在实际工作中可以用得到：
1）get（name)，用来获取某个字段的表单元素组件的实例
2）add($field, option)，将一个新的元素添加到容器来管理，这个在一些需要动态对表单元素进行增删的时候会经常用到
3）remove(name)，移除某个元素的在容器中的组件实例
4）getData()，获取容器内所有表单元素组件的值，以Object实例的形式返回
5）setData(data, trigger)，统一设置容器内所有的表单组件的值，第二个参数如果为false，则不会触发各个组件的change事件
6）reset()，重置整个容器内所有的表单元素组件的值为初始值。
13. 本文总结
本文介绍的内容很多，但从我个人而言，用途还是很大的，去年的公司里面有很多个项目都是用这种方式开发完成的，开发速度很快，而且整体上逻辑都比较清晰，比较好理解，所以非常希望这里面的东西也能够给其它人带来帮助。前段时间工作还比较忙，有很多的时间都花在这篇文章现有成果的思考和优化方面，将来也还会继续改进，目的就是为了希望在项目开发过程中能够更加省时省力，同时还要保质保量。下一步我会介绍自己如何进一步封装form组件以及form校验这一块的内容，已经有成果了，只是要等下周六日才会有时间来总结，请再关注。
