jQuery document.ready与Phonegap deviceready

我正在用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中是最好的事件？

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

文档状态：

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

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

PhoneGap完全加载后，将触发PhoneGap设备就绪事件。触发设备后，您可以安全地拨打PhoneGap函数。

通常，document.addEventListener一旦HTML文档的DOM加载完毕，您便希望将事件监听器与之连接。

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

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

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

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

因此，首先将所有初始化代码移至onDeviceReady函数。然后首先处理文档。如果您确定自己在浏览器中运行，则在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中，使用file:///URL加载了index.html 。

它们不一样。

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
}

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

我正在使用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>

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

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