Pure JS | Basket |關閉

Question

我正在研究一個小的JavaScript應用程序，用戶可以單擊頁面上的按鈕並將它傳遞給他們的籃子。我這樣做的問題是我不確定在同一個函數中處理多個按鈕。我不想爲每個按鈕寫出不同的功能。

我試圖做到這一點OOP和有這個至今：

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; 

我將如何確定已被點擊，以運行basket.add（數據）是什麼項目。我怎樣才能將每個項目的數據傳遞給該函數。

另外，如何實施關閉？我知道它是可以訪問外部函數變量的內部函數，到目前爲止我正在使用閉包來處理這些內容嗎？

Answer 1

好吧，你已經有了一個不錯的開端，但這裏有幾個建議：

1. 這可能是一個好主意，只有每個Item的一個實例。我的意思是它看起來像你創建一堆Item S表示來填充你的店鋪的庫存，因此，例如：

   var coat = new Item("Coat", "Warm", 20); 
   shop.items.push(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 
   }; 
   

   我希望這適用於爲什麼應該有多個集合引用的每個項目的一個實例。

   這引出了一個問題，您如何將客戶的交互與添加正確的項目聯繫起來。一種解決方案可能是使用任意ID來跟蹤項目。例如：

   // 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元素可能會有一些DIV像這樣：

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

   添加自己的點擊處理程序：

   // Pure JS solution - untested 
   var clickTargets = document.getElementsByClassName("add-product-button"); 
   for(var i = 0; i < clickTargets.length; i++) { 
       var clickTarget = clickTargets[i]; 
       clickTarget.onClick = function() { 
        var itemID = clickTarget.getAttribute("data-id"); 
        var item = shop.items[itemID]; 
   
        basket.add(item); 
       }; 
   } 
   
   // Equivalent jQuery code 
   $(".add-product-button").click(function() { 
       var id = $(this).attr('data-id'); 
       var item = shop.items[id]; 
       basket.add(item); 
   }); 
   

   雖然你的籃子實現add類似：

   basket.add = function(items) { 
       this.items.push(item); 
   }; 
   

   和你costCalculate方法得到了很多更加容易：

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

2. 而不是做這個的：

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

   您可以改爲做：

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

3. 可能是一個好主意，用一個數字而不是一個字符串來表示價格。

4. 在您的shop.print循環中，您可能不想硬編碼<div id="item">，因爲這會導致多個div具有相同的ID。

5. 最後，我不打算嘗試在這裏回答你的問題，關閉，因爲我認爲這已經回答比我已經可以所以我就聯繫你，幫助我理解一些重要的資源：

   • Best stackoverflow thread on how JS Closures work
   • MDN's doc on closures
   • Javascript: The Good Parts by Douglas Crockford。這是一本小書，講述了一些很棒的概念 - 尤其是使用原型，我懷疑你會發現這些原型可以幫助你完成這個項目。

---

讓我知道，如果你有任何問題，我完全下進行討論。