在vanilla JavaScript中使用数组和对象创建一个购物车

建立一个购物车可以通过各种方式进行。在本教程中，我将向你展示如何使用数组和对象来制作一个购物车。

方法

最初，你有一个策划好的购物项目的列表。
每个项目都有一个计数器变量。
你在将物品添加到购物车时减少或增加该计数器。

我们将使用Javascript事件监听器来处理这些活动。

首选项

为了跟上本教程，你需要了解以下JavaScript方法。

[Array.push()]
[Array.pop()]
[EventTarget.addEventListener()]

基础Html

在工作目录中创建一个新的文件index.html 。在你的代码编辑器中，打开index.html 文件并添加以下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrapper">
       <div id="container">
           <h1>Shopping list</h1>
           <div id="items"></div>
       </div>
        <div id="container">
            <h1>Cart</h1>
            <div id="cart"></div>
        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>

创建项目库

在工作目录中创建一个新的文件script.js 。

在你的代码编辑器中，打开script.js 文件并添加下面的代码。

let items_array = [
    { "name": "carrots", "id": 1, count: 1 },
    { "name": "spinach", "id": 2, count: 1 },
    { "name": "cookies", "id": 3, count: 1 },
    { "name": "lettuce", "id": 4, count: 1 },
    { "name": "avocado", "id": 5, count: 1 }
];

let cart = [];

items_array 是一个对象数组，它将被显示出来供人选择。每个对象都有一个name 和id 属性。items_array 也有一个count 属性，它是将在购物车中使用的项目的数量。

购物车是一个空数组，它将存储将从购物车中选择的物品。

创建基础函数

让我们做几个函数来使我们的生活更容易一些。

将以下代码添加到script.js 。

function appendNode(parent, element) {
    parent.appendChild(element);
};

function getDiv(container) {
    return document.getElementById(container);
};

function createNode(node) {
    let element = document.createElement(node);
    return element;
};

我们已经创建了3个函数。

appendNode 函数将把一个新的节点追加到父节点上。它将接受父节点和新节点作为参数。
getDiv 函数将返回带有容器ID的div元素。
createNode 函数将创建一个新的节点并返回它。它将接受一个节点作为参数。

我们将使用这些函数来创建DOM中的购物清单和购物车。

显示购物清单

我们将创建一个将显示购物清单的函数。

将以下代码添加到script.js 。

function displayItems(items, container) {
    let items_container = getDiv(container);
    items_container.innerHTML = '';

    for (let i = 0; i < items.length; i++) {
        let item = items[i];

        let item_node = createNode("li");
        item_node.setAttribute("id", item.id);

        if (item.count > 0) {
            item_node.innerHTML = `${item.name} 
            <span id="badge">${item.count}</span>`;
            appendNode(items_container, item_node);
        }
    }
}

displayItems 函数将接受 items 数组和容器 ID 作为参数。它将在DOM中显示这些项目。

该函数将遍历 items 数组，并为每个项目创建一个新节点。它将把节点的id设置为项目的id。然后，displayItems 函数将把该节点追加到容器中。

如果你仔细观察，你会发现我们正在使用setAttribute 方法来设置节点的属性。setAttribute 是一个内置的方法，用于向节点添加属性。你可以在这里阅读更多关于它的信息。

displayItems 在更新列表之前，还通过将容器的innerHTML 属性设置为空来清除这些列表。这样做是为了避免以前的项目被显示出来。

items_container.innerHTML = '';

现在你应该继续调用displayItems 函数来显示项目列表。

在script.js 中添加以下一行。

displayItems(items_array, "items");

一个小小的CSS

在这一点上，显示的列表看起来非常基本。让我们来解决这个问题。

在你的代码编辑器中，打开index.html 文件，在<style> 标签中添加以下代码。

#wrapper { 
    display: flex;
    } 
li{ 
    width: 100px; 
    height: 30px; 
    list-style: none; 
    background-color: rgb(1, 4, 49); 
    border-radius: 10px; 
    margin: 5px; 
    padding: 5px; 
    color: white; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
#badge {
     width: 20px; 
     height: 20px; 
     background-color: #f0ad4e; 
     color: white; 
     padding: 2px 2px; 
     border-radius: 5px; 
     margin-left: 10px; 
     text-align: center; 
     float: right; 
     } 
#items #badge { /* hides the count badge on the shopping list */ 
    display: none; 
} 
#container { 
    margin: 50px;
}

看看你的购物清单的新外观。我想它看起来更好了。

从购物车中添加和删除物品

我们将创建一个函数，将一个项目添加到购物车中。

将以下代码添加到script.js 。

function addOrRemoveItemsFromCart(action) {
    let container = '';

    if (action == "add") {
        container = getDiv("items");

        takeAction(container)
    }
    else if (action == "remove") {
        container = getDiv("cart");

        takeAction(container)
    };
}

我们创建一个函数addOrRemoveItemsFromCart ，它将接受一个动作作为参数。如果活动是 "添加"，该项目将被添加到购物篮中。如果活动是 "删除"，则该物品将从购物篮中删除。

为了检查行动，我们使用了一个if else 语句。如果动作是 "添加"，我们将物品容器传递给takeAction 函数，如果动作是 "删除"，则传递给购物车容器。我们将在监听点击事件时参考这一点。

我们将使用getDiv 函数来获取要使用的容器。我们将使用takeAction 函数来添加或删除购物车中的物品。

要创建takeAction 函数，请将下面的代码添加到script.js 。

注意：你可以在addOrRemoveItemsFromCart 函数内创建takeAction 函数，也可以在它之外创建。这两者之间的区别是，当你在函数内部创建它时，takeAction() 不能在函数之外被访问。简而言之，它不能被重复使用。

在这个例子中，我们将在addOrRemoveItemsFromCart 函数内创建takeAction 函数。

function addOrRemoveItemsFromCart(action) {
    // code in the previous block is still there

    function takeAction(container) {
        container.addEventListener("click", function (event) {
            let item_id = event.target.id;

            if (item_id !== "items" && item_id !== "badge") {
                let item = items_array.filter(function (item) {
                    return item.id == item_id;
                })[0];

                let item_in_cart = cart.filter(function (item) {
                    return item.id == item_id;
                })[0];

                if (item_in_cart == undefined) {
                    cart.push(item);
                } else if (action == "add") {
                    item_in_cart.count++;
                } else if (action == "remove") {
                    item_in_cart.count--;
                }

                console.log(cart);
                displayItems(cart, "cart");
            };
        });
    };
}

addEventListener 方法被用来向容器添加一个事件监听器。当用户点击项目时，事件监听器被调用。我们将使用event.target.id 来获取项目的ID。

我们检查该物品是否已经在购物车中。如果是这样的话，我们将从购物篮中添加或删除该物品。我们通过递增或递减项目的count 属性来做到这一点。

最后，我们调用displayItems 函数来显示购物车中最新的物品列表。

剩下的部分是调用addOrRemoveItemsFromCart 函数。

添加以下代码到script.js 。

addOrRemoveItemsFromCart('add');
addOrRemoveItemsFromCart('remove');

传递 "添加 "或 "删除 "作为动作将。

听取对items 容器的点击。
调用takeAction 函数，将物品添加到购物车中。
调用displayItems 函数来显示购物车中最新的物品列表。
听取对cart 容器的点击。
调用takeAction 函数将物品从购物车中删除。

总结

我希望你能从这篇文章中学到一些东西。我也愿意相信，从头开始创建购物车是一件很有趣的事情，就像我一样。

如何在vanilla JavaScript中使用数组和对象创建一个购物车

在vanilla JavaScript中使用数组和对象创建一个购物车

方法

首选项

基础Html

创建项目库

创建基础函数

显示购物清单

一个小小的CSS

从购物车中添加和删除物品

总结