探討：如何更快的賦值取值

背景

　　顯示數據時，常規賦值與取值是這樣的.

// set$("#name").val(data.name);$("#realname").val(data.realname);$("#address").val(data.address);$("#sex").val(data.name);$("#love").attr(!!data.love);// getvar data = {    name:$("#name").val(),    realname:$("#realname").val(),    address:$("#address").val(),    sex:$("#sex").val(),    love:$("#love").attr('checked')};

　　最近的項目字段是相當多，大概有30+，樓主寫的也郁悶了。賦值與取值，真是機械活。于是想到表單提交時，不準確的說，是后臺接收到的數據均是控件的name與value的鍵值對，既然表單可以這樣直接取值，并提交給后臺，那賦值也應該是可以的。

　　總結樓主的需求，獲取到一個實體對象，直接將對象的數據賦值到頁面的控件中。根據實體對象的定義，直接取得頁面上控件的值，以對象形式返回。

實現

　　看不明白沒關系，大意就是這樣，先來看看頁面與js調用是怎么寫的。

    <form id="form1">        <input type="text" name="uid" />        <input type="text" name="pwd" />        <input type="checkbox" name="love" />        <input type="radio" name="g1" value="1" />        <input type="radio" name="g1" value="2" />        <input type="radio" name="g1" value="3" />        <input type="text" name="gselect" value />        <select name="sl">            <option value="11">11</option>            <option value="22">22</option>        </select>    </form>    <input type="button" id="btn" value="取值" />

　　表單里的控件均指定了name，作為存值或取值的key。

    var data = {        uid: 'VEVb',        pwd: '12345',        sl: '22',        love: true,        g1: '3',        gselect: function () {            return $("#form1 [name=g1]:checked").val();        }    };    $("#btn").on('click', function () {        var d = $("#form1").getModel(data);        alert(JSON.stringify(d));    });    $("#form1").setModel(data);

　　這樣就能完成賦值與取值了。其中具體實現則是根據控件的類型，取出相應的值，如vakue屬性，checked屬性等。

　　初步實現是這樣的，可以根據實際的應用做修改。

    (function ($) {        function BindModel(p) {            p = $.extend({ method: 'get', data: {} }, p);            var isGet = p.method == "get";            var ret = {};            for (var name in p.data) {                var $name = $(p.container).find("[name='" + name + "']");                //未找到則跳過                if (!$name.length) continue;                //獲取當前對象值                var value;                if (typeof p.data[name] == "function") {                    //為函數時,取值就終止                    if (isGet) {                        ret[name] = p.data[name].call();                        continue;                    }                    else {                        value = p.data[name].call();                    }                } else {                    value = p.data[name];                }                //根據控件類型來賦值                var tag = $name[0].tagName;                var t = $name.attr("type");                if (tag == "SELECT" || t == "text") {                    if (isGet) ret[name] = $name.val();                    else $name.val(value || '');                } else if (t == "checkbox") {                    if (isGet) ret[name] = !!$name.attr('checked');                    else $name.attr('checked', !!value);                } else if (t == "radio") { //單選框name相同為一組，根據value來區分啦                    $name.each(function () {                        if (isGet && this.checked) {                            ret[name] = this.value;                            return false;                        }                        else if (!isGet && this.value == value) {                            this.checked = true;                        }                    });                }                else if (tag == 'TD' || tag == 'SPAN') {                    if (isGet) ret[name] = $name.text();                    else $name.text(value)                }            }            if (isGet) return ret;        }        $.fn.setModel = function (data) {            BindModel({ method: 'set', data: data, container: this });        }        $.fn.getModel = function (data) {            return BindModel({ method: 'get', data: data, container: this });        }    })(jQuery);

　　此舉的目的旨在維護老項目時，讓大家取值賦值更快，解放親們的雙手。

　　目前是一個想法與初步實現，如果你有更好的想法，歡迎告知一二，先謝過。

　　打包下載