redux精品先导课程—03计数器-DOM版本

偏执的太偏执、 2022-03-10 04:50 167阅读 0赞

实现的代码

let $addCounter = $('.counterBox .addCounter');
    let $counterPanrl = $('.counterBox .counterPanel');
    let $hasAll = $('.allSel .val');
    let $maximum = $('.maximum .val');
    let $allCount = $('.allCount .val');
    
    const counters = [];
    
    class Counter{
        constructor(counters){
            this.value = 0;
            this.counters = counters;
            this.elt = $('<div class="counter"></div>');
    
            let incrementBtn = this.incrementBtn = $('<button class="add"></button>');
            let decrementBtn = this.decrementBtn = $('<button class="sub"></button>');
            let oddBtn = this.oddBtn = $('<button class="addIfOdd"></button>');
            let asyncBtn = this.asyncBtn = $('<button class="addAsync"></button>');
            let num = this.num = $(`<span>${this.value}</span>`);
    
            this.elt.append(decrementBtn,num,incrementBtn,oddBtn,asyncBtn);
            this.decrement = this.decrement.bind(this);
            this.increment = this.increment.bind(this);
            this.addIfOdd = this.addIfOdd.bind(this);
            this.asyncAdd = this.asyncAdd.bind(this);
    
            incrementBtn.click(this.increment);
            decrementBtn.click(this.decrement);
            oddBtn.click(this.addIfOdd);
            asyncBtn.click(this.asyncAdd);
        }
    
        decrement(){
            if(this.value === 0) return
            this.num.html(--this.value);
            syncState(this.counters);
        }
    
        increment(){
            this.num.html(++this.value);
            syncState(this.counters);
        }
    
        addIfOdd(){
            if(this.value%2 === 0) return
            this.num.html(++this.value);
            syncState(this.counters);
        }
    
        asyncAdd(){
            setTimeout(()=>{
                this.num.html(++this.value);
                syncState(this.counters);
            },1000)
        }
    }
    
    function checkHasAll(counters){
        let val = counters.every(elt=> elt.value !==0)
        $hasAll.html(val+'');
    }
    
    function calcMax(counters){
        let val = counters.slice().sort((a,b)=>{
            b.value-a.value
        })[0].value;
        $maximum.html(val);
    }
    
    function countAll(counters){
        let val = counters.reduce((accu,elt)=> accu+elt.value,0)
        $allCount.html(val)
    }
    
    function syncState(counters){
        checkHasAll(counters);
        calcMax(counters);
        countAll(counters);
    }
    
    $addCounter.click(ev=>{
        let counter = new Counter(counters);
        counters.push(counter);
        $counterPanrl.append(counter.elt);
        syncState(counters);
    })

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220310/d899cea64867472492aacbe8b21e08e0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 JVM03 - 程序计数器

目录 1.程序计数器概述 2.程序计数器作用 3.为什么使用程序计数器来记录当前线程的执行地址 4.程序计数器为什么被设定为线程私有 ----------------

川长思鸟来/ 2023年01月02日 02:19/ 0 赞/ 126 阅读

相关 redux精品先导课程—05redux-thunk中间件

首先安装redux-thunk这个插件 > npm i -S redux-thunk 然后再重启服务器：node ser 首先执行下面操作，激活thunk ![wat

桃扇骨/ 2022年03月10日 12:58/ 0 赞/ 197 阅读

相关 redux精品先导课程—04action创建函数

可以将上一节的代码进行优化 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

Bertha 。/ 2022年03月10日 05:14/ 0 赞/ 137 阅读

相关 redux精品先导课程—04计数器-redux版本

import { createStore } from 'redux'; let $addCounter = $('.counterBox .addC

迈不过友情╰/ 2022年03月10日 05:12/ 0 赞/ 180 阅读

相关 redux精品先导课程—03计数器-DOM版本

实现的代码 let $addCounter = $('.counterBox .addCounter'); let $counterPanrl = $('.c

偏执的太偏执、/ 2022年03月10日 04:50/ 0 赞/ 168 阅读

相关 redux精品先导课程—02redux基本概念

1.相关概念 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

不念不忘少年蓝@/ 2022年03月10日 03:52/ 0 赞/ 157 阅读

相关 redux精品先导课程—01初始redux

1.基础学习redux之前需要掌握以下知识 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

约定不等于承诺〃/ 2022年03月10日 03:48/ 0 赞/ 167 阅读

相关 redux精品先导课程—06combinereducers

上一节我们讲的是只有一个面板的，现在我们要变成两个面板，要怎么操作呢？首先index.html里面的ui代码先复制一份 ![watermark_type_ZmFuZ3po

叁歲伎倆/ 2022年03月08日 06:48/ 0 赞/ 179 阅读

相关 redux精品先导课程—08使用react-redux连接

首先安装这个库 npm i -S react-redux，然后用node ser跑起服务器下面将上一节的代码进行改变 App.js require('style

绝地灬酷狼/ 2022年03月06日 16:33/ 0 赞/ 192 阅读

相关 redux精品先导课程—07react手动连接

还是上一节的项目，首先安装以下依赖库。 > npm i -S react react-dom > > npm i -D prop-types babel-preset-re

逃离我推掉我的手/ 2022年03月06日 13:44/ 0 赞/ 182 阅读