Quel est le meilleur moyen de passer à côté serveur variables JavaScript côté client?

Notre application utilise beaucoup d'options de configuration. Ces options doivent être répercuté sur le côté client dans le formulaire de préférences de l'Utilisateur, à l'échelle du site préférences, etc.

Actuellement, nous passons à côté serveur les paramètres vers le bas pour le côté client sous la forme de JSON qui est stocké dans les attributs personnalisés dans le balisage d'un élément spécifique (et non, notre application ne vous inquiétez pas au sujet de la validation W3C). Nous avons ensuite récupérer les données à partir de l'attribut personnalisé, et d'analyser dans un objet JSON pour une utilisation dans un script utilisant jQuery.

Un inconvénient à cela est de référencement attributs sur les éléments de l'intérieur de gestionnaires d'événements. Je sais que c'est mal vu, car il peut créer des références circulaires, et par la suite de fuites de mémoire. Je préférerais de beaucoup l'utilisation de jQuery fonction transfert de données, mais vous ne pouvez pas invoquer ce côté serveur à la page, le temps de rendu.

Ce que tout le monde veut le faire dans ce type de scénario?

OriginalL'auteur steve_c | 2011-01-04

  1. 8

    Retourner le serveur de données au format JSON. Vous pouvez le faire grâce à AJAX, en retournant un JSON en-tête, ou de la simple page outup et JSON.parse().

    Vous pouvez affecter les données JSON directement à un élément de données.

    $('#elementid').data('serverdata', data);

    Mise à jour

    Après une meilleure compréhension de votre situation, je vous suggère d'utiliser le data- attributs pour trois raisons.

    1. Vous aurez conforme aux normes du balisage.
    2. La dernière version de jQuery s'appuie sur ces données pour les .data fonction.
    3. La modification nécessite peu de modifications à votre application en cours (en changeant la façon dont les attributs personnalisés sont de sortie à partir de customAtt="value" à data-customAtt="value"

    Ici est de plus d'informations sur les attributs de données.

    +1, Toutes les réponses sont assez bon, mais depuis qu'il est à l'aide de jQuery, ce serait la solution la plus simple
    Les appels AJAX prendre du temps, et ce n'est pas tellement sur le temps réel tel que perçu temps. Nous essayons de minimiser les trucs qui apparaissent sur la page après la charge initiale, car nous pensons que cela permet une meilleure expérience utilisateur globale.
    Ensuite, je voudrais aller avec une chaîne de serveur variable analysée comme json, et envoyé à l'élément de données.
    Droit, mais cela peut devenir compliqué que vous avez besoin de savoir qui de l'élément de données appartient. La raison pour laquelle nous utilisons les attributs actuellement, il relate les données à un élément particulier.
    À bien y penser, il suffit d'utiliser la data- attributs. La dernière version de jquery va regarder ces lors de l'utilisation de la jQuery.data fonction. Cela aurait pour effet de vous obliger à modifier votre attribut personnalisé noms fron customAttribute à data-customAttribute.

    OriginalL'auteur Josiah Ruddell

  2. 2

    Vous pouvez vous rendre dans la page une ligne de script qui définit un objet JS avec toutes les préférences. De cette façon, vos scripts ont accès aux données du moment où le navigateur est fait avec le chargement de la page. Les inconvénients:

    • vous avez de script en ligne dans la page, que certaines personnes désapprouvent;
    • mise en cache de la page peut entraîner oder préférences utilisé pour la page d'instance;
    • chaque page, la taille augmente avec le préf. de taille.

    Ou vous pouvez vous rendre dans la page un lien vers un script externe qui déclare les préférences. De cette façon, les préférences ne pas bloquer le rendu de la page, et peut être mis en cache séparément par le navigateur. Inconvénients:

    • la page peut rendre avec les anciennes préférences, puis obtenir la mise à jour pour les nouvelles préférences, qui, sur des réseaux plus lents peuvent être visibles;

    Ou vous pouvez directement ajouter des données à un élément en utilisant le HTML5 attributs de données (donc HTML5 conforme et jQuery.Données compatibles, comme il les utilise aussi bien). Inconvénient:

    • vous perdez IE soutien;
    Cette solution se résume à la philosophie: ne vous froncer les sourcils sur inline scripts ou pas. Nous avons utilisé pour cela, mais serait plutôt de ne pas avoir inline scripts.

    OriginalL'auteur Franci Penov

  3. 0

    À mes projets j'ai l'habitude de rendre des données telles que JavaScript global variables en haut de la page maître:

    <script language="javascript">
var g_someOption=<%= Options.SomeOption.SerializeToJsonLiteral() %>;
var g_someOtherOption=<%= Options.SomeOtherOption.SerializeToJsonLiteral() %>;
//or
var g_globalOptions = {
    thirdOption:<%= Options.ThirdOption.SerializeToJsonLiteral() %>,
    foursOption:<%= Options.FourthOption.SerializeToJsonLiteral() %>
};
//or even via special helper that renders object above
<%= Html.RenderGlobalScriptVars() %>
</script>

    Si le projet est plein d'AJAX et l'utilisateur peut rester sur une page pour une longue période, il est possible de réinitialiser les paramètres périodiquement à l'aide de requêtes AJAX vers le serveur.

    P. S. j'ai utilisé aspx syntaxe, mais je crois que vous avez eu une idée, même si vous utilisez une autre langue.

    Je ne suis pas fan de globalement les variables définies dans la ligne. Ce que vous avez fait ici est semblable à attacher à l'objet window.
    J'ai posté un exemple qui n'utilise pas de variables globales par dire, seulement parce qu'il est enveloppé dans une fonction. Mais c'est la façon la plus simple de le faire, les variables globales ne sont pas si mauvais si ils sont en lecture seule, je voudrais juste poser toutes ces vars en un objet unique

    OriginalL'auteur Victor Haydin

  4. 0

    J'ai l'habitude d'utiliser MVC, donc je suis dans l'habitude de faire des appels AJAX lors du chargement de la page pour obtenir des objets, j'ai peut-être besoin. Je ne suis pas sûr de ce que la technologie que vous utilisez, mais il ne devrait pas être trop dur à mettre en place un point de terminaison qui retourne du JSON et de l'appeler quand le DOM est prêt. Ensuite, vous pouvez l'enregistrer dans une variable JavaScript et ne pas s'inquiéter de la farce dans certains attributs de l'élément.

    Si vous le pouvez, c'est une bonne idée, cependant, de nombreux développeurs préfèrent ne pas besoin d'un supplément de demande depuis le json peuvent être incorporées dans le code html.
    C'est compréhensible, mais dans le code JavaScript, de formation, j'ai eu, à l'aide de la fonction eval() et JSON.analyser sont mal 🙂 Donc, la seule façon de l'intégrer sans l'aide de ces consisterait à intégrer certains <script> balises qui est également indésirable. Il n'y a pas de réponse parfaite.
    JSON.analyser n'est pas le mal lui-même. Eval est seulement le mal si vous êtes d'exécuter dynamiquement le code de l'omi. Ce que Juan a dit, c'est ce que nous essayons d'éviter. Nous ne voulons pas plusieurs, ou même un seul, requête AJAX de tir après le chargement initial de la page, comme nous ne voulons pas que la perception de la lenteur de choses "popping" dans la page.
    vous avez raison, JSON.analyser n'est pas vraiment mal, mais pour citer 'JavaScript Les Bonnes Pièces": "Actuellement, la meilleure technique pour obtenir des données à partir d'un serveur dans un navigateur web est par le biais de XMLHttpRequest."

    OriginalL'auteur Samo

  5. 0

    Un bon compromis est de rendre un objet de configuration unique qui est identifié par l'id que vous utilisez pour les noeuds (ou tout autre système qui permettra à vos gestionnaires à trouver les données). Au lieu d'utiliser inline gestionnaires, l'ensemble des gestionnaires d'après le chargement de la page. Ensuite, il devrait être facile de référence le json de votre côté serveur créé.

    Cet exemple utilise des semi-globals

    <script>
$(function() {
  //The following line would be generated in php using something like:
  //var cfg = <?= json_encode($cfg) ?>; 
  var cfg = {
     orders: [{total: 25, itemCount: 10}], 
     waiting: [{total: 20, reason: "Out of strock"}]
  };
  $('orders').click(function(){
    alert('You have a total of ' +  cfg.orders[0].itemCount + 'orders');
  });
})
</script>

<body>
<div id='orders'> Here are your orders</div>
</body>

    Sinon, si vous voulez vraiment à la portée de vos variables, vous pouvez effectuer les opérations suivantes:

    <script>
$(function() {
  $('orders').click(function(){
    var orders = <?= json_encode($orders) ?>; 
    alert('You have a total of ' +  orders[0].itemCount + 'orders');
  });
})
</script>

<body>
<div id='orders'> Here are your orders</div>
</body>

    L'exemple ci-dessus est moins flexible car vous ne pouvez pas utiliser les commandes de la variable à partir d'autres gestionnaires si vous avez besoin de.

    Nous n'utilisons pas de inline gestionnaires à tous. Nous avons la configuration de référence à partir des attributs personnalisés en cas de besoin. Parfois, c'est par l'intermédiaire de gestionnaires, parfois pas. Tous les gestionnaires sont fixés par liaison via jQuery. Je ne suis rien si ce n'militant sur les bonnes js pratiques.
    Ensuite, vous devriez être en mesure d'utiliser des approches suggérées, la mienne et celle des autres. Pas sûr de ce que l'intention de votre commentaire? Vous ne savez pas comment fournir les données pour les gestionnaires?
    Je suis à la recherche pour les personnes à fournir la meilleure mise en œuvre de cette fonctionnalité. J'ai déjà travailler comme est. Je ne suis pas convaincu que c'est la meilleure façon de le faire.

    OriginalL'auteur Juan Mendes

  6. 0

    Juste pour ajouter une autre option, vous pouvez toujours faire un 

    <script type="text/javascript" src="settings.php"></script>

    à la sortie des trucs à partir de PHP. Vous pouvez l'utiliser pour invoquer les données nécessaires appels, par exemple. Suffit d'envoyer le bon en-tête.

    OriginalL'auteur kapa