分解JavaScript的最佳方式

Question

im目前正在学习javascript，并试图创建一个购物车系统并使其工作，我创建了一个有点混乱的系统，所以我只是想知道什么是将下面的代码分解为一组更可读的函数的最佳方法，谢谢。

function updateModal() {
let cartProducts = sessionStorage.getItem("foodInCart");
cartProducts = JSON.parse(cartProducts);
let totalPriceValue = 0
totalPriceValue = sessionStorage.getItem("totalPrice")
let cartModalProduct = document.querySelector('.product');
let cartModalPrice = document.querySelector('.price');
let cartModalQuantity = document.querySelector('.quantity');
let cartModalTotalPrice = document.querySelector('.total-price')
if (cartProducts !== null) {
cartModalProduct.innerHTML = '';
Object.values(cartProducts).map(food => {
let productName = `<div class="productName">${food.name}</div>`
cartModalProduct.innerHTML = productName;
let productPrice = `<div class="productPrice">${food.price}</div>`
cartModalPrice.innerHTML = productPrice;
let productQuantity = `<div class="productQuantity">${food.inCart}</div>`
cartModalQuantity.innerHTML = productQuantity;
let totalPrice = `<div class="totalPrice">${totalPriceValue}</div>`
cartModalTotalPrice.innerHTML = totalPrice
});
}

}

我的完整js代码在这里=https://jsfiddle.net/Birrellc/3w0shaom/

感谢

Answer 1

几个快速的事情：

1. 将数据准备移动到其他功能。

2. 如果没有要处理的数据以避免嵌套函数，则返回false。

3. 使用简化的变量和对象特性。

4. 若可以直接传递表达式，就不要使用变量。

   const getCartData = () => ({
   products: JSON.parse(sessionStorage.getItem("foodInCart")),
   priceValue: sessionStorage.getItem("totalPrice") || 0,
   product: document.querySelector('.product'),
   price: document.querySelector('.price'),
   quantity: document.querySelector('.quantity'),
   totalPrice: document.querySelector('.total-price')
   })
   
   function updateModal() {
   let cart = getCartData()
   if (cart.products == null) { return false }
   cart.product.innerHTML = '';
   Object.values(cart.products).map(food => {
   cart.product.innerHTML = `<div class="productName">${food.name}</div>`;
   cart.price.innerHTML = `<div class="productPrice">${food.price}</div>`;
   cart.quantity.innerHTML = `<div class="productQuantity">${food.inCart}</div>`;
   cart.price.innerHTML = `<div class="totalPrice">${cart.totalPrice}</div>`
   });
   }
   

我已经把你的钱交给了你https://jsfiddle.net/zhy5n8ga/