<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>redux</title>
</head>
<body>
<div id='count'></div>
</body>
</html>
<script type="text/javascript" src="redux2.js"></script>
<!--<script type="text/javascript" src="middle.js"></script>-->
/**
* 建立stoe
* 觀察者模式
*/
function creatStore(reducer){
let listeners = [];
let state = null;
const subscribe = (listenerFun) => {
listeners.push(listenerFun);
}
const getState = () => state;
const dispatch = (action) => {
state = reducer(state, action);
for(let i = 0, len = listeners.length; i < len; i++){
listeners[i](state);
}
}
dispatch({});
return {
getState,
dispatch,
subscribe
}
}
function changeState(states, action){
if(!states){
return {
count: 0
}
}
switch (action.type){
case "UPDATA":
return {
...states,
count: action.data
}
break;
case "UPDATAS":
return {
...states,
count: action.data
}
break;
default:
return states;
break;
}
}
const store = creatStore(changeState);
let oldState = store.getState();
store.subscribe(()=>{
const newState = store.getState();
render(newState,oldState);
oldState = newState;
})
store.dispatch({type:'UPDATA',data:2})
store.dispatch({type:'UPDATAS',data:3})
function render(newdata,olddate){
if(newdata === olddate){
return false;
}
var ele = document.getElementById('count')
ele.innerHTML = newdata.count
}
![如何學好Web前端開發 企業對前端人員什麼要求[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)