Meilleur motif de conception JavaScript à utiliser lorsque l'objet nécessite le chargement préalable du DOM?

Question

Je fais des choses avec les API Google et je veux structurer mon code pour le rendre réutilisable mais je rencontre des difficultés. Pour authentifier à l'aide oauth2 je charge ce script

<script src="https://apis.google.com/js/auth.js?onload=initAuth"></script> 

qui a appelé initAuth() quand il a été chargé. Je pourrais alors faire l'authentification using gapi.auth. Cependant, comme j'appelle différentes API, je veux créer une classe wrapper plus générale pour l'authentification. J'ai eu un coup d'oeil sur le web et a donné l'auto exécution des fonctions anonymes un aller comme ils ont l'air assez propre:

(function(GAuth, $, undefined) { 

    GAuth.token = gapi.auth.getToken(); 

    GAuth.authenticate = function(clientId, scopes, apiUrl, isInitialAuth, callback) { 
     if(isInitialAuth) 
     { 
      gapi.auth.init(function() { 
       authorize(clientId, scopes, apiUrl, false, callback); 
      }); 
     } 

     else 
     { 
      // authorize is private 
      authorize(clientId, scopes, apiUrl, true, callback); 
     } 
    } 

    ...etc... 

}(window.GAuth = window.GAuth || {}, jQuery)); 

Le problème est qu'il exécute immédiatement, et dans ce cas, je reçois une erreur « GAPI est indéfini » . Je cherche un moyen qui me permette de charger mon objet GAuth après le chargement des autres scripts, et un qui me permet de préférence de définir des fonctions/variables publiques et privées.

Answer 1

Incluez le fichier qui configure gapi avant de nécessiter ce fichier. Cela garantira que la valeur de gapi est atteinte au moment où ce script est exécuté. Puisque vous utilisez jQuery, vous pouvez également utiliser le document prêt (très recommandé pour le code qui dépend de la première page prête).

// Define functions here 
$(function() { 
    // Do your code dependent on a completely loaded DOM here 
});