如何在jQuery移动中正确地分离页面?

I'm doing some tests with jQuery Mobile and trying to figure out how to setup an application and its various pages. Ideally, I would like the framework to load the pages with transitions but still keep each pages clearly separated. In particular, it seems that a page loaded via Ajax doesn't "clear" the JavaScript or CSS of the previous page:

我正在用jQuery Mobile做一些测试，并试图找出如何设置应用程序及其各种页面。理想情况下，我希望框架能够将页面加载到转换中，但仍然将每个页面分隔开。特别是，通过Ajax加载的页面似乎没有“清除”上一页的JavaScript或CSS:

Example 1 - JavaScript

示例1 - JavaScript

For instance, if I have something like this in page1.html:

例如，如果我在page1.html中有这样的东西:

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

Then if I load page2.html, the interval is still running. If I go back to page1, a new interval is started so there are now two intervals running, and 3 and 4, etc. every time I go back to page1.

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

Example 2 - CSS

2 - CSS例子

Another issue is with styling. Let's say two developers, working independently on two different pages, create an element my-element. In page1, this element is styled:

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

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

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

in page2, the element is not styled:

在page2中，元素没有样式化:

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

Again, if I go to page1.html first and then page2.html, my-element ends up being red, even though it wasn't styled in page2.html.

同样，如果我去page1。首先是html，然后是page2。html, my-element最终是红色的，即使它不是在page2.html中样式。

So I guess I have two questions:

我想我有两个问题

Currently it seems that jQuery Mobile approach to loading pages is not scalable at all. CSS, JS created on one page, carry on to the next. So is there any way to make jQuery Mobile load pages "cleanly". i.e. completely deleting everything from the previous page so that bits of JS or CSS don't affect the next page?

目前看来，jQuery移动加载页面的方法根本不具有可扩展性。在一个页面上创建的CSS, JS，继续到下一个页面。还有什么方法可以让jQuery移动加载页面“干净”呢?也就是说，完全从上一页删除所有内容，这样JS或CSS的位就不会影响下一页了?
If not, what is the correct way to work with multiple pages, in a scalable way, in jQuery Mobile?

如果不是，在jQuery Mobile中以可伸缩的方式处理多个页面的正确方法是什么?

1 个解决方案

#1

the behavior you are describing is what makes JQM work. your DOM persists (including js and css of the first page you load), until you load a page using 'data-ajax=false' or 'rel=external' which will do a regular page load (no ajax).

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

By loading the page via ajax you will mostly have at least two pages in the DOM - the page you started on (like an anchor page) and any other page you are loading via ajax (which gets removed once the next page is loaded).

通过ajax加载页面，您在DOM中通常至少有两个页面——您开始的页面(比如锚点页面)和通过ajax加载的任何其他页面(在加载下一个页面时将被删除)。

this approach allows to have transitions and other functions which you can share across pages.

这种方法允许您具有跨页面共享的转换和其他函数。

still you can easily target specific pages with js/css. I'm always runnimg a controller.js file in my applications, which handles page specific things by binding to any of the JQM events (pagebeforeshow, pageshow...). Likewise for page specific css, just use the page id attribute to make css page specific.

仍然可以使用js/css轻松地锁定特定页面。我总是runnimg控制器。我的应用程序中的js文件，它通过绑定到任何JQM事件来处理页面特定的事情(pagebe前述how, pageshow…)。同样，对于页面特定的css，只需使用页面id属性使css页面特定。

#1