时间戳

首页 > 解决方案 > 如何从我的 html 文件访问我的 JavaScript 类？

javascript - 如何从我的 html 文件访问我的 JavaScript 类？

问题描述

我有一个购物页面，在我添加搜索功能之前一切正常。

我的 JavaScript 文件是使用以下类构建的：

这使事情按正确的顺序进行 => 获取产品（从 JSON 文件中），将产品存储在localStorage其中并在需要时获取它们localStorage。

在我的 HTML 中，我有一些按钮，您可以在其中选择产品的类别。我将这些设置为onclick => performTask.

由于我还没有找到如何输入UI{displayProducts}（这正是我想要的，因为这是按下按钮时唯一真正应该发生的事情 - 显示正确的产品） - 我在我的 js 中创建了一个新功能 -文件。这个功能非常有效DOMContentLoaded，起初，它似乎工作得非常好，直到您重新启动应用程序几次并尝试更改购物车中的一些产品或删除购物车中的所有项目。

例如，如果我想添加购物车中已有商品的额外副本，则该值不会加一，而是加一加购物车中的所有商品。如果我尝试删除购物车中的所有物品，我将不得不重复多次，因为我已经重新启动并向应用程序添加了东西。

因此，我想知道我是否可以以某种方式UI{displayProducts}直接从我的 HTML 文件中访问该类，并在 UI 类中添加过滤器以显示正确的产品？如何？有更好的解决方案吗？

当然，如果你愿意，我可以添加一些代码，只要让我知道是哪一部分，因为代码很长。

class Products {
    async getProducts(){
        try{
            const res = await fetch('/data/products.json');
            const data = await res.json();
            let products = data.items;
            products = products.map(item => {
                const {id,category,title,color,price} = item;
                const image = item.image.url;
                return {id,category,title,color,price,image}
            })
            return products;
        }catch(err){
            console.log(err)
        }
    }
}

class UI {
    displayProducts(products){
        // This is where the products get displayed
    }
}

class Storage {
  static saveProducts(products) {
    localStorage.setItem("products", JSON.stringify(products));
  }
  static getProduct(id) {
    let products = JSON.parse(localStorage.getItem("products"));
    return products.find((product) => product.id === id);
  }
  static saveCart(cart) {
    localStorage.setItem("cart", JSON.stringify(cart));
  }
  static getCart() {
    return localStorage.getItem("cart")
      ? JSON.parse(localStorage.getItem("cart"))
      : [];
  }
}

document.addEventListener('DOMContentLoaded',()=>{
  const ui = new UI();
  const products = new Products();
  ui.setupAPP();
  products
    .getProducts()
    .then((products) => {
      ui.displayProducts(products);
      Storage.saveProducts(products);
    })
})

HTML

<ul class="dropdown">
    <li class="category-button" onclick="displaySearch(new UI, new Products, 'beds')"><a href="#hidden">beds</a></li>
    <li class="category-button" onclick="displaySearch(new UI, new Products, 'sofas')"><a href="#hidden">sofas</a></li>
    <li class="category-button" onclick="displaySearch(new UI, new Products, 'dressers')"><a href="#hidden">dressers</a></li>
    <li class="category-button" onclick="displaySearch(new UI, new Products, 'news')"><a href="#hidden">news</a></li>
</ul>

转到“新”功能displaySearch（我宁愿不使用）。

标签： javascripthtmlfunctionclassdom

解决方案

你的代码

您的代码中有两个主要内容立即引起了我的注意。几个非常简单的修复，所以你不需要重写任何东西。

构造函数（我认为您不需要任何构造函数）

正如我在上面的帖子中详述的那样，如果在创建类的实例时需要实例化任何东西，您将需要向您的类添加构造函数。如果您的构造函数按照您的计划将如下所示：constructor() {}或者constructor(val1, val2) {}您不需要一个，因为解释器默认会添加它，但是如果您计划在new UI();运行该行的那一刻执行任何操作，那么您必须有一个。

通过函数解析类

在您的 html 中，您有：onclick="displaySearch(new UI, new Products, 'beds')".
因为Product()和UI()类的每个实例都不会改变，所以每次运行这个函数时创建另一个实例是很麻烦的，我不相信你可以在这样的函数周围传递一个实例。相反，您应该在displaySearch()函数上方创建这些实例，使它们全局可用于该函数。

下面是我的意思的一个例子：

uiClass = new UI(); // these variables can be used anywhere in the code now
productsClass = new Products(); // ^^^^^^^

/** TO ENABLE SEARCH-FUNCTION **/
function displaySearch(search) {

    var products = productsClass.getProducts() // make a local variable products equal to the result of the getProducts() method. Then continue as was.
       
    .....
   
}

推荐阅读