javascript - 如何在 jQuery Mobile 中正确分隔页面？

Question

我正在使用 jQuery Mobile 进行一些测试，并试图了解如何设置应用程序及其各种页面。理想情况下，我希望框架加载带有转换的页面，但仍保持每个页面清晰分开。特别是，似乎通过 Ajax 加载的页面不会“清除”前一页的 JavaScript 或 CSS:

示例 1 - JavaScript

例如，如果我在 page1.html 中有这样的内容:

<script>
    setInterval(function() {
        console.info('Interval' + (new Date()));
    }, 1000);
</script>

然后如果我加载 page2.html，间隔仍在运行。如果我回到 page1，一个新的间隔开始，所以现在有两个间隔运行，3 和 4，等等。每次我回到 page1。

示例 2 - CSS

另一个问题是样式。假设两个开发人员在两个不同的页面上独立工作，创建一个元素 my-element。在 page1 中，此元素的样式为:

<style>
    #my-element {
        color: red;
    }
</style>

<span id="my-element">This one is red</span>

在 page2 中，元素没有样式:

<span id="my-element">This one has no style</span>

同样，如果我先转到 page1.html 然后再转到 page2.html，my-element 最终会变成红色，即使它没有在 page2.html 中设置样式。

所以我想我有两个问题:

1. 目前，jQuery Mobile 加载页面的方法似乎根本不可扩展。 CSS、JS 在一个页面上创建，继续到下一个页面。那么有没有办法让 jQuery Mobile 加载页面“干净”。即完全删除上一页中的所有内容，以便 JS 或 CSS 不会影响下一页？

2. 如果不是，在 jQuery Mobile 中以可扩展的方式处理多个页面的正确方法是什么？

Answer 1

您所描述的行为是 JQM 工作的原因。您的 DOM 会一直存在(包括您加载的第一个页面的 js 和 css)，直到您使用“data-ajax=false”或“rel=external”加载页面，这将执行常规页面加载(无 ajax)。

通过 ajax 加载页面，您通常在 DOM 中至少有两个页面 - 您开始的页面(如 anchor 页面)和您通过 ajax 加载的任何其他页面(一旦下一页被删除，它就会被删除)加载)。

这种方法允许具有可以跨页面共享的转换和其他功能。

您仍然可以使用 js/css 轻松定位特定页面。我总是在我的应用程序中运行一个 controller.js 文件，它通过绑定(bind)到任何 JQM 事件(pagebeforeshow、pageshow ...)来处理页面特定的事情。同样对于页面特定的 css，只需使用页面 id 属性来使 css 页面特定。