ソースを参照

HWJS11 (redux) done

DimaBondarenko 3 年 前
コミット
608a87d436
5 ファイル変更126 行追加0 行削除
  1. 2 0
      HWJS11/css/style.min.css
  2. 9 0
      HWJS11/css/style.min.css.map
  3. 21 0
      HWJS11/index.html
  4. 89 0
      HWJS11/js/script.js
  5. 5 0
      HWJS11/sass/style.scss

+ 2 - 0
HWJS11/css/style.min.css

@@ -0,0 +1,2 @@
+*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}
+/*# sourceMappingURL=style.min.css.map */

+ 9 - 0
HWJS11/css/style.min.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AAAA,CAAC,AAAA,CACG,UAAU,CAAE,UAAU,CACtB,MAAM,CAAE,CAAC,CACZ",
+    "sources": [
+        "../sass/style.scss"
+    ],
+    "names": [],
+    "file": "style.min.css"
+}

+ 21 - 0
HWJS11/index.html

@@ -0,0 +1,21 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="css/style.min.css">
+</head>
+<body>
+    <select  id="shop"></select>
+        <input id='inputValue' type="number">
+        <button id="btnBuy">buy</button>
+        <input type="number" id="inputMoney">
+        
+        <table border="2" id="table">
+            
+        </table>
+    <script src="js/script.js"></script>
+</body>
+</html>

+ 89 - 0
HWJS11/js/script.js

@@ -0,0 +1,89 @@
+function createStore(reducer){
+    let state       = reducer(undefined, {}) //стартовая инициализация состояния, запуск редьюсера со state === undefined
+    let cbs         = []                     //массив подписчиков
+    
+    const getState  = () => state            //функция, возвращающая переменную из замыкания
+    const subscribe = cb => (cbs.push(cb),   //запоминаем подписчиков в массиве
+                             () => cbs = cbs.filter(c => c !== cb)) //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
+                             
+    const dispatch  = action => { 
+        const newState = reducer(state, action) //пробуем запустить редьюсер
+        if (newState !== state){ //проверяем, смог ли редьюсер обработать action
+            state = newState //если смог, то обновляем state 
+            for (let cb of cbs)  cb() //и запускаем подписчиков
+        }
+    }
+    
+    return {
+        getState, //добавление функции getState в результирующий объект
+        dispatch,
+        subscribe //добавление subscribe в объект
+    }
+}
+
+function reducer(state, {type, ШО, СКОКА, БАБЛО}){ //объект action деструктуризируется на три переменных
+    if (!state){ //начальная уборка в ларьке:
+        return {
+            пиво: {count : 100, price: 25},
+            чипсы: {count : 100, price: 20},
+            сиги: {count: 100, price: 10},
+            касса: 0
+        }
+    }
+    if (type === 'КУПИТЬ'){ //если тип action - КУПИТЬ, то:
+        if(СКОКА <= state[ШО].count && БАБЛО >= state[ШО].price * СКОКА){
+            return {
+                ...state, //берем все что было из ассортимента
+                [ШО]: {...state[ШО], count: state[ШО].count - СКОКА}, //и уменьшаем то, что покупается на количество
+                касса: state.касса + state[ШО].price * СКОКА
+            }
+        }
+        
+    }
+    return state //если мы не поняли, что от нас просят в `action` - оставляем все как есть
+}
+
+function createTable (obj){
+    table.innerText = ''
+
+    for(let [key, value] of Object.entries(obj)){
+        let tr = document.createElement('tr');
+        let td = document.createElement('td');
+        td.innerText = key
+        tr.append(td);
+        table.append(tr);
+        
+        if(typeof value === 'object'){
+            
+            for(let [key1,value1] of Object.entries(value)){
+                
+                let td = document.createElement('td');
+                td.innerText = key1 + ' : ' + value1;
+                tr.append(td);
+                
+            }
+        } else {
+            let td = document.createElement('td');
+            td.innerText = value;
+            tr.append(td);
+        }
+    }
+}
+
+const store = createStore(reducer);
+
+
+createTable(store.getState())
+
+for(let [key] of Object.entries(store.getState())){
+    if (key !== 'касса'){
+        let option = document.createElement('option');
+        option.innerText = key
+        shop.append(option)
+    }
+}
+
+store.subscribe(()=>createTable(store.getState()));
+store.subscribe(() => console.log(store.getState()));
+
+btnBuy.onclick = (() => store.dispatch({type: 'КУПИТЬ', ШО : shop.value, СКОКА: inputValue.value, БАБЛО: inputMoney.value }))

+ 5 - 0
HWJS11/sass/style.scss

@@ -0,0 +1,5 @@
+*{
+    box-sizing: border-box;
+    margin: 0;
+}
+