JQuery Mobile-pageinit vs pageshow

Question

对这些方法的使用感到困惑.我知道在初始化期间会调用pageinit,但是在页面呈现期间每次都会调用pageshow.

我有一个主页,使用$ .ajax()为某些部分加载数据.我在pageinit中加载数据.我也只在pageinit中绑定点击和滑动事件.而且,我也注意到当你从另一个页面回来时没有调用pageinit.

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

此外,在确定加载数据,绑定事件等逻辑的位置时,缓存是否有任何作用.最好是有人可以解释说加载主页数据,然后导航并从另一个页面返回.

Answer 1

介绍

此处的所有信息也可以在我的博客文章中找到,您也可以找到工作示例.

pageinit和pageshow之间的区别

让我们从头开始.正如您已经知道的那样,jQuery Developers为我们提供了页面事件来弥补文档准备无法实现的差距.虽然文档就绪可以告诉你内容已经在DOM中准备好了,但我们还需要更多内容,因为jQuery Mobile仍然需要增强内容标记(增强内容样式).

有几个页面事件,每个事件都有其目的.有些将在页面内容增强之前触发(如pagebeforecreate),以便可以添加动态内容.有些只会在pagebeforechange等页面更改期间触发.

但是,让我们回到你的问题.Pageinit这是一个jQuery Mobile版本document ready.虽然您仍然可以使用document ready它,但在页面事件中具有相同的替代方案仍然是合理的.

正如您已经告诉过的那样,您正在使用pageinit事件绑定(例如点击或滑动事件),这是一个很好的解决方案.主要是因为jQuery Mobile遭受称为"多事件绑定"的问题.例如,如果您有一个click事件绑定到一个元素,则没有什么可以阻止另一个click事件绑定到同一个元素.如果您使用pageshow事件,那将会发生.如果您在事件期间使用事件绑定pageshow,则每次访问页面时都会反复绑定相同的事件.它可以很容易地防止,但同样的预防将需要额外的处理器处理能力,可用于处理其余网络应用程序的相同功率.

在这里,我们有另一个问题(你的一个问题),那么目的是pageshow什么？明显的答案是用可用的和显示的页面做一些事情.虽然正确答案并不重要.Pageshow很重要,因为它只是页面事件,页面高度可以正确计算,而不是0.现在你可以看到为什么你的轮播需要在那时初始化.像许多其他插件(图表,图像画廊)一样的旋转木马需要正确的页面高度,如果你在pageshow高度为0 之前初始化它们,那么它们将存在但你将无法看到它们.

关于你的上一个问题.如果您的应用程序构建正确,兑现不起任何作用.首先,您应始终使用委托事件绑定,因为它不关心页面元素是否存在.基本上,如果您将事件绑定到某些父元素(如文档),那么如果您的页面被兑现或从DOM中删除则无关紧要.一旦它回来,同样的事件将再次起作用.

例:

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

});

此方法将click事件绑定到文档,但同一个click事件仅适用于具有id'的元素some-button'.如果该元素存在与否则无关紧要,因为文档对象将始终存在.

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

我希望这能回答你所有的问题.如果您需要澄清,请在评论部分询问.

编辑:

1. 你应该在哪里加载数据取决于你需要加载什么.如果你只想做一次然后使用pageinit.如果您每次访问页面时都需要它,那么请使用pagebeforeshow(因为如果您使用pageshow该内容,则会突然显示出来并且可能会使用户感到困惑).不要使用,pagebeforecreate因为内容将在事件结束后加载,因此无需使用它.

   如果要在某个时间间隔内加载内容,请使用pageinitsetinterval函数.每次添加动态内容时,不要忘记手动增强页面内容样式.

2. Pageshow仅对插件初始化有用,需要页面高度.没什么特别的.从答案1你可以看到它是动态内容的床,因为它将从无处出现.

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

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