jQuery Mobile - pageinit 与 pageshow

Question

我对在 jQuery Mobile 中使用 pageinit 和 pageshow 方法感到有些困惑。我知道在初始化期间会调用pageinit，而每次呈现页面时都会调用pageshow。

我有一个主页，它使用$.ajax() 为某些部分加载数据。我正在将数据加载到pageinit。我还为pageinit 绑定了点击和滑动事件。我还注意到，当您从另一个页面返回时，不会调用 pageinit。

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

此外，缓存在决定将加载数据、绑定事件等逻辑放置在何处方面是否起任何作用？如果有人可以解释说加载主页数据，然后导航并从另一个页面返回，那将是最好的。

Answer 1

简介

在这里找到的所有信息也可以在我的博客 ARTICLE 中找到，您还可以找到工作示例。

pageinit 和 pageshow 的区别

让我们从头开始。如您所知，jQuery 开发人员为我们提供了页面事件来弥补文档准备无法填补的空白。虽然 document ready 可以告诉您内容在 DOM 中已经准备就绪，但我们需要的不仅仅是这些，因为 jQuery Mobile 仍然需要增强内容标记（增强内容样式）。

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

但是让 as 回到你的问题。 Pageinit 是 document ready 的 jQuery Mobile 版本。虽然您仍然可以使用 document ready，但在页面事件中使用相同的替代方案仍然是合乎逻辑的。

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

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

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

例子：

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

});

此方法会将单击事件绑定到文档，但相同的单击事件仅适用于 ID 为“some-button'”的元素。该元素是否存在并不重要，因为文档对象将始终存在。

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

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

编辑：

1. 您应该在哪里加载数据取决于您需要加载什么。如果您只想执行一次，请使用 pageinit。如果您在每次访问页面时都需要它，请使用 pagebeforeshow（因为如果您使用 pageshow，内容会突然出现并且可能会混淆用户）。请勿使用 pagebeforecreate，因为内容会在活动结束后加载，所以使用它没有意义。

如果您想在某个时间间隔内加载内容，请使用 pageinit 和 setinterval 函数。每次添加动态内容时不要忘记manually enhance页面内容样式。

1. Pageshow 仅在需要页面高度的插件初始化时才有用。没有什么特别的。从答案 1 中，您可以看到它对动态内容不利，因为它会不知从何而来。

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

1. 明天我将更新我的 answer 以包含每个页面事件的用例。我希望这对你来说已经足够了。