Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul>
  <li>
    <label for="name">姓名</label>
    <input id="name" name="name" type="text"/></li>
  <li>
    <label for="age">年龄</label>
    <select id="age" name="age">
      <option>80后</option>
      <option>90后</option>
      <option>00后</option>
      <option>其他</option>
    </select>
  </li>
</ul>

<button id="confirm" type="submit">提交</button>
<script id="jsbin-javascript">
//getter/setter 与数据双向绑定

const view = {
  nameEl: document.getElementById('name'),
  ageEl: document.getElementById('age'),
  submitBtn: document.getElementById('confirm')
}

view.submitBtn.addEventListener('click', function(evt){
  console.log('你要提交的数据是：' + [user.name, user.age]);
  evt.preventDefault();
});

function User(name, age){
  this.name = name;
  this.age = age;
}

User.prototype.bind = function(view){
  view.nameEl.addEventListener('change', evt => {
     this.name = evt.target.value;
  });
  view.ageEl.addEventListener('change', evt => {
     this.age = evt.target.value;
  });
}

Object.defineProperty(User.prototype, 'name', {
  set: function(name){
    view.nameEl.value = name;
  },
  get: function(){
    return view.nameEl.value;
  }
});

Object.defineProperty(User.prototype, 'age', {
  set: function(name){
    var ageOptions = Array.from(view.ageEl.options)
              .map(item => item.innerHTML);
    if(ageOptions.indexOf(name) === '-1'){
      throw new Error('无效的年龄格式');
    }
    view.ageEl.value = name;
  },
  get: function(){
    return view.ageEl.value;
  }
});

var user = new User('akira', '80后');
user.bind(view);
</script>


<script id="jsbin-source-javascript" type="text/javascript">//getter/setter 与数据双向绑定

const view = {
  nameEl: document.getElementById('name'),
  ageEl: document.getElementById('age'),
  submitBtn: document.getElementById('confirm')
}

view.submitBtn.addEventListener('click', function(evt){
  console.log('你要提交的数据是：' + [user.name, user.age]);
  evt.preventDefault();
});

function User(name, age){
  this.name = name;
  this.age = age;
}

User.prototype.bind = function(view){
  view.nameEl.addEventListener('change', evt => {
     this.name = evt.target.value;
  });
  view.ageEl.addEventListener('change', evt => {
     this.age = evt.target.value;
  });
}

Object.defineProperty(User.prototype, 'name', {
  set: function(name){
    view.nameEl.value = name;
  },
  get: function(){
    return view.nameEl.value;
  }
});

Object.defineProperty(User.prototype, 'age', {
  set: function(name){
    var ageOptions = Array.from(view.ageEl.options)
              .map(item => item.innerHTML);
    if(ageOptions.indexOf(name) === '-1'){
      throw new Error('无效的年龄格式');
    }
    view.ageEl.value = name;
  },
  get: function(){
    return view.ageEl.value;
  }
});

var user = new User('akira', '80后');
user.bind(view);

</script></body>
</html>