Javascript 纯JS |篮|闭合

我正在开发一个小的JavaScript应用程序，它可以让用户点击页面上的按钮并将其传递给他们的篮子。我这样做的问题是我不确定在同一个功能中处理多个按钮。我不想为每个按钮写出不同的功能

我正在尝试采用面向对象的方法，到目前为止：

var shop = {};

shop.items = [];

shop.Item = function(item, description, price) {
    this.item = item;
    this.description = description;
    this.price = price;
};

shop.print = function() {
    var itemCon = document.getElementById('items'),
        html = "";
    for(var i = 0; i < this.items.length; i++) {
        html += '<div id="item">';
        for(prop in this.items[i]) {
            html += '<p><span class="title">' + prop + '</span>: ' + this.items[i][prop] + '</p>';
        };
        html += '<button id="' + this.items[i].item + '">Add to Basket</button>'
        html += '</div>';
    };
    itemCon.innerHTML += html;
};

shop.items[shop.items.length] = new shop.Item("Coat", "Warm", "20");
shop.items[shop.items.length] = new shop.Item("Coat", "Warm", "20");
shop.items[shop.items.length] = new shop.Item("Coat", "Warm", "20");
shop.items[shop.items.length] = new shop.Item("Coat", "Warm", "20");

var basket = {};

basket.items = [];

basket.Item = function(item, description, price) {
    this.item = item;
    this.description = description;
    this.price = price;
};

basket.add = function(data) {
    this.items[items.length] = new Item(data.item, data.description, data.price);
};

basket.costCalculate = function() {
    var cost = 0,
        html = "Total: " + cost;
    for(var i = 0; i < this.items.length; i++) {
        cost += items[i].price;
    };
    return html;
};

basket.print = function() {
    var output;
    for(var i = 0; i < this.items.length; i++) {
        for(prop in this.items[i]) {
            console.log(prop + ":  " + this.items[i][prop]);
        };
    };
};

function init() {
    shop.print()
};
window.onload = init;

var-shop={}；
shop.items=[]；
shop.Item=功能（项目、说明、价格）{
this.item=项目；
this.description=描述；
这个价格=价格；
};
shop.print=函数（）{
var itemCon=document.getElementById（'items'），
html=“”；
对于（var i=0；i'；
};
html+=“添加到篮子”
html+=''；
};
itemCon.innerHTML+=html；
};
shop.items[shop.items.length]=新的shop.Item（“外套”、“保暖”、“20”）；
shop.items[shop.items.length]=新的shop.Item（“外套”、“保暖”、“20”）；
shop.items[shop.items.length]=新的shop.Item（“外套”、“保暖”、“20”）；
shop.items[shop.items.length]=新的shop.Item（“外套”、“保暖”、“20”）；
var-basket={}；
basket.items=[]；
篮子.项目=功能（项目、说明、价格）{
this.item=项目；
this.description=描述；
这个价格=价格；
};
basket.add=函数（数据）{
this.items[items.length]=新项目（data.Item，data.description，data.price）；
};
basket.costCalculate=函数（）{
风险价值成本=0，
html=“总计：”+成本；
对于（var i=0；i

如何确定单击了哪些项以运行basket.add（数据）。对于每个项目，我如何将数据传递给该函数

---

还有，如何实施关闭？我知道是内部函数可以访问外部函数的变量，到目前为止，我正在使用闭包吗？

好的，您已经有了一个很好的开始，但这里有一些建议：

每个

项只有一个实例可能是个好主意。我的意思是，看起来您创建了一堆
项目
来填充您的店铺库存，例如：

var coat = new Item("Coat", "Warm", 20);
shop.items.push(coat);

// Create new item with some randomly generated ID
var coat = new Item({
    id: "93523452-34523452",
    name: "Coat",
    description: "Warm",
    price: 20
});
shop.items = {}; // Use a hash so it's easier to find items
shop.items[coat.id] = coat;

现在，当您单击UI元素时，理想情况下您希望
coat
的这个实例也进入您的篮子，因此：

// User clicks on UI element, which triggers the following to execute:
basket.add( someItemIdentifier );

因此，如果您决定将所有价格提高10美元，您只需执行以下操作：

shop.increasePricesBy = function(amount) {
    for(var i = 0; i < shop.items.length; i++) {
        shop.items[i].price += amount;
    }
    // execute some function to update existing baskets' totals
};

您的UI元素可以是这样的div：

<div class="add-product-button" data-id="93523452-34523452">

您的
costCalculate
方法变得简单多了：

basket.costCalculate = function() {
    var cost = 0;
    for(var i = 0; i < this.items.length; i++) {
        cost += this.item[i].price;
    }
    return cost;
};

您可以改为：

shop.items.push(new shop.Item("Coat", "Warm", "20");

用数字代替字符串来表示价格可能是个好主意

在

shop.print

循环中，您可能不想硬编码

，因为这将导致多个具有相同id的div

最后，我不打算在这里回答你的结束语问题，因为我认为这个问题的答案比我已经能回答的好，所以我将把你链接到一些帮助我理解它的伟大资源：

• 。这是一本很小的书，讲述了一些很棒的概念——特别是与原型的合作，我想你会发现这些原型对帮助你完成这个项目很有用

---

---

如果您有任何问题，请告诉我，我很乐意与您讨论。

谢谢您的快速回复。我几乎完全理解你所说的，它非常有用。我唯一不明白的部分是：$（“.add product button”）。单击（function（）{var id=$（this.attr（'data-id'）；var item=shop.items[id]；basket.add（item）；）；。这不是Jquery吗？你说得对。我没有读你问题中要求纯JS的部分。更新了我的答案，将两者都包括在内，因为其中一个比另一个读起来更好：）非常感谢您的帮助，您极大地帮助我进一步了解了JavaScript的编码实践。道格拉斯·克罗克福德在文章和视频中有一些有用的东西，但应该给出警告；他称之为“经典继承”的东西，他从来没有做得正确，但他没有做得正确，而是吹嘘JavaScript。因此，最好跳过关于经典继承的部分。

basket.costCalculate = function() {
    var cost = 0;
    for(var i = 0; i < this.items.length; i++) {
        cost += this.item[i].price;
    }
    return cost;
};

shop.items[shop.items.length] = new shop.Item("Coat", "Warm", "20");

shop.items.push(new shop.Item("Coat", "Warm", "20");