<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app"></div>
<script>
//待渲染数据
let appState = {
text:"data",
color:'red'
}
function renderApp(){
let app = document.getElementById('app');
app.innerText = appState.text;
app.style.color = appState.color;
}
function stateChange(state,action){
switch (action.type){
case 'UPDATE_TEXT':
state.text = action.text;
break;
case 'UPDATE_COLOR':
state.color = action.color;
break;
default:break;
}
}
// let action = {
// type:'UPDATE_TEXT',
// text:"change",
// }
// stateChange(appState,action)
// renderApp()
//传入的参数是 需要观察的数据 使得数据发生变化的函数
function Observer(state,stateChange){
//1、定义一个数组存储行为--渲染函数
let listeners = [];
//2、把行为添加进去 subscribe是将要执行的函数装进数组
let subscribe = (listener)=>{
listeners.push(listener);
}
let getState = state;
//分发是让原始数据 调用 改变函数 使得数据发生变化，再调用渲染函数相当于通知
let dispatch = (action)=>{
//修改默认数据
stateChange(state,action);
//遍历数组内部的每一个函数renderApp 依次执行
listeners.forEach((listener)=>listener())
}
return {getState,dispatch,subscribe}
}
const store = Observer(appState,stateChange)
//3、将渲染函数装进去行为的action数组
store.subscribe(()=>renderApp())
let i = 0;
setInterval(()=>{
store.dispatch({type:'UPDATE_TEXT',text:"修改数据"+i++})
},500)
</script>
</body>
</html>
1、观察者模式
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
