如何用javascript和HTML解决这个对象加载问题_Javascript_Html

如何用javascript和HTML解决这个对象加载问题

javascript html

如何用javascript和HTML解决这个对象加载问题,javascript,html,Javascript,Html,我正在开发一个web应用程序，目前我正在使用javascript。我试图解决的问题是，我有三个不同的对象，只有一个HTML页面。根据用户单击事件，我希望所选类别的对象加载并显示在同一页面上。例如，假设用户在主页上，如果他们从导航栏中单击category A，则首先加载页面，然后脚本将对象加载到数据结构中。最后，将它们显示到javascript生成的HTML容器中。在触发用户单击事件后，其他类别也会发生同样的情况。更确切地说，我希望能够为不同的对象重用HTML页面，而不必为每个类别创建页面我已经

我正在开发一个web应用程序，目前我正在使用javascript。我试图解决的问题是，我有三个不同的对象，只有一个HTML页面。根据用户单击事件，我希望所选类别的对象加载并显示在同一页面上。例如，假设用户在主页上，如果他们从导航栏中单击category A，则首先加载页面，然后脚本将对象加载到数据结构中。最后，将它们显示到javascript生成的HTML容器中。在触发用户单击事件后，其他类别也会发生同样的情况。更确切地说，我希望能够为不同的对象重用HTML页面，而不必为每个类别创建页面

我已经为我想要加载的n个对象创建了执行所有数据加载和HTML生成的代码。当我在对象的页面上时，代码工作正常，但是如果事件是从另一个页面触发的，则似乎什么也没有发生。我猜这与页面加载时间有关

我已经发布了我正在处理的部件的完整代码

var dataController = (function() {
  var JSONurls = {
    bags: "../JSON/bags.json",
    bc: "../JSON/briefcases.json",
    belts: "../JSON/belts.json",
    accs: "../JSON/accs.json",
  };

  ProductObj = function(name, des, colors, price, pics, type, ID) {
    this.name = name;
    this.description = des;
    this.colors = colors;
    this.price = price;
    this.pics = pics;
    this.type = type;
    this.ID = ID;
  };

  var dataStruc = {
    allProducts: {
      bags: [],
      briefcases: [],
      belts: [],
      accessories: [],
    },
  };

  return {
    addProd: function(obj) {
      var newProd, ID;

      if (dataStruc.allProducts[obj.type].length > 0) {
        ID =
          dataStruc.allProducts[obj.type][
            dataStruc.allProducts[obj.type].length - 1
          ].ID + 1;
      } else {
        ID = 0;
      }

      newProd = new ProductObj(
        obj.name,
        obj.description,
        obj.colors,
        obj.price,
        obj.pics,
        obj.type,
        obj.ID
      );

      dataStruc.allProducts[obj.type].push(newProd);

      return newProd;
    },

    getDataStruct: function() {
      return dataStruc;
    },

    getJsonUrls: function() {
      return JSONurls;
    },

    loadJSON: function(url, cat, callback) {
      var requestURL, request, JsonObj;

      requestURL = url;

      request = new XMLHttpRequest();

      request.open("GET", requestURL);

      request.responseType = "text";

      request.send();

      request.onload = function() {
        JsonObj = JSON.parse(request.response);

        dataStruc.allProducts[cat] = JsonObj[cat];

        callback(cat);
      };
    },
  };
})();

var UIcontroller = (function() {
  var DomStrings = {
    shopCatg: ".shop-catg",
    productCont: ".product-container",
  };

  //public methods
  return {
    // function display the object based on the category based on the event target

    displayObjectToPage: function(cat) {
      var deafultHtml;

      // 1. loop over the product category

      dataController.getDataStruct().allProducts[cat].forEach(function(cur) {
        deafultHtml =
          '<div class="col-lg-4 col-md-6 col-sm-10">' +
          '<img class="img-fluid" src="../img/' +
          cur.type +
          "/" +
          cur.pics[0] +
          '.jpg">' +
          '<h6 class="text-center">' +
          cur.name +
          "</h6>" +
          '<div class="text-center text-muted">' +
          cur.price +
          "</div>" +
          "</div>";

        document
          .querySelector(DomStrings.productCont)
          .insertAdjacentHTML("beforeend", deafultHtml);
      });
    },

    getDomStrings: function() {
      return DomStrings;
    },
  };
})();

var mainController = (function(UIctrl, dataCrtl) {
  var setUpEvents = function() {
    var doneLoading = false;

    var DOM = UIctrl.getDomStrings();

    document.querySelector(DOM.shopCatg).addEventListener("click", function() {
      InitializeData(event, function(cat) {
        UIcontroller.displayObjectToPage(cat);
      });
    });
  };

  InitializeData = function(event, callback) {
    var category = event.target.textContent;

    if (event.target.textContent === "bags") {
      dataController.loadJSON(
        dataController.getJsonUrls().bags,
        category,
        callback
      );
    } else if (event.target.textContent === "briefcases") {
      dataController.loadJSON(dataController.getJsonUrls().bags, "briefcases");
    } else if (event.target.textContent === "belts") {
      dataController.loadJSON(dataController.getJsonUrls().bags, "belts");
    } else {
      dataController.loadJSON(dataController.getJsonUrls().bags, "accs");
    }
  };

  displayObject = function() {};
  return {
    init: function() {
      setUpEvents();
    },
  };
})(UIcontroller, dataController);

mainController.init();

var-dataController=（函数（）{
var JSONurls={
bags:“../JSON/bags.JSON”，
bc:“../JSON/briefcases.JSON”，
皮带：“../JSON/belts.JSON”，
accs:“../JSON/accs.JSON”，
};
ProductObj=函数（名称、des、颜色、价格、图片、类型、ID）{
this.name=名称；
this.description=des；
这个。颜色=颜色；
这个价格=价格；
this.pics=pics；
this.type=type；
this.ID=ID；
};
变量数据结构={
所有产品：{
行李：[]，
公文包：[]，
皮带：[]，
附件：[]，
},
};
返回{
addProd：功能（obj）{
var newProd，ID；
if（dataStruc.allProducts[obj.type].length>0）{
身份证=
dataStruc.allProducts[对象类型][
dataStruc.allProducts[obj.type].长度-1
].ID+1；
}否则{
ID=0；
}
newProd=newproductobj(
对象名称，
对象描述，
对象颜色，
对象价格，
obj.pics，
对象类型，
对象ID
);
dataStruc.allProducts[obj.type].push（newProd）；
返回newProd；
},
getDataStruct:function（）{
返回数据结构；
},
getJsonUrls:function（）{
返回JSONurls；
},
loadJSON:函数（url、cat、回调）{
var requestURL，request，JsonObj；
requestURL=url；
请求=新的XMLHttpRequest（）；
打开（“GET”，requestURL）；
request.responseType=“text”；
request.send（）；
request.onload=函数（）{
JsonObj=JSON.parse（request.response）；
dataStruc.allProducts[cat]=JsonObj[cat]；
回调（cat）；
};
},
};
})();
var UIcontroller=（函数（）{
var DomStrings={
shopCatg:“.shopCatg”，
productCont:“.产品容器”，
};
//公共方法
返回{
//函数根据事件目标的类别显示对象
DisplayObjectTopPage:功能（cat）{
var死亡TML；
//1.在产品类别上循环
dataController.getDataStruct（）.allProducts[cat].forEach（函数（cur）{
致命的=
'' +
'' +
'' +
当前名称+
"" +
'' +
当前价格+
"" +
"";
文件
.querySelector（DomStrings.productCont）
.insertAdjacentHTML（“结束前”，死亡TML）；
});
},
getDomStrings:function（）{
返回字符串；
},
};
})();
var mainController=（函数（UIctrl、dataCrtl）{
var setUpEvents=函数（）{
var doneLoading=false；
var DOM=UIctrl.getDomStrings（）；
document.querySelector（DOM.shopCatg）.addEventListener（“单击”，函数（）{
初始化数据（事件、函数（cat）{
UIcontroller.DisplayObjectTopPage（cat）；
});
});
};
InitializeData=函数（事件、回调）{
var category=event.target.textContent；
如果（event.target.textContent==“行李”）{
dataController.loadJSON(
dataController.getJsonUrls（）.bags，
类别
回拨
);
}else if（event.target.textContent==“公文包”）{
loadJSON（dataController.getJsonUrls（）.bags，“公文包”）；
}else if（event.target.textContent==“皮带”）{
loadJSON（dataController.getJsonUrls（）.bags，“belt”）；
}否则{
dataController.loadJSON（dataController.getJsonUrls（）.bags，“accs”）；
}
};
displayObject=function（）{}；
返回{
init:function（）{
setUpEvents（）；
},
};
})（UIcontroller，数据控制器）；
mainController.init（）；

我不确定，但我注意到了这个潜在问题：

request.send();
request.onload = function() {
  // ...
}

我相信当您调用

send

时，请求应该异步启动。如果请求在分配

onload

之前返回，您可能会看到它被跳过。不过，我已经好几年没有直接使用XHR了

通常，在调用

send（）

之前，您希望添加

onload

回调以避免此问题

我还注意到回调函数的参数中缺少

事件

：

                                                                       ▽
document.querySelector(DOM.shopCatg).addEventListener("click", function() {
                 ▽ event is undefined
  InitializeData(event, function(cat) {
    UIcontroller.displayObjectToPage(cat);
  });
});

我不确定，但我注意到了这个潜在的问题：

request.send();
request.onload = function() {
  // ...
}