Question

我正在使用jquery创建一个phonegap应用程序。我是否应该将我的整个代码包装在JQuery的$(document).ready()之内，我很困惑

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

或在phonegap的deviceready事件中，如

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

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

将代码包装在document.ready或deviceready中的最佳事件是什么？

Answer 1

答案中的一个关键点是来自deviceready事件的documentation的这一行。

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

这意味着如果你在事件被触发后添加一个监听器，你将不会“错过”该事件。

因此，首先将所有初始化代码移动到onDeviceReady函数。然后先处理document.ready。在document.ready中，如果您确定在浏览器中运行，只需调用onDeviceReady函数，否则添加deviceready listener。这样当你在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:///网址加载。

Answer 2

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

文档声明：

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

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

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

通常，一旦HTML文档的DOM加载，您将需要使用document.addEventListener附加事件侦听器。

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

Answer 3

它们不一样。

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
}

Answer 4

@ 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();
    });
}

Answer 5

我正在使用PhoneGap Build cli-6.2.0，当我测试你建议的程序时，在函数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>

Answer 6

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

$(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');
    });
});

JQuery document.ready vs Phonegap deviceready

6 个答案: