用访问器属性单价、数量、总价之间的同步,简化了逻辑,便于维护和添加新功能

31 阅读1分钟
        <div class="form-example">
            <label for="name">单价: </label>
            <input type="number" name="unit-price" id="unitPrice" max="2" maxlength="2" placeholder="请输入" />
        </div>
        <div class="form-example">
            <label for="number">数量: </label>
            <input type="number" name="number" id="number" placeholder="请输入" />
            <button id="btn">+1</button>
        </div>
        <div class="form-example">
            <label for="number">总价: </label>
            <input type="number" name="total-price" id="totalPrice" placeholder="请输入" />
        </div>
        <!-- <div class="form-example">
        <input type="submit" value="提交" />
      </div> -->
    </div>
            number:'',
            price:'',
            // 访问器属性  - 聚合属性
            get total(){
                if(obj.number ==='' || obj.price === ''){
                    return this._total
                }
                return obj.number * obj.price;
            },
            set total(v){
                if(obj.price !== ''){
                    obj.number = v / obj.price
                }
            }
        }
        
        const numberDom = document.querySelector('#number')
        const priceDom = document.querySelector('#unitPrice')
        const totalDom = document.querySelector('#totalPrice')

        function handler(){
            numberDom.value = obj.number;
            priceDom.value = obj.price;
            totalDom.value = obj.total 
        }

        numberDom.addEventListener("input",(e)=>{
            const v  = parseFloat(e.target.value)
            obj.number = isNaN(v) ?'':v
            handler()
        })
        priceDom.addEventListener("input",(e)=>{
            const v  = parseFloat(e.target.value)
            obj.price = isNaN(v) ?'':v
            handler()
        })
        totalDom.addEventListener("input",(e)=>{
            const v  = parseFloat(e.target.value)
            obj.total = isNaN(v) ?'':v
            handler()
        })
        document.querySelector('#btn').addEventListener("click",function () {
            obj.number ++ 
            handler()
        });