|
html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式实现</title>
</head>
<body>
<div id="app">
订阅试图-1: <span class="box-1"></span>
订阅试图-2: <span class="box-2"></span>
</div>
<script src="xxx.js"></script>
<script>
let obj = {}
dataHi({
data:obj,
tag:'view-1',
datakey:'one',
selector:'.box-1'
})
dataHi({
data:obj,
tag:'view-2',
datakey:'two',
selector:'.box-2'
})
//1.初始化赋值
obj.one = '这个是视图1'
obj.two = '这个是视图2'
//2.劫持数据 更新者负责重新渲染N次
//响应式
//1.数据联动（双向绑定）
//2.数据捕获到修改
</script>
</body>
</html>
js源码
//订阅器模型
let Dep = {
clientList:{},//容器
//添加订阅
listen: function(key,fn){
// if(!this.clientList[key]){
// this.clientList[key] = []
// }
//this.clientList[key].push(fn)
//短路表达式写法
(this.clientList[key] || (this.clientList[key] = [])).push(fn);
},
//key为要添加订阅的唯一id,fn可不止一个 为附送消息
//发布
trigger:function(){
let key = Array.prototype.shift.call(arguments),//类数组转换成数组 用call方法可使用数组原型方法
fns = this.clientList[key];
if(!fns || fns.length ===0 ){
//如果没有该订阅者 或者是 该订阅者没有订阅内容 代码结束
return false;
}
//如果有内容的话 for循环取出其中内容
for(let i=0, fn; fn=fns[i++];){
fn.apply(this,arguments)
//改变this指向 目的为 张三订阅指向张三 李四订阅指向李四
}
}
}
//数据劫持
//data劫持的数据
//tag具体目标元素
//datakey目标元素key
//selector选择器
let dataHi = function({data,tag,datakey,selector}){
let value = '',
el = document.querySelector(selector);
Object.defineProperty(data,datakey,{
//取值
get:function(){
console.log("取值");
return value;
},
set: function(val){
console.log("设置值");
value = val;
//发布
Dep.trigger(tag,val)
}
})
//订阅
Dep.listen(tag,function(text){
el.innerHTML = text
})
console.log(el);
}
|