+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [JS] organiser les onclick event (/showthread.php?tid=7069)
[JS] organiser les onclick event - php_addict - 30-07-2013
Bonjour
une petite question pour savoir comment VOUS, vous faites pour gérer tout les onclick (JS) qui fleurissent dans vos script javascript,
en effet je comment a avoir tout un tas de:
$(document).ready(function() {
$("stypid_div").live('click', function() {
// do something really very nice in JavaScript
});
});
ne serait il pas judiceux de faire une sorte de contrôleur qui détecte chaque click et qui actionne tel ou tel script JS (function ou classe)?
le hic c'est que je n'ai aucune idée de comment faire ni aucun exemple de code...
une idée?
merci de m'avoir lu
RE: [JS] organiser les onclick event - Sephi-Chan - 30-07-2013
De mon côté c'est souvent séparé en de nombreux fichiers.
J'utilise souvent la notation déléguée de jQuery (bind, live et delegate sont maintenant fusionnée en on) car j'interviens souvent sur des éléments qui vont et viennent dans le DOM (modifié en Ajax ou autre).
$(document).on('click', '.map .territory', callback)
Ensuite, j'utilise souvent des events personnalisés, car ça a souvent plus de sens qu'un clic (ou autre) seul. Donc mes listeners font souvent un simple travail de forwarding.
$(document).on('click', '.map .territory', function(event){
var someAdditionalData = {};
$(event.target).trigger('territory
elected', someAdditionalData);
})
$(document).on('territoryelected', callback);
Et enfin, pour éviter d'avoir une tonne de listeners définis inutilement, il m'arrive souvent de définir des variables Javascript via le code d'une page et de définir certains listeners seulement quand certaines variables sont crées.
<html>
<head>
<!-- Inclusion des CSS. -->
</head>
<body>
<!-- Contenu du document. -->
window.pageRoles = [ 'map', 'playerPicker' ];
<!-- Inclusion du Javascript. -->
</body>
</html>
Et ensuite :
if(window.roles.indexOf('map') != -1){
$(document).on(...);
}
Comme ça, les events listeners dédiés à la map ne sont exécutés que quand c'est nécessaire. C'est l'un des maigres désavantages à utiliser des scripts packagés : ils sont compactés et compressés en peu de fichiers Javascript et on ne peut donc plus les charger seulement quand on en a besoin).
Comme j'utilise du CoffeeScript, c'est un peu plus esthétique :
return unless 'map' in window.roles
$(document).on(...)
Ça marche parce que CoffeeScript emballe chaque script qu'il concaténe dans une fonction anonyme, qu'on peut donc interrompre dès le début plutôt que de tout englober dans un if. CoffeeScript fournit également l'abstraction du in.
RE: [JS] organiser les onclick event - php_addict - 30-07-2013
salut
ok, ok ,... donc tu lance tes listeners quand tu detecte certaines variables, c'est bien ca?
RE: [JS] organiser les onclick event - Sephi-Chan - 30-07-2013
Ben, tu vois bien le code. ^^
if(window.roles.indexOf('map') != -1){
$(document).on(...);
}
RE: [JS] organiser les onclick event - php_addict - 30-07-2013
oui effectivement et je t'en remercie...il est temps pour moi de réorganiser mon code JS, et je vais même l'encapsuler dans des classes tant qu'à faire ...