先不说一大堆乱七八糟的话，直接上代码，然后再解释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="username">
<span id="uname"></span>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj,"username",{
get:function(){
console.log("get init")
},
set:function(val){
console.log("set init")
document.getElementById('username').value = val
document.getElementById('uname').innerText = val
}
})
document.getElementById('username').addEventListener("keyup",function(event){
obj.username = event.target.value
},false)
</script>
</body>
</html>实现效果
给input注册keyup事件，然后输入值的时候，把input里的值给obj的username的属性，由于obj的username属性里有两个底层的api，get和set方法，set方法是当obj的username属性值被设的时候，就会执行set方法，而set方法里有val参数，可以获取username属性的值，所以直接将span的内容设置为username属性的值，然后再将input窗口的值也设置为username属性的值，这样直接修改obj.username的值，input里也会更新value，这样就完成了双向绑定