Comment passer un objet/template comme paramètre dans Javascript/jQuery

Question

J'essaye mon premier forray dans jQuery. J'essaie de réaliser ce qui suit, même si je ne suis pas sûr de la terminologie, je vais essayer d'expliquer par un exemple en utilisant une sorte de syntaxe C#/pseudocode.

que je veux un (anonyme) objet en tant que paramètre, recherche quelque chose comme:

elemParameter { 
    elemId, 
    arg1, 
    optionalArg2 
} 

et je veux passer un tableau/collection de ces objets dans ma fonction

$(document).ready(function() { 
    $.myFunction(
     new { Id = "div1", Color = "blue", Animal = "dog" }, 
     new { Id = "div3", Color = "green" }, 
     new { Id = "div4", Color = "orange", Animal = "horse" } 
    ); 
} 

puis dans ma fonction, j'ai besoin d'accéder à chaque objet de la collection, quelque chose comme:

(function($) { 
    $.myFunction(var elemParams) { 
     foreach (param in elemParams) { 
      $('#' + param.Id).onclick = function() { 
       this.css('background-color', param.Color); 
       alert(param.Animal ?? 'no animal specified'); 
      } 
     } 
    } 
} 

Quelqu'un peut-il me donner quelques indications sur la syntaxe correcte pour passer des paramètres de cette façon? Ou suggérez un meilleur moyen de parvenir à la même chose si ce n'est pas la bonne façon de faire les choses en javascript.

Answer 1

Votre syntaxe est juste un peu au large, il ressemblerait à quelque chose comme ceci:

$(function() { 
    function myFunction() { 
    $.each(arguments, function(i, arg) { 
     $('#' + arg.Id).click(function() { 
     $(this).css('background-color', arg.Color); 
     alert(arg.Animal || 'no animal specified'); 
     }); 
    }); 
    } 
    myFunction({ Id: "div1", Color: "blue", Animal: "dog" }, 
      { Id: "div3", Color: "green" }, 
      { Id: "div4", Color: "orange", Animal: "horse" });​ 
}); 

You can try a demo here, le style de syntaxe est appelée JavaScript object literal notation, qui est ce que vous googler lorsque vous cherchez plus d'informations autour de ceci:

Vous pouvez également transmettre les objets sous forme de tableau si vous souhaitez ajouter d'autres arguments à ceux-ci, plutôt que d'utiliser arguments directement.

Answer 2

Vous recherchez "notation littérale d'objet". Il ressemble à ceci:

{ 
    propertyName: propertyValue, 
    propertyName2: propertyValue2 
} 

Vous n'utilisez le mot-clé new avec eux, ils sont juste une construction littérale comme des chaînes (« foo ») ou le numéro (42). De même, vous avez littéraux de tableau:

["one", "two", "three"] 

Voici votre exemple mis à jour:

$(document).ready(function() { 
    $.myFunction(
     // <== Start an array literal with [ 
     [ 
      // <== Colons rather than equal signs 
      { Id: "div1", Color: "blue", Animal: "dog" }, 
      { Id: "div3", Color: "green" }, 
      { Id: "div4", Color: "orange", Animal: "horse" } 
     // End the array literal with ] 
     ] 
    ); 
} 

Notez qu'il est important de ne pas avoir une virgule de fin soit un objet ou un tableau littéral, par exemple

["one", "two", "three", ] 
         ^--- Don't do that 
{foo: "bar", x: 27, } 
        ^------- Or that 

La question de savoir si elles étaient valides était peu claire (il est clair maintenant que de la récente 5ème édition) et IE (au moins) selfs sur eux.

---

hors sujet, mais généralement les noms de propriétés dans le code JavaScript sont camelCase et commencent par une lettre minuscule (ainsi, par exemple, plutôt que animalAnimal). C'est purement style, cependant.