分解函数的最佳方法 - JavaScript

Question

我目前正在学习 javascript 并尝试创建一个购物车系统并让它运行我创建了一个混乱的 abit 所以我只是想知道分解下面代码的最佳方法是什么感谢一组更易读的函数。

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

一些快速的事情：

将数据准备移至其他功能。
Return 如果没有要进动的数据以避免嵌套函数，则为 false。
使用简化的变量和对象属性。

如果可以直接传递表达式就不要使用变量。

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>`
    });
}

我已经对你的 fiddle 进行了分叉 https://jsfiddle.net/zhy5n8ga/

分解函数的最佳方法 - JavaScript

Best way to break up a function - JavaScript

javascript

function

shopping-cart