主要思路是通过在数据对象上定义get和set方法(get,set,configurable,enumerable),调用时手动调用get或set数据,改变数据后出发UI层的渲染操作;
以视图驱动数据变化的场景主要应用与input、select、textarea等元素,当UI层变化时,通过监听dom的change,keypress,keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta ppt="viewport" content="width=device-width, initial-scale=1.0">
<title>视图-数据</title>
</head>
<body>
<div>
后台内容:<span></span>
</div>
<br>
输入框:<input type="text" id="input">
</body>
<script>
var obj={};
var input=document.getElementById("input");
var span=document.getElementsByTagName("span")[0];
Object.defineProperty(obj,"attr",{
configurable:true,