js的面向对象 我的练习写法

js部分

var Person = function() {
    // self = this
    this.name = '',
    this.age = '',
    this.sex = '',
    this.dept = '',
    this.regex = {
        name : {
            regex:  /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/,
            message: '姓名非法',
        },
        age : {
            regex:/^[0-9]{1,2}$/,
            message: '年龄非法',
        },
    }
};
Person.prototype = {

    init: function init() {
        // 拷贝对象
        this.extendMany(this, this.getFromAjax());
        // 数据绑定
        this.bindData();

    },
    // 提交
    submit : function () {
        this.updateSelf();
        if (!this.checkSelf()) {
            return;
        }
        // 保存
    },
    // 校验
    checkSelf : function() {
        var flag = true;
        for (var key in this.regex) {
            var regex = this.regex[key].regex;
            if (!this[key].match(regex)) {
                flag = false;
                alert(this.regex[key].message);
                break;
            }
        }
        return flag;
    },
    updateSelf: function() {
        var $doms = $("[pdata]");
        for (var key in this) {
            if (typeof this[key] == "function") {
                continue;
            }
            var dom = $("[pdata='" + key +"']");
            if (dom.is('input')) {
                this.getInputValue(dom, key);
            } else if (dom.is('select')) {
                this[key] = dom.val();
            }
        }
    },
    // ajax获取数据
    getFromAjax: function () {
        obj = {
            name : 'zAAs',
            age : '22',
            sex : '2',
            dept: 1,
        }
        return obj;
    },
    // 事件绑定
    bindEvent : function() {
        var that = this;
        this.addEvent("savebtn", "click", function () {
            that.submit();
        });
    },

    // 绑定数据
    bindData : function() {
        var $doms = $("[pdata]");
        for (var key in this){
            if (typeof this[key] == "function") {
                continue;
            }
            var dom = $("[pdata='" + key +"']");
            if (dom.is('input')) {
                this.setInputValue(dom, key);
            } else if (dom.is('select')) {
                dom.val(this[key]);
            }

        }
    },
    // 单选特殊处理(赋值操作)
    setRadioValue: function (radios, key) {
        for (var i = 0; i < radios.length; i++) {
            // 这里是一组radio， 遍历取值
            var $radio = $(radios[i]);
            var choose_value = $(radios[i]).val();
            choose_value == this[key] ? $radio.attr("checked", true) : $radio.attr("checked", false);
        }
    },
    // 从radio取值
    getRadioValue : function (radios) {
        for (var i = 0; i < radios.length; i++) {
            var $radio = $(radios[i]);
            if (!$radio.is(':checked')) {
                continue;
            }
            return $radio.val();
        }
    },
    // 从input获取值
    getInputValue: function (dom, key) {
        var domType = dom.attr("type");
        if (domType == 'text') {
            this[key] = dom.val();
        } else if (domType == 'radio') {
            // 单选
            this[key] = this.getRadioValue(dom);
        }
        return domType;
    },
    // 给input赋值
    setInputValue: function (dom, key) {
        var domType = dom.attr("type");
        if (domType == 'text') {
            dom.val(this[key]);
        } else if (domType == 'radio') {
            // 单选的话
            this.setRadioValue(dom, key);
        }
        return domType;
    },
    // 扩充对象功能 // 工具方法
    extendMany:function() {
        var key, i = 0, len = arguments.length, target = null, copy;
        if (len === 0) {
            return;
        } else if (len === 1) {
            target = this;
        } else {
            i++;
            target = arguments[0];
        }
        for (; i < len; i++) {
            for (key in arguments[i]) {
                copy = arguments[i][key];
                target[key] = copy;
            }
        }
        return target;
    },
    // 工具方法
    addEvent : function addEvent(id, type, fn) {
        var dom = document.getElementById(id);
        dom.addEventListener(type, fn, false);
    },

}

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="新增修改.js"></script>

</head>
<body>

<div class="content">
    <div>
        <span>姓名：</span><input pdata="name" id="name" type="text"/>
    </div>

    <div>
        <span>性别：</span>
        <input pdata="sex" value="1" name="sex" type="radio"/>男
        <input pdata="sex" value="2" name="sex" type="radio"/>女
    </div>
    <div>
        <span>年龄：</span><input pdata="age" type="text"/>
    </div>
    <div>
        <span>部门：</span>
        <select pdata="dept" name="dept">
            <option value="">请选择</option>
            <option value="1">研发</option>
            <option value="2">测试</option>
        </select>
    </div>
    <button id="submit">提交</button>
    <button id="savebtn">保存</button>
</div>
</body>
<script>
    var person = new Person();
    person.init();
    person.bindEvent();
</script>
</html>