首页 > 代码库 > 探讨:如何更快的赋值取值

探讨:如何更快的赋值取值

背景

  显示数据时,常规赋值与取值是这样的.

// set
$("#name").val(data.name);
$("#realname").val(data.realname);
$("#address").val(data.address);
$("#sex").val(data.name);
$("#love").attr(!!data.love);

// get
var data =http://www.mamicode.com/ {
    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 =http://www.mamicode.com/ {
        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 =http://www.mamicode.com/= 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);

  此举的目的旨在维护老项目时,让大家取值赋值更快,解放亲们的双手。

  目前是一个想法与初步实现,如果你有更好的想法,欢迎告知一二,先谢过。

  打包下载