簡潔易用的表單數據設置和收集管理組件

這篇文章要分享的是我在做表單界面開發的一部分經驗，關於表單數據設置和收集這一塊的。整體而言，這篇文章總結的東西有以下的特點：
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: ' ',
        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校驗這一塊的內容，已經有成果了，只是要等下周六日才會有時間來總結，請再關注。