Les identifiants HTML s'avèrent être comme du javascript intrusif?

Question

Salut tout le monde, un regard sur le code ci-dessous et apprécier la façon dont salissante les attributs id sont

Voir fichier

<?php foreach($array_project as $prj) : ?> 
    <div id="prj-p<?=$item['project_id'] ?>"> 
    <?php foreach($arr_skill as $skill) : ?> 
     <h2><?=$skill['name'] ?></h2> 
     <a class="view" id="skill-p<?=$prj['project_id'] ?>-s<?=skill['skill_id'] ?>">view</a> 
     <a class="edit" id="edit-p<?=$prj['project_id'] ?>-s<?=skill['skill_id'] ?>">edit</a> 
     <a class="delete" id="delete-p<?=$prj['project_id'] ?>-s<?=skill['skill_id'] ?>">delete</a> 
    <?php endforeach; ?> 
    </div> 
<?php endforeach; ?> 

Javascript fichier (en utilisant Jquery)

$('.view').live('click', onClick); 
$('.edit').live('click', onClick); 
$('.delete').live('click', onClick); 

function onClick() 
{ 
    // prjId and skillId are effectively arguments that are 
    // traditionally passed via onClick(prjId, skillId), but here 
    // we've attached them to element ids 
    prjId = this.id.replace(/(skill\-p)|(\-s\d+)/g, '') 
    skillId = this.id.replace(/(skill\-p\d+)|(\-s)/,''); 

    // do stuff with the prjId and skillId 
} 

Donc, ma question avec le code ci-dessus est que faire quelque chose comme ça dans le fichier de vue

<a class="view" id="skill-p<?=$prj['project_id'] ?>-s<?=skill['skill_id'] ?>">view</a> 

est effectivement la même que

<a onclick="onClick(<?=$prj['project_id'] ?>,<?=skill['skill_id'] ?>)">view</a> 

cette dernière étant en fait plus lisible pour le programmeur. Dans le premier, je n'aime pas comment je devrais dériver ma propre convention de nommage d'identification pour garder la trace des identifiants d'entité de base de données: par exemple, le préfixe -p dénote l'id de projet, et le préfixe -s indique l'attribut skill_id. Et puis je dois utiliser l'expression régulière pour l'analyser. Je ne mens pas le dernier des gestionnaires d'événements en ligne js, parce que c'est javascript intrusif.

Je pensais à simplifier le code comme ceci:

Voir fichier

<?php foreach($array_project as $prj) : ?> 
    <div id="prj-p<?=$item['project_id'] ?>"> 
    <?php foreach($arr_skill as $skill) : ?> 
     <h2><?=$skill['name'] ?></h2> 
     <input type="hidden" class="project_id" value="<?=$prj['project_id'] ?>" /> 
     <input type="hidden" class="skill_id" value="<?=$prj['skill_id'] ?>" /> 
     <a class="view">view</a> 
     <a class="edit">edit</a> 
     <a class="delete">delete</a> 
    <?php endforeach; ?> 
    </div> 
<?php endforeach; ?> 

Javascript File (using Jquery) 

$('.view').live('click', onClick); 
$('.edit').live('click', onClick); 
$('.delete').live('click', onClick); 

function onClick() 
{ 
    prjId = this.parentNode.childNodes[1].value; 
    skillId = this.parentNode.childNodes[2].value; 

    // do stuff with the prjId and skillId 
} 

Cela est beaucoup plus facile de codage moins quand j'ai beaucoup d'entité db ids de référence entre les js et afficher des fichiers (Par exemple, je n'ai qu'à imprimer le project_id et le skill_id une fois). Mais le problème avec cette solution est que dès que mon concepteur change le schéma xhtml, je dois mettre à jour mon fichier javascript pour re-référencer les champs d'entrée cachés.

Existe-t-il un moyen plus simple et moins redondant pour les éléments html de transmettre des données aux fonctions javascript?

Answer 1

Vous pouvez utiliser data attributes, comme ceci:

<?php foreach($array_project as $prj) : ?> 
    <div id="prj-p<?=$item['project_id'] ?>" data-pid="<?=$prj['project_id'] ?>" data-sid="<?=$prj['skill_id'] ?>"> 
    <?php foreach($arr_skill as $skill) : ?> 
     <h2><?=$skill['name'] ?></h2> 
     <a class="view">view</a> 
     <a class="edit">edit</a> 
     <a class="delete">delete</a> 
    <?php endforeach; ?> 
    </div> 
<?php endforeach; ?> 

y accéder ensuite à jQuery:

$('.view, .edit, .delete').live('click', onClick); 

function onClick() 
{ 
    var div = $(this).closest("div"), 
     prjId = div.attr("data-pid"), 
     skillId = div.attr("data-did"); 

    // do stuff with the prjId and skillId 
} 

Ce travail dans HTML4 et est un part of the HTML5 standard, donc pas de conflit maintenant, complètement compatible HTML plus tard. Avec cette approche, vous n'avez peut-être même pas besoin du id sur le <div>, si c'est le cas, vous pouvez supprimer l'attribut, puisque ce n'est pas nécessaire, seuls les data- sont utilisés dans la fonction onClick() ci-dessus. Vous pouvez également donner à ce conteneur <div> une classe, comme class="project" et modifier l'appel pour le trouver à .closest(".project") pour le rendre un peu plus résistant.

Answer 2

Ceci est un peu moins sensible aussi, bien que j'aime @ Nick est un peu mieux.

function onClick() 
{ 
    prjId = $(this).parent().find(".project_id").attr("value"); 
    skillId = $(this).parent().find(".skill_id").attr("value"); 

    // do stuff with the prjId and skillId 
}