<重构>笔记

重构:
在不改变的前提下,提高代码的可理解性,降低其修改成本


The rule of three
添加功能时一并重构
修补错误时一并重构
复审代码时一并重构

composing method

a. Extract method. divide a method into two or more method.
提炼方法, 把能分开,重用的部分单独做一个方法。

b. Inline method. conclude two or method into one method.
和Extract method相反, 概括多个方法成一个, 简化代码.

c. Inline temp. remove temp variable as we can.


d. Replace temp with query. change temp variable 's operation into a method that can be recall some other place


e. Introduce explaining variable. change series of operation into some explaining variable, use clear name


f. Split temporary variable. won't reuse temp variable for many set value operation, it make other confused


g. Remove assignments to parameters.
create a temp variable instead of object, java only use pass by value (参数不要用来赋值, 使用final, 避免对参数赋值)


h. Replace method with method object.
create method object( TestObject _testObject), use 'Extract method', use '_testObject.testMethod()'(method object)


i. Substitute algorithm. improve algorithm




Moving features between objects


a. Move method

b. Move field

c. Extract class.

d. Inline class.

e. Hide delegate. (对method进行加一层封装,使Client不能直接访问method. 简单委托关系)

f. Remove middle man. 和Hide delegate相反, 合理的隐藏程序基于实际系统的变化

g.Introduce foreign method. create new method, set server class entity as argument
ex: Date date = new Date(pro.getYear(), pro.getMonth(), pro.getDay()+1)
----> Date date = nextDay(pro);
staitc Date nextDay(Date pro)
{
return new Date()
}
这是我的index.html代码内容:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>京东商城 - 购物车</title> <link href="css/font-awesome.min.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header></header> <div class="content"> <div class="t-head"><h4>全部商品</h4></div> <div class="sct"> <div class="thead"> <div><input type="checkbox" class="selectAll" /></div> <div>全选</div> <div>商品</div> <div>单价</div> <div>数量</div> <div>小计</div> <div>操作</div> </div> <div id="listBox"> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check"></div> <div><img src="img/product1.jpg" height="100"></div> <div>新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰</div> <div>¥<span class="price">5239.00</span></div> <div><input type="number" value="1" min="1"></div> <div>¥<span class="subtotal">5239.00</span></div> <div><a href="#" class="del">删除</a></div> </div> </div> <div class="countBox"> <div><input type="checkbox" class="selectAll" /></div> <div>全选 <a href="#" id="delcheck">删除选中的商品</a></div> <div> <span class="gray">总价:</span> ¥<span id="totalprice">0.00</span> </div> <div>去结算</div> </div> </div> </div> <div class="p-head"><h5>猜你喜欢</h5></div> <div class="productsBox"> <div class="product"> <img src="img/product1.jpg" height="100" /> <p> 新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15 i5-10210U 16 512G独显灰 </p> <div>¥5239.00</div> <button class="add-to-cart"> <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车 </button> </div> <div class="product"> <img src="img/product1.jpg" height="100" /> <p> 新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15 i5-10210U 16 512G独显灰 </p> <div>¥5239.00</div> <button> <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车 </button> </div> </div> <footer></footer> <script src="js/shoppingcar.js"></script> </body> <script> // 等待DOM加载完毕 document.addEventListener('DOMContentLoaded', function () { // 全选/取消全选功能 const selectAllCheckboxes = document.querySelectorAll('.selectAll'); const itemCheckboxes = document.querySelectorAll('input[name="check"]'); selectAllCheckboxes.forEach(function (checkbox) { checkbox.addEventListener('change', function () { itemCheckboxes.forEach(function (itemCheckbox) { itemCheckbox.checked = checkbox.checked; }); calculateTotal(); }); }); // 监听每个商品的复选框变化 itemCheckboxes.forEach(function (checkbox) { checkbox.addEventListener('change', function () { const allChecked = Array.from(itemCheckboxes).every(checkbox => checkbox.checked); selectAllCheckboxes.forEach(function (selectAllCheckbox) { selectAllCheckbox.checked = allChecked; }); calculateTotal(); }); }); // 数量变化时更新小计 document.getElementById('listBox').addEventListener('change', function (event) { if (event.target.tagName === 'INPUT' && event.target.type === 'number') { const item = event.target.parentElement.parentElement; updateSubtotal(item); } }); // 删除商品 document.getElementById('listBox').addEventListener('click', function (event) { if (event.target.classList.contains('del')) { event.preventDefault(); const item = event.target.parentElement.parentElement; item.remove(); calculateTotal(); } }); // 计算总价 function calculateTotal() { let total = 0; itemCheckboxes.forEach(function (checkbox) { if (checkbox.checked) { const item = checkbox.parentElement.parentElement; const price = parseFloat(item.querySelector('.price').textContent); const quantity = parseInt(item.querySelector('input[type="number"]').value); total += price * quantity; } }); document.getElementById('totalprice').textContent = total.toFixed(2); } // 更新小计 function updateSubtotal(item) { const price = parseFloat(item.querySelector('.price').textContent); const quantity = parseInt(item.querySelector('input[type="number"]').value); const subtotal = price * quantity; item.querySelector('.subtotal').textContent = subtotal.toFixed(2); calculateTotal(); } // 删除选中的商品 document.getElementById('delcheck').addEventListener('click', function (event) { event.preventDefault(); itemCheckboxes.forEach(function (checkbox) { if (checkbox.checked) { const item = checkbox.parentElement.parentElement; item.remove(); } }); calculateTotal(); }); document.querySelectorAll('.add-to-cart').forEach(function(button) { button.addEventListener('click', function(event) { event.preventDefault(); const product = button.closest('.product'); const imgSrc = product.querySelector('img').src; const productName = product.querySelector('p').textContent; const price = parseFloat(product.querySelector('div').textContent); // 检查商品是否已存在于购物车 let existingItem = document.querySelector(`.item img[src="${imgSrc}"]`).parentElement; if (existingItem) { // 如果已存在,则增加数量 const quantityInput = existingItem.querySelector('input[type="number"]'); quantityInput.value = parseInt(quantityInput.value) + 1; updateSubtotal(existingItem); } else { // 如果不存在,则添加新商品 const newItem = createCartItem(imgSrc, productName, price); document.getElementById('listBox').appendChild(newItem); } calculateTotal(); }); }); // 创建购物车中的商品项 function createCartItem(imgSrc, productName, price) { const item = document.createElement('div'); item.className = 'item'; item.innerHTML = ` <div><input type="checkbox" name="check" checked /></div> <div><img src="${imgSrc}" height="100" /></div> <div>${productName}</div> <div>¥<span class="price">${price.toFixed(2)}</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">${price.toFixed(2)}</span></div> <div><a href="#" class="del">删除</a></div> `; // 为新添加的删除按钮和小计数量添加事件监听 item.querySelector('.del').addEventListener('click', function(event) { event.preventDefault(); item.remove(); calculateTotal(); }); item.querySelector('input[type="number"]').addEventListener('change', function() { updateSubtotal(item); }); return item; } }); </script> </html> ,不过这段代码不是很正确,有些功能未正确实现,这是我的product.json:{ "status": "success", "data": [ { "name": "新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰", "img": "product1.jpg", "price": "5239.00" }, { "name": "新款Huawei/华为折叠手机mates xs5g版大屏双屏全面屏双面屏官方旗舰店对折手机可折叠屏 Mate XS折叠", "img": "product2.jpg", "price": "20980.00" }, { "name": "华为智慧屏V55i-A 55英寸 HEGE-550 4K超薄全面屏液晶电视机 多方视频通话AI升降摄像头 4GB+64GB 星际黑", "img": "product3.jpg", "price": "3999.00" }, { "name": "华为荣耀智能手表WATCH Magic运动男女2Pro手环定位NFC支付陶瓷版(流沙杏)", "img": "product4.jpg", "price": "699.00" } ] }它位于C:\Users\金邦鑫\Downloads\京东仿制效果\京东仿制效果\js\products.json,其中index.html要获取product.json中的数据实现内容数据的加载,你还要实现script中的全选,删除等等代码功能,注意仅仅实现script中的代码内容
最新发布
06-21
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值