星空网 > 软件开发 > Java

简洁易用的表单数据设置和收集管理组件

这篇文章要分享的是我在做表单界面开发的一部分经验,关于表单数据设置和收集这一块的。整体而言,这篇文章总结的东西有以下的特点:
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中生日这个表单元素就是一个很好的说明,它虽然用到了日期选择的插件,但是即使没有这个插件,也不会影响到文本框值的存取。我把这个说明出来其实是想表达,在表单数据收集或设置的时候,应该考虑一下分离的思想,只有这样写出来的组件才能够不受项目的影响。关于这部分的思想,我推荐一篇更好的文章,感兴趣的可以深入阅读:

顺势而为,HTML发展与UI组件设计进化

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: '&nbsp;',    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校验这一块的内容,已经有成果了,只是要等下周六日才会有时间来总结,请再关注。




原标题:简洁易用的表单数据设置和收集管理组件

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

广州发到马来西亚物流:https://www.goluckyvip.com/tag/91745.html
马来西亚发中国物流:https://www.goluckyvip.com/tag/91747.html
广州发马来西亚物流专线:https://www.goluckyvip.com/tag/91748.html
昆明到马来西亚物流:https://www.goluckyvip.com/tag/91749.html
佛山到马来西亚的物流:https://www.goluckyvip.com/tag/91750.html
天津发到马来西亚物流:https://www.goluckyvip.com/tag/91751.html
争当“穷鬼”的百万年轻人 正在被9块9套餐“收割” :https://www.kjdsnews.com/a/1836303.html
蓝色港湾地址及周边景点介绍(让你轻松玩转这个美丽的海滨城市):https://www.vstour.cn/a/362185.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流