使用对象标签在另一个HTML中显示网页的更好方法，而无需使用jQuery，只需简单的JavaScript即可

Question

我有一个仪表板，当单击适当的按钮时，我只想更改页面的一部分。尽管此代码有效，但它看起来很粗糙，但我尝试使用一些正则表达式，但是似乎在对象标签失败时具有一些限制。下面的JavaScript代码

// This handles the initial dashboard navigation and changes the main id with only the called page
function dashboard(id) {
     main = document.getElementById('main');
switch(id) {
    case 'newMail':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/sendMail.html"></object>';
    case 'inbox':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/inboxList.html"></object>';
    case 'sent':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/sentList.html"></object>';
    case 'draft':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/draftList.html"></object>';
    case 'deleted':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/deletedList.html"></object>';
    case 'retracted':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/retractedList.html"></object>';
    case 'createGroup':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/createGroup.html"></object>';
    case 'groupList':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/groupList.html"></object>';
    case 'groupMessage':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/groupMessage.html"></object>';
    case 'profile':
        return main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/profile.html"></object>';
    default:
        return document;
    }
}

Answer 1

使用 case s索引的对象，其值是在 .html之前出现的适当字符串。例如：

const pageNamesById = {
  newMail: 'sendMail',
  inbox: 'inboxList',
  sent: 'sentList',
  draft: 'draftList',
  deleted: 'deletedList',
  retracted: 'retractedList',
  createGroup: 'createGroup',
  // etc
};
function dashbord(id) {
  const main = document.getElementById('main');
  const pageName = pageNamesById[id];
  if (pageName) {
    main.innerHTML = '<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/' + pageName + '.html"></object>';
  }
}

Answer 2

这样怎么样？共同分组。

const template = (action) => `<object type="text/html" data="file:///home/tochie/andela_challenge/UI/html/dashboard/${action}.html"></object>`;
// This handles the initial dashboard navigation and changes the main id with only the called page
function dashboard(id) {
  main = document.getElementById('main');
  switch (id) {
    case 'newMail':
      return main.innerHTML = template("sendMail");
    case 'inbox':
    case 'sent':
    case 'draft':
    case 'deleted':
    case 'groupList':
    case 'retracted':
      return main.innerHTML = template(`${id}List`);
    case 'createGroup':
    case 'groupMessage':
    case 'profile':
      return main.innerHTML = template(id);
    default:
      return document;
  }
}
console.log(dashboard('newMail'));
console.log(dashboard('inbox'));
console.log(dashboard('deleted'));
console.log(dashboard('groupMessage'));

<div id="main"></div>