在“PhoneGap + jQuery Mobile”应用程序中正确注册事件

Posted 2023-04-15

【中文标题】在“PhoneGap + jQuery Mobile”应用程序中正确注册事件

【英文标题】：Correct event registration in the 'PhoneGap + jQuery Mobile' application

【发布时间】：2012-01-06 16:48:24

【问题描述】：

我正在尝试定义在 android 中为 PhoneGap 和 jQuery Mobile 注册初始化事件（jQuery 样式）的正确方法应用。

研究文档后，我想出了以下内容：

$('#index-page').live('pageinit', function ()  // <-- fires
    $(document).bind('deviceready', function ()  // <-- !fires
        // ...
    );
);

“外部”事件 (pageinit) 会触发，而“内部”事件 (deviceready) 不会...

虽然，这种类型的事件注册工作完美：

window.addEventListener('load', function () 
    document.addEventListener('deviceready', function () 
        // ...
    , false);
, false);

谁能解释第一种类型的事件注册有什么问题？什么类型比较好？

---

先决条件：

PhoneGap v1.2 jQuery Mobile v1.0rc2 Eclipse v3.7.1

【参考方案1】：

我发现在这种情况下使用延迟对象更清洁/更安全。这是我通常做的：

var jqmReady = $.Deferred();
var pgReady = $.Deferred();

// jqm ready
$(document).bind("mobileinit", jqmReady.resolve);

// phonegap ready
document.addEventListener("deviceready", pgReady.resolve, false);

// all ready :)
$.when(jqmReady, pgReady).then(function () 
  // do your thing
);

【讨论】：

感谢您的建议！我也试试。

这比 Cordova/PhoneGap 使用的“标准”回调混乱好多了。

理想情况下，我会在 index.html 中执行此操作。正确的？另外，不是 /* 做你的事 */ 我想调用一个 JS 文件，该文件包含我的应用程序的所有实时或延迟事件，这样我就可以有一个中心位置，所有事件都由我注册。可能吗？这是一个好的设计吗？如果是，我该如何实现？我尝试使用 $.getScript 但这会为我的应用程序呈现一个空白页面。请提出建议。

@Mustafa 您可以使用闭包，并创建一个初始化所有内容的模块。然后代替 /* 做你的事 */ 你打电话给yourModule.yourInitMethod();

我对 index.html 中的所有 JS 进行了一些更改（读取清理），现在 getScript 可以工作了。谢谢你的回答。

【参考方案2】：

我会在 Michael 的示例中走得更远，并触发自定义的 'PG_pageinit' javascript 事件。这将在两个事件（'pageinit'、'deviceready'）被触发后触发。这样，您只需在（已编写的）外部 JavaScript 文件中更改已注册事件的名称。

所以，使用 Michael 的代码（从 'mobileinit' 事件到 'pageinit' 的细微变化）：

var jqmReady = $.Deferred(),
pgReady = $.Deferred();

// jqm page is ready
$(document).bind("pageinit", jqmReady.resolve);

// phonegap ready
document.addEventListener("deviceready", pgReady.resolve, false);

// all ready, throw a custom 'PG_pageinit' event
$.when(jqmReady, pgReady).then(function () 
  $(document).trigger("PG_pageinit"); 
);

在你的其他 JavaScript 文件上，每当你想注册这个新事件时，使用这个：

$(document).bind("PG_pageinit", function()
  alert('PG_pageinit was just fired!');    
  // do your thing...
);

在 Android 2.3、cordova 1.9.0 上测试

【讨论】：

如果我将$(document).on('event') 放在 //do your thing 中，JQM 事件永远不会触发？

【参考方案3】：

请坚持最后一个，因为这是 PhoneGap 推荐的，您的第一种方法可能不起作用，因为您绑定 deviceready 太晚了（即：它在您绑定之前已被触发）。那是因为pageinit 被解雇比较晚。

你可以做的是jQuery方式：

$(window).load(function() 
    $(document).bind('deviceready', function ()  
        // ...
    );
);

【讨论】：

坚持 W3C 事件注册模型效果很好...至于建议的 jQuery 样式，它对我不起作用：deviceready 事件不会触发...感谢您的建议！