<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div>
<p class="box"></p>
<ul class="hobby"></ul>
</div>
<script>
var box = document.querySelector('.box');
var hobby = document.querySelector('.hobby')
class Observer{
constructor(data){
this.data = data
this.filterObj(data)
}
// 判断传入的参数的数据类型是不是一个对象
static isObject(obj){
if(Object.prototype.toString.call(obj) === '[object Object]'){
return true
}else{
return false
}
}
filterObj(data){
// 如果不是对象则结束
if(!Observer.isObject(data)){
return
}
for(const key in data){
// 过滤对象上面的属性
if(data.hasOwnProperty(key)){
const value = data[key]
// 如果data的属性值为对象
if(Observer.isObject(data[key])){
new Observer(data[key])
}
this.watch(key,value)
}
}
}
watch(k,v){
Object.defineProperty(this.data,k,{
enumerable:true,
configurable:true,
get:function(){
console.log(`${k}`, ' -- 被访问')
return v
},
set:function(newval){
console.log(`${k}`,'-- 发生变化')
console.log('新值为 ： ',JSON.stringify(newval))
// 当值发生改变时候修改页面元素中的内容
box.innerHTML = newval
// 先清空元素中的内容
hobby.innerHTML=''
createLi(newval)
// 是否是一个对象
if(Observer.isObject(newval)){
new Observer(newval)
}
v = newval
}
})
}
}
let obj = {
num:2048,
hobby:['唱歌','睡觉','打豆豆'],
equipment:{
arms:'kuku',
armgurd:'lobg'
}
}
box.innerHTML = obj.num;
hobby.innerHTML = ''
function createLi (arr){
for(let i in arr){
hobby.innerHTML += `<li>${arr[i]}</li>`
}
}
createLi(obj.hobby)
let ss = new Observer(obj)
console.log(ss);
</script>
</body>
</html>