jQuery Mobile - pageinit vs pageshow

简介

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

pageinit和pageshow的区别

让我们从头开始。正如你已经知道的那样，jQuery开发者已经为我们提供了页面事件来弥补文档无法完成的空白。虽然document ready可以告诉你DOM中的内容已经准备好了，但我们还需要更多，因为jQuery Mobile仍然需要增强内容标记(增强内容样式)。

有几个页面事件，每一个都有它的目的。有些会在增强页面内容之前触发(如 pagebeforeccreate )，以便可以添加动态内容。有些只在页面更改时触发，如pagebeforechange。

回到你的问题上来。 Pageinit 是这里是一个jQuery移动版的 document ready 。虽然您仍然可以使用 document ready ，但在页面事件之间使用相同的替代方案仍然是合乎逻辑的。

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

这里我们有另一个问题(你的问题之一)，那么 pageshow 的目的是什么?显而易见的答案是对可用的和显示的页面做一些事情。而正确的答案并不那么重要。 Pageshow 很重要，因为它是唯一的页面事件，页面高度可以正确计算，它不是0。现在您可以看到为什么需要在此时初始化您的carousel。Carousels像许多其他插件(图表，图库)需要正确的页面高度，如果你在 pageshow 之前初始化它们，它们将具有高度0，因此它们将存在，但你将无法看到它们。

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

的例子:

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

这个方法会绑定一个click事件到document，但是同样的click事件只会作用于id为' some-button' 的元素。元素是否存在并不重要，因为文档对象总是存在的。

同样的逻辑是不那么重要，如果你的工作与正常的网页页面加载/刷新是一个常见的事情。甚至在jQuery Mobile中，如果ajax被关闭，那么每次页面更改基本上都是页面刷新/重新加载。

我希望这能回答你所有的问题。如果你需要澄清，请在评论区询问他们。 编辑:

你应该在哪里加载你的数据取决于你需要加载什么。如果你只想做一次，那么使用 pageinit 。如果你需要它每次页面被访问，然后使用 pagebeforeshow (因为如果你使用 pageshow 的内容将只是显示无处不在，它可以混淆用户)。不要使用 pagebeforecreate ，因为内容将在事件结束后加载，所以使用它没有意义。

如果你想加载内容在一些间隔使用 pageinit setinterval函数。不要忘记在每次添加动态内容时手动增强页面内容样式。

Pageshow 仅用于插件初始化所需的页面高度。没什么特别的。从答案1你可以看到它是坏的动态内容，因为它会显示从任何地方。

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

明天我将更新我的答案与每个页面事件的用例。我希望这对你来说足够了。