les meilleures pratiques dans l'intégration actions JavaScript w/DOM

Supposons, par exemple, un document xHTML comme ci-dessous:les meilleures pratiques dans l'intégration actions JavaScript w/DOM

<html> 
<head> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="content"></div> 
</div> 
</body> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript" src="./application.js"></script> 
</html>

Nous allons effectue une requête GET AJAX à un script PHP qui interroger une base de données et renvoie une réponse pour remplir un élément TABLE qui sera formaté en tant que grille triable via JavaScript.

De plus, nous voulons que tous nos JavaScript dans un seul fichier peuvent facilement être inclus comme indiqué ci-dessus.

Les options:

que le script PHP retourner l'élément TABLE peuplé de toutes les données. Utilisez la fonction live() de jQuery pour rechercher activement les nouveaux éléments TABLE dans le DOM et appliquer la fonctionnalité de grille triable lorsqu'il les découvre . Cette méthode nous permet de manipuler le contenu retrouvé à partir de la requête AJAX en PHP et renvoie une table sémantique complétée au document parent.
Insérez l'élément TABLE dans le script répertorié ci-dessus, mais en laissant son contenu vide. jQuery appliquerait immédiatement la fonctionnalité de grille triable une fois que le document serait prêt, bien qu'aucun contenu n'existerait encore. La requête GET retournera alors une réponse JSON qui peuplerait la base de données.

D'autres avis/bonnes pratiques/cas d'utilisation que vous pouvez partager pour ce genre de chose? Je ne discuterai un TABLE ici, mais nous avons discuté de la question avec un certain nombre de choses: visionneuses, des menus déroulants, etc.

Actuellement, nous ne sommes pas d'utiliser la fonction live() jQuery, ni ce que les éléments DOM existent dans le document parent. Nous devons donc placer de petits blocs de Javascript en haut de chacune de nos vues individuelles. Bien que bâclée, cela nous a permis de charger seulement la fonctionnalité quand elle est nécessaire, mais il est évidemment difficile à maintenir.

Source

2009-03-30 Michael Wales

Il est toujours préférable de charger autant que raisonnable sur le l initial oad. Si votre site/application nécessite que vous ajoutiez des choses dynamiquement via AJAX, je peux vous voir dilemme. D'après ce que je comprends, vous vous demandez quelle serait la meilleure pratique/préférée pour garder votre JavaScript concis et dans les fichiers et non dispersés dans votre page. Vous dites qu'actuellement vos scripts sont dispersés sur votre page parce que quand vous chargez dans des modules/vues ou tout ce qu'ils ont les js avec eux de sorte que quand ils chargent leur script est exécuté (à long terme, désolé). Et, le problème est que vous voulez que des événements spécifiques soient déclenchés (comme l'instanciation d'une lightbox ou le tri d'une table) lorsque ces vues sont chargées en utilisant le fichier omnipotent super global js.

Donc, si cela sonne juste, alors voici ce que je ferais (pour toutes les vues étant chargées en dynamique) ...

Ainsi, supposons que vous avez le code fourni:

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"z></script> 
<script type="text/javascript" src="./application.js"></script> 
</head> 
<body> 
    <div id="wrapper"> 
      <div id="sidebar"></div> 
      <div id="content"></div> 
    </div> 
</body> 
</html>

Si vous avez chargé du contenu dans le div #content (par exemple, une table) lorsque la page est entièrement chargée, puis que vous vouliez trier cette table sans mettre le script à le faire dans le code HTML renvoyé par AJAX , vous pouvez avoir le code suivant dans votre fichier principal ('./application.js'):

$(function() { 
    load_table(); 
    $('#content #my_table').live('table_loaded',function() { 
     $(this).sort(); // or whatever your sorting method is... 
    }); 
}); 

function load_table() { 
    $.get('mysite.php',{foo:bar,bar:foo},function(data) { 
     $('#content').html(data).find('#my_table').trigger('table_loaded'); 
    }); 
}

Ceci utilise les événements personnalisés jquery et l'événement live(). Je n'ai pas testé cela mais cela devrait fonctionner en théorie.

MISE À JOUR: J'ai testé cela et il fonctionne parfaitement en utilisant jquery 1.3.2 :)

Source

2009-03-30 18:37:47 KyleFarris

Merci pour la réponse Kyle - sur la base des réponses ici nous avons choisi d'inclure la balise table vide dans la ressource parent, nous utilisons ensuite jQuery pour soumettre une requête getJSON lorsque plusieurs liens sont cliqués, et en utilisant cette réponse pour modifier la grille extJS. –

À mon humble avis, la page doit être aussi complète que possible lorsqu'elle est affichée pour éviter les demandes supplémentaires. Donc je vote pour la première méthode.

Source

2009-03-30 17:26:58

Je suis en train de maintenir une application web basée sur la méthode live() et aussi avec les éléments DOM qui n'existent pas dans le document parent et ça semble aller. Je me suis essayé à insérer des morceaux de code dans les pages "résultats", mais il est très difficile de les mettre à jour tous et parfois vous pouvez sauter une ou deux erreurs et vous demander "qu'est-ce que j'ai fait de mal?" et cherchez le problème pendant plusieurs heures.

La méthode live() est très agréable car vous pouvez conserver tout votre code dans un fichier particulier et il est évidemment plus facile à maintenir que la solution ci-dessus.L'application dont je vous parlais est maintenant en production et elle n'avait pas échoué une fois donc je suis assez satisfait de cette solution (ce qui est étrange, j'utilise le même modèle pour remplir un élément TABLE avec des données et le montrer comme une grille :)

Source

2009-03-30 17:27:24

le jQuery jqGrid Plugin pourrait correspondre à la facture, les données de charge dynamiquement par ajax, peuvent être intégrés à une technologie côté serveur, vous permet de thème avec rouleau à thème.

Pour mettre à jour la table vous-même, vous pouvez émettre un rappel avec la plupart des fonctions jquery ajax lorsque la requête est terminée. Par exemple, si vous avez dans votre document:

<div id="output"> 
    <table>...</table> 
</div>

Vous pouvez charger le résultat avec la jquery fonction Ajax Load:

$('#output').load('results.php',{arg:'val'},updateSort); 

function updateSort(){ 
    $("#output > table").sort(); 
}

Je prends habituellement un autre ensemble:

$('#output') 
    .html('<div class="centered_padded_msg_class">Loading data...</div>') 
    .load('results.php',{arg:'val'},updateSort); 

function updateSort(){ 
    $("#output > table").sort(); 
}

Bonne chance, -Matt

Source

2009-03-30 18:35:00

Le choix de la grille (nous avons opté pour ExtJS) et la façon dont il est l'API est pas la question. Il s'agit simplement d'une question de bonne pratique - incluez-vous la table dans la charge initiale ou l'incluez-vous dans la vue de votre ressource AJAX? Nous avons déjà commencé à retravailler notre code pour utiliser l'ancienne méthode. –

les meilleures pratiques dans l'intégration actions JavaScript w/DOM

Répondre

Questions connexes