jQuery Mobile - pageinit 与 pageshow

Posted 2023-05-07

【中文标题】jQuery Mobile - pageinit 与 pageshow

【英文标题】：jQuery Mobile - pageinit vs pageshow

【发布时间】：2013-05-21 01:16:10

【问题描述】：

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

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

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

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

【问题讨论】：

Gajotres- 我认为这是一个更具体的问题，因为由于在 pageinit 和 pageshow 中添加了一些代码而面临太多问题。在发布此问题之前已经搜索过。不相信任何答案。他们中的大多数在事件的解释上都非常笼统。没有说明何时使用哪个事件的示例。

这不是针对您个人的，但我喜欢许多其他人，如果该答案不被接受，我不想费心写答案，这只是浪费时间。如果我有空闲时间，我会回答你的问题。

我不明白你的意思是说答案不会被接受。

如果您查看问题发布的历史记录，您会发现到目前为止您没有接受任何答案。这告诉我，您将来不会接受任何答案。当我们为您提供答案时，我们会接受一些回报，当然如果答案是正确的。我们期望的是一个被接受的答案，或者至少是一个赞成票。

真的很抱歉我是***的新手。有账号但很少使用。搜索后才知道如何接受答案和投票。我非常确定，到目前为止，您所回答的任何内容对我来说都非常有用和清楚。对不起，谢谢。

【参考方案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 被关闭，那么每次页面更改基本上都是页面刷新/重新加载。

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

编辑：

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

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

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

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

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

【讨论】：

很好的解释。仍然需要一些澄清。 1. 使用 $(ajax) 为页面加载数据的位置应该是：pageinit vs pagebeforecreate vs pagecreate。 2. 除了上面提到的页面高度计算只能在页面显示期间进行的情况。还有其他情况我们应该只使用pageshow吗？我认为，如果我们可以有一个表格，我们可以在其中说明执行特定操作（例如加载数据、绑定事件等）的最佳页面事件是什么，那就太好了。这对所有人都有用。再次感谢。

我在回答中添加了新内容，请看一下。

太棒了。我 100% 确定，除了您的回答外，我们无法在网上任何地方得到这个解释。期待用例。

精湛的答案，它给了我想要的一切

请注意 pageinit 显然已被 pagecreate - jQM API 取代