javascript 终极版 - VanillaJS柜台
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 终极版 - VanillaJS柜台相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<title>Redux Vanilla</title>
</head>
<body>
<h1>Hello world</h1>
<section>
<p>Redux count</p>
<p id='render-store'></p>
</section>
<button id='addOne'>Add 1 Redux</button>
<button id='removeOne'>Remove 1 Redux</button>
<button id='addTen'>Add 10 Redux</button>
<button id='removeTen'>Remove 10 Redux</button>
<button id='resetCount'>Reset Count Redux</button>
<br/>
<br/>
<br/>
<section>
<p>Vanilla count</p>
<p id='pForPotatoes'>
</p>
</section>
<br/>
<button id='add1Button'>Add 1 Vanilla</button>
<button id='remove1Button'>Remove 1 Vanilla</button>
<button id='add10Button'>Add 10 Vanilla</button>
<button id='remove10Button'>Remove 10 Vanilla</button>
<button id='resetCountVanilla'>ResetCount Vanilla</button>
<script onload src='main.js'></script>
</body>
</html>// JS 101 for training purposes
let myCount = 0;
document.getElementById("pForPotatoes").innerHTML = myCount;
const addToCount = (x) => {
myCount = myCount + x;
return document.getElementById("pForPotatoes").innerHTML = myCount;
};
const substractToCount = (x) => {
myCount = myCount - x;
return document.getElementById("pForPotatoes").innerHTML = myCount;
};
const setCount = (x) => {
myCount = x;
return document.getElementById("pForPotatoes").innerHTML = myCount;
};
let addOneVanilla = document.getElementById("add1Button").addEventListener('click', () => addToCount(1));
let substractOneVanilla = document.getElementById("remove1Button").addEventListener('click', () => substractToCount(1));
let addTenVanilla = document.getElementById("add10Button").addEventListener('click', () => addToCount(10));
let substractTenVanilla = document.getElementById("remove10Button").addEventListener('click',() => substractToCount(10));
let resetCountVanilla = document.getElementById("resetCountVanilla").addEventListener('click', () => setCount(0));
// END OF VANILLA EXERCICE //
// REDUX QUEST STARTS BELOW //
//ACTIONS
const addOneAction = {
type: 'ADD_ONE',
};
const addTenAction = {
type: 'ADD_TEN',
};
const removeOneAction = {
type: 'REMOVE_ONE',
};
const removeTenAction = {
type: 'REMOVE_TEN',
};
const resetCountAction = {
type: 'RESET',
};
//REDUCER
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'ADD_ONE':
return state + 1;
case 'REMOVE_ONE':
return state - 1;
case 'ADD_TEN':
return state + 10;
case 'REMOVE_TEN':
return state - 10;
case 'RESET':
return state = 0;
default:
return state;
}
}
//STORE
const { createStore } = Redux;
const store = createStore(counterReducer);
//MAIN
const renderStore = document.getElementById('render-store');
const render = () => {
renderStore.innerHTML = store.getState();
}
//SUBSCRIBE STORE
store.subscribe(render);
render();
//DISPATCHS
const addOne = document.getElementById('addOne');
addOne.addEventListener('click', () => {
store.dispatch(addOneAction)
});
const addTen = document.getElementById('addTen');
addTen.addEventListener('click', () => {
store.dispatch(addTenAction)
});
const removeOne = document.getElementById('removeOne');
removeOne.addEventListener('click', () => {
store.dispatch(removeOneAction)
});
const removeTen = document.getElementById('removeTen');
removeTen.addEventListener('click', () => {
store.dispatch(removeTenAction)
});
const resetCount = document.getElementById('resetCount');
resetCount.addEventListener('click', () => {
store.dispatch(resetCountAction)
});以上是关于javascript 终极版 - VanillaJS柜台的主要内容，如果未能解决你的问题，请参考以下文章