Comment passer un objet/modèle en tant que paramètre en Javascript/jQuery

Question

Je tente ma première incursion dans jQuery. J'essaie d'atteindre ce qui suit, bien que je ne sois pas sûr du terme exact, je vais donc essayer d'expliquer avec un exemple utilisant une sorte de syntaxe C# / pseudocode.

Disons que je veux un objet (anonyme) en paramètre, ressemblant à quelque chose comme :

elemParameter {
    elemId,
    arg1,
    optionalArg2
}

et je veux passer un tableau / une 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" }
    );
}

et ensuite 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');
            }
        }
    }
}

Est-ce que quelqu'un pourrait me donner quelques indications sur la syntaxe correcte pour passer des paramètres de cette manière ? Ou suggérer une meilleure façon d'atteindre le même résultat si ce n'est pas la bonne approche en javascript.

Answer 1

Votre syntaxe est juste un peu décalée, ça 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 || 'aucun animal spécifié');
      });
    });
  }
  myFunction({ Id: "div1", Color: "blue", Animal: "chien" },
             { Id: "div3", Color: "vert" },
             { Id: "div4", Color: "orange", Animal: "cheval" });​
});

Vous pouvez essayer une démo ici, le style de syntaxe est appelé notation littérale d'objet JavaScript, c'est ce que vous recherchez lorsque vous cherchez plus d'informations à ce sujet :)

Alternativement, vous pouvez passer les objets sous forme de tableau si vous souhaitez d'autres arguments en plus de ceux-ci, plutôt que d'utiliser arguments directement.

Answer 2

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

{
    nomDePropriété: valeurDePropriété,
    nomDePropriété2: valeurDePropriété2
}

Vous n'utilisez pas le mot-clé new avec eux, ce sont simplement une construction littérale comme les chaînes de caractères ("foo") ou les chiffres (42). De même, vous avez des littéraux de tableau:

["un", "deux", "trois"]

Voici votre exemple mis à jour:

$(document).ready(function() {
    $.myFunction(
        // <== Commencez un littéral de tableau avec [
        [
            // <== Deux-points plutôt que des signes égal
            { Id: "div1", Couleur: "bleu", Animal: " chien " },
            { Id: "div3", Couleur: "vert" },
            { Id: "div4", Couleur: "orange", Animal: "cheval" }
        // Terminez le littéral de tableau avec ]
        ]
    );
}

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

["un", "deux", "trois", ]
                      ^--- Ne faites pas cela
{foo: "bar", x: 27, }
                  ^------- Ou cela

La question de savoir s'ils étaient valides était ambiguë (maintenant c'est clair depuis la récente 5ème édition) et IE (au moins) les bloque.

---

Hors sujet, mais généralement les noms de propriétés dans le code JavaScript sont en camelCase et commencent par une lettre minuscule (donc, par exemple, animal plutôt que Animal). C'est purement une question de style.