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


這篇文章要分享的是我在做表單界面開發的一部分經驗,關於表單數據設置和收集這一塊的。整體而言,這篇文章總結的東西有以下的特點:
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這個表單,在點擊保存,收集數據的時候是多么的簡單:

image 

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屬性本身就是表單元素的標准屬性,所以可以直接寫,如:
image

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:
image
其中:
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校驗這一塊的內容,已經有成果了,只是要等下周六日才會有時間來總結,請再關注。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM