JQuery document.ready vs Phonegap deviceready

Question

Je réalise une application phonegap avec jquery. Je ne sais pas si je dois envelopper tout mon code dans l'interface de JQuery. $(document).ready() comme

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

ou dans l'événement deviceready de phonegap comme

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

J'utilise actuellement document.ready mais je pense que je peux rencontrer des problèmes si j'essaie d'accéder à certaines méthodes de l'API Phonegap à l'intérieur de document.ready .

Quel est le meilleur événement pour envelopper mon code, document.ready ou deviceready ?

Answer 1

Un point clé de la réponse est cette ligne tirée de l'histoire de l'entreprise. documentation de la deviceready événement.

Cet événement se comporte différemment des autres en ce sens que tout gestionnaire d'événement enregistré après le déclenchement de l'événement verra sa fonction de rappel appelée immédiatement.

Cela signifie que vous ne manquerez pas l'événement si vous ajoutez un écouteur après que l'événement a été déclenché.

Donc, il faut d'abord déplacer tout le code d'initialisation vers la fonction onDeviceReady. Ensuite, il faut d'abord gérer le document.ready. Dans le document.ready, si vous déterminez que vous vous exécutez dans un navigateur, appelez simplement la fonction onDeviceReady, sinon ajoutez l'écouteur deviceready. De cette façon, lorsque vous êtes dans la fonction onDeviceReady, vous êtes sûr que tous les "ready" nécessaires ont eu lieu.

$(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.
}

La vérification d'isphone fonctionne car dans phonegap, l'index.html est chargé à l'aide d'un fichier file:/// url.

Answer 2

Vous devez utiliser l'événement deviceready pour éviter que des choses bizarres ne se produisent.

Les docs disent :

Il s'agit d'un événement très important que chaque application PhoneGap devrait utiliser.

PhoneGap se compose de deux bases de code : le code natif et le code JavaScript. Pendant le chargement du code natif, une image de chargement personnalisée est affichée. Cependant, JavaScript n'est chargé qu'une fois le DOM chargé. Cela signifie que votre application web pourrait, potentiellement, appeler une fonction JavaScript de PhoneGap avant qu'elle ne soit chargée.

L'événement PhoneGap deviceready se déclenche une fois que PhoneGap est complètement chargé. Une fois que le dispositif s'est déclenché, vous pouvez faire des appels aux fonctions de PhoneGap en toute sécurité.

Typiquement, vous voudrez attacher un écouteur d'événement avec document.addEventListener une fois que le DOM du document HTML est chargé.

Lisez la documentation ici : http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

Answer 3

Ils ne sont pas les mêmes.

jQuery.ready() est utilisé :

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

Source : https://code.jquery.com/jquery-3.1.1.js

Cordova/PhoneGap vous demande d'utiliser :

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

Source : https://cordova.apache.org/docs/en/latest/cordova/events/events.html

Je vous suggère de placer tout le code d'initialisation de vos plugins Cordova/PhoneGap à l'intérieur de la fonction de rappel qui est déclenchée lorsque la fonction deviceready l'événement se produit. Exemple :

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

function onDeviceReady() {
    // Now safe to use device APIs
}

Answer 4

La réponse de @Kinjal m'a vraiment aidé à me mettre sur la bonne voie, mais j'ai dû lutter contre de nombreux problèmes de timing.

J'utilise l'événement device ready de Cordova pour lire les fichiers de données de mon application, quelques paquets JSON qui pilotent la construction de l'interface et sont chargés par défaut dans le dossier www, mais peuvent éventuellement être téléchargés depuis un serveur, pour mettre à jour la base de données de l'application.

J'ai trouvé beaucoup de problèmes parce que les structures de données de l'application n'avaient pas assez de temps pour s'initialiser avant le démarrage du routage.

J'ai fini par trouver cette solution : initialiser d'abord jQuery, appeler le gestionnaire d'événements de Cordova à la fin de l'initialisation de jQuery, appeler la routine de démarrage de l'application à la fin du dernier traitement dans l'initialisation de Cordova.

Tout ce cauchemar a commencé parce que j'avais besoin d'un moyen de lire les fichiers de modèles pour Hogan.js et que je ne pouvais pas les lire avec le protocole de fichier et un simple XHR.

Comme ça :

$(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

J'utilise PhoneGap Build cli-6.2.0 et quand je teste la procédure que vous avez suggérée, elle ne fait rien dans la fonction. onDeviceReady() .

Avec les anciennes versions de PGB, cela fonctionne !

    $(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>