jQuery Mobile-pageinit vs pageshow

Question

我对jQuery Mobile中pageinit和pageshow方法的用法有点困惑。我知道在初始化期间会调用pageinit，并且每次呈现页面时都会调用pageshow。

我有一个使用<代码>$加载数据的主页。ajax（），用于某些部分。我正在将数据加载到pageinit中。我还仅为pageinit绑定了click和swipe事件。我还注意到，当您从另一个页面返回时，不会调用pageinit。

我还有一个问题，我们使用swipe.js使用轮播-使用pageinit方法时加载不正确，但在page eshoo方法中加载时正常工作。当我们使用浏览器后退按钮时调用pageinit的原因是什么？

此外，缓存在决定加载数据、绑定事件等的逻辑放在哪里方面有任何作用吗？最好有人能解释一下主页数据的加载，然后导航并从另一个页面返回。

Answer 1

在这里找到的所有信息也可以在我的博客文章中找到，你也可以找到工作示例。

让我们从头开始。正如您已经知道的那样，jQuery开发人员为我们提供了页面事件来弥合文档就绪无法弥补的差距。虽然文档就绪可以告诉您内容已在DOM中就绪，但我们需要更多，因为jQuery Mobile仍然需要增强内容标记（增强内容样式）。

有几个页面事件，每个页面事件都有其目的。有些会在增强页面内容之前触发（如pagebeforecreate），以便添加动态内容。有些仅在页面更改期间触发，如pagebeforechange。

但让我们回到你的问题上来Pageinit是jQuery移动版的文档就绪。虽然您仍然可以使用“文档就绪”（document ready），但在页面事件之间使用相同的替代方案仍然是合乎逻辑的。

正如您已经告诉过的，您正在使用pageinit进行事件绑定（如单击或滑动事件），这是一个很好的解决方案。主要是因为jQuery Mobile遇到了一个称为“多个事件绑定”的问题。例如，如果您将单击事件绑定到一个元素，则没有什么可以阻止另一个单击事件绑定到同一元素。如果您使用page eshoo事件，就会发生这种情况。如果您在page eshoo事件期间使用事件绑定，则每次访问页面时，都会一遍又一遍地绑定相同的事件。它可以很容易地预防，但同样的预防将需要额外的处理器处理能力，与处理其余Web应用程序的能力相同。

这里我们有另一个问题（您的问题之一），那么pageshow的目的是什么？显而易见的答案是使用可用且显示的页面。虽然正确的答案并不重要<代码>页面显示（code>Pageshow）很重要，因为它是唯一可以正确计算页面高度的页面事件，而不是0。现在您可以了解为什么需要在该点初始化旋转木马。像许多其他插件（图表、图像库）一样，旋转木马需要正确的页面高度，如果您在pageshow之前初始化它们，它们的高度将为0，因此它们将存在，但您将无法看到它们。

关于上一个问题，如果应用程序构建正确，缓存不会起作用。首先，您应该始终使用委托事件绑定，因为它不关心页面元素是否存在。基本上，如果您将事件绑定到某个父元素（如文档），那么页面是缓存还是从DOM中删除并不重要。一旦它回来，同样的事件将再次发生。

例子：

$(document).on('click', '#some-button',function(){

});

此方法将click事件绑定到文档，但相同的click事件仅适用于id为“<代码>某些按钮”的元素。该元素是否存在实际上并不重要，因为文档对象将始终存在。

如果您使用普通的网页，而页面重新加载/刷新是一件常见的事情，那么同样的逻辑就不那么重要了。甚至在jQuery Mobile中，如果关闭了ajax，那么每次页面更改基本上都是页面刷新/重新加载。

我希望这能回答你所有的问题。如果你需要澄清，请在评论部分提问。

编辑：

1. 应在何处加载数据取决于需要加载的内容。如果只想在中执行一次，请使用pageinit。如果每次访问页面时都需要它，那么请使用pagebeforeshow（因为如果使用pageshow，内容会突然出现，会让用户感到困惑）。不要使用pagebeforecreate，因为内容会在活动结束后加载，所以使用它没有意义

如果要在某个时间间隔内加载内容，请使用带有setinterval函数的pageinit。每次添加动态内容时，不要忘记手动增强页面内容样式。

应将Pageinit用于事件绑定和动态内容生成。