javascript - 使用单个 HTML 页面将 的 innerHTML 替换为许多其他页面是否是一种不好的做法？

Question

我正在编写一个基本的 API 文档站点，我的 API 中有大约 20 个端点。我选择了一个 HTML 页面，旁边有一个导航栏，显示副标题，每个都有一个包含相关端点的列表，例如:

Home
    About this API

Users
    Get users
    Add users
    Delete users

Products
    ...

默认情况下，“about this api”被高亮显示，其本地 HTML 页面被读入到侧边栏右侧的空 div 中。

window.onload = function () {

    // Default page
    addContent("content/api/about_api.html", "content");
};

function addContent(page, element) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", page, true);
    xhr.onreadystatechange = function () {
        document.getElementById(element).innerHTML = this.responseText;
    };
    xhr.send();
}

当单击列表元素时，突出显示会移动到该选项，并使用新页面调用相同的函数，该页面作为数据属性存储在元素中。

一切正常并且响应迅速，但我想知道这是否是一种不好的做法？您会推荐一种不同的方法吗？

Answer 1

这不是坏习惯，实际上它很常见，被称为单页应用程序。

虽然有一些方面需要考虑，例如如果您不希望您的 SPA 被正确编入索引，则搜索引擎的可访问性。虽然有很多关于 SPA 的文章和教程，但我建议通读它们。