Question

我想知道如何改善SPA电子商务视图管理。我用这样的JQuery和load（）显示视图：

    const displayCategory = (category) => {
       activeCategory = category;
       $app.fadeOut(()=>{
          $app.load('./views/' + activeCategory + '/' + activeCategory + '1.html', ()=>{
             $app.fadeIn();
          });
       });
    return activeCategory
    }

    $dresses.click(()=>{ 
       displayCategory("dresses");
    });

    $previouspage.click(()=>{
    $app.fadeOut(()=>{
        if (count < 2) { count = 2}
        $app.load('./views/' + activeCategory + '/' + activeCategory + --count + '.html', ()=>{
            $app.fadeIn();
        });
    });
});

这很好，但是我必须在项目中创建很多HTML页面，当前要显示18个项目，而我手写了3个项目的6个视图：

<div class="card-deck mx-auto">
    <div class="card">
      <img class="card-img-top zoom" src="assets/items/dresses/pic1.jpg" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Dress 1</h5>
        <p class="card-text">Dress description</p>
        <p class="card-text"><button
          class="snipcart-add-item btn btn-outline-secondary"
          data-item-id="1"
          data-item-name="White dress"
          data-item-price="30.00"
          data-item-weight="20"
          data-item-url="http://myapp.com/products/dress1"
          data-item-description="A nice dress for a nice weather">
          Buy
          </button></p>
      </div>
    </div>
    <div class="card">
    <img class="card-img-top zoom" src="assets/items/dresses/pic2.jpg" alt="Card image cap">

这种方式很痛苦，在添加项目时我不会有500个html视图，要花一些时间才能在这些视图中创建这些卡片和按钮。我不知道该如何进行？我对Class＆构造函数不友好，但我想创建一个CardDeck类和另一个Card类，例如：

let a = new Card(image, data-item-description, data-item-id, data-item-name, data-item-price, data-item-url, data-item-weight)
let b = new Card(image, data-item-description, data-item-id, data-item-name, data-item-price, data-item-url, data-item-weight)
let c = new Card(image, data-item-description, data-item-id, data-item-name, data-item-price, data-item-url, data-item-weight)
let newView = new CardDeck(a,b,c)

或者：

let a = new Card(image, {allTheDataItemsProps})
//* idk if its even posible

这些方法是好方法还是更好的方法？如果这样还不错，有人可以给我一个如何编写Card（）类的想法吗？

此处的完整代码https://github.com/loydfassi/projects/tree/master/project3 或最终渲染图：https://loydfassi.github.io/projects/project3/

非常感谢！编辑：我不会使用JSON

如何使用JQuery

0 个答案: