Question

我正在编写一个基本的API文档站点，并且我的API中有大约20个端点。我坐在一个HTML页面上，侧面带有一个显示子标题的导航栏，每个子标题都有一个包含相关端点的列表，例如：

Home
    About this API

Users
    Get users
    Add users
    Delete users

Products
    ...

默认情况下，突出显示“关于此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的文章和教程，但我建议通读它们。

Answer 2

作为最初的回应，我会说这是错误的，

从基础上考虑，html是框架，css是设计，js是功能。您不应该尝试将它们混淆。如果您没有正在运行的服务器，那么我可以看到您为什么选择这种方法。请阅读服务器端渲染和把手，如果得到它们，您将很快理解您所遇到的问题

使用单个HTML页面将<div>的innerHTML替换为许多其他页面是不好的做法吗？

2 个答案: