67

我正在用 jquery 制作一个 phonegap 应用程序。我很困惑是否应该将整个代码包装在 JQuery$(document).ready()中

$(document).ready(function(){
    //mycode
});

或在 phonegap 的 deviceready 事件中，例如

document.addEventListener("deviceready", function(){
    //mycode
});

我目前正在使用document.ready，但我想如果我尝试访问其中的一些 Phonegap API 方法可能会遇到问题document.ready。

哪个是包装我的代码的最佳事件，document.ready 还是 deviceready？

4

6 回答 6

88

答案中的一个关键点是事件文档中的这一行。deviceready

此事件的行为与其他事件不同，因为在事件触发后注册的任何事件处理程序都将立即调用其回调函数。

这意味着如果在事件触发后添加侦听器，您将不会“错过”该事件。

因此，首先将所有初始化代码移至 onDeviceReady 函数。然后先处理document.ready。在 document.ready 中如果你确定你在浏览器中运行，只需调用 onDeviceReady 函数，否则添加 deviceready 监听器。这样，当您在 onDeviceReady 函数中时，您可以确定所有需要的“准备就绪”已经发生。

$(document).ready(function() {
    // are we running in native app or in a browser?
    window.isphone = false;
    if(document.URL.indexOf("http://") === -1 
        && document.URL.indexOf("https://") === -1) {
        window.isphone = true;
    }

    if( window.isphone ) {
        document.addEventListener("deviceready", onDeviceReady, false);
    } else {
        onDeviceReady();
    }
});

function onDeviceReady() {
    // do everything here.
}

isphone 检查有效，因为在 phonegap 中，index.html 是使用file:///url 加载的。

于 2013-01-01T08:29:04.953 回答
28

您应该使用 deviceready 事件来避免发生有趣的事情。

文档状态：

这是每个 PhoneGap 应用程序都应该使用的非常重要的事件。

PhoneGap 由两个代码库组成：native 和 JavaScript。在加载本机代码时，会显示自定义加载图像。但是，只有在 DOM 加载后才会加载 JavaScript。这意味着您的 Web 应用程序可能会在加载之前调用 PhoneGap JavaScript 函数。

一旦 PhoneGap 完全加载，PhoneGap deviceready 事件就会触发。设备触发后，您可以安全地调用 PhoneGap 功能。

通常，您需要document.addEventListener在 HTML 文档的 DOM 加载后附加一个事件侦听器。

在此处阅读文档：http: //docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

于 2012-09-25T04:11:06.553 回答
1

它们是不相同的。

jQuery.ready() 正在使用：

document.addEventListener("DOMContentLoaded", yourCallbackFunction, false);

来源：https ://code.jquery.com/jquery-3.1.1.js

Cordova/PhoneGap 指导您使用：

document.addEventListener("deviceready", yourCallbackFunction, false);

来源：https ://cordova.apache.org/docs/en/latest/cordova/events/events.html

我的建议是，您将 Cordova/PhoneGap 插件的所有初始化代码放在deviceready事件发生时触发的回调函数中。例子：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use device APIs
}
于 2017-02-07T09:58:05.977 回答
0

@Kinjal 的回答确实帮助我走上了正轨，但我不得不解决很多时间问题。

我使用 Cordova 设备就绪事件来读取我的应用程序的数据文件，一些驱动接口构建的 JSON 数据包，默认情况下加载到 www 文件夹中，但最终可能会从服务器下载，以升级应用程序数据库。

我发现了很多问题，因为在路由开始之前应用程序数据结构没有足够的时间来初始化。

我总结了这个解决方案：首先初始化jQuery，在jQuery初始化结束时调用Cordova的事件处理程序，在Cordova初始化的最后一个处理结束时调用应用程序启动例程。

所有这些噩梦都开始了，因为我需要一种方法来读取 Hogan.js 的模板文件，并且无法使用文件协议和简单的 XHR 来读取它们。

像这样：

$(document).ready(function () {

    ...

    // are we running in native app or in a browser?
    window.isphone = false;
    if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) {
        window.isphone = true;
    }

    if (window.isphone) {
        document.addEventListener('deviceready', onDeviceReady, false);
    } else {
        onDeviceReady();
    }
});

function onDeviceReady() {
    function readFromFile(fileName, cb) {
        // see (https://www.neontribe.co.uk/cordova-file-plugin-examples/)
    }

    ...

    readFromFile(cordova.file.applicationDirectory + 'www/views/tappa.html', function (data) {
        app.views.lastview = data;
        app.start();
    });
}
于 2016-02-09T10:54:00.617 回答
0

我正在使用 PhoneGap Build cli-6.2.0，当我测试您建议的程序时，它在 function 内没有做任何事情onDeviceReady()。

使用旧版本的 PGB 它可以工作！

	$(document).ready(function() { 
		window.isphone = false;
		if (document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) { window.isphone = true }
		if (window.isphone) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { onDeviceReady(); }
	});
	function onDeviceReady() {
		alert( window.isphone ); 		
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

于 2016-09-05T14:29:13.110 回答
0

一个不必排除另一个。一个简单的例子：

$(document).on('deviceready', function() {
    console.log('event: device ready');
    $(document).on('pause', function() {
        console.log('event: pause');
    });
    $(document).on('resume', function() {
        console.log('event: resume');
    });
});
于 2019-04-26T19:17:41.023 回答