背景
显示数据时，常规赋值与取值是这样的.
// set
$("#name").val(data.name);
$("#realname").val(data.realname);
$("#address").val(data.address);
$("#sex").val(data.name);
$("#love").attr(!!data.love);// get
var 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: ‘cnblogs‘,
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);
此举的目的旨在维护老项目时，让大家取值赋值更快，解放亲们的双手。
目前是一个想法与初步实现，如果你有更好的想法，欢迎告知一二，先谢过。