Attribuer dynamiquement la valeur à dom

J'ai une page html qui montrera le nom d'utilisateur du profil de l'utilisateur, lieu, environ etc. Je reçois la valeur en utilisant ajax dans jquery. Maintenant, j'ai question de savoir comment attribuer une valeur Récupéré au DOM:Attribuer dynamiquement la valeur à dom

Première méthode serait attendre jusqu'à ce que je reçois des données puis créer dynamiquement dom et ajouter à cibler div

$.ajax({ 
    url: "profiledata", 
    type: "POST", 
    success:function(data){ 
     $("<div><label>"+data.name</label><br/> 
      <label>"+data.place</label></div>").appendTo("target div"); 
    }

Dans cette méthode plus ajouter des chaîne se produira donc je doute de la mémoire consommée par le processus.

Deuxième méthode sera simplement utiliser id pour affecter la valeur:

$.ajax({ 
    url: "profiledata", 
    type: "POST", 
    success:function(data){ 
      $("#uname").text(data.name); 
      $("#place").text(data.place); 
    } 

<div><label id="uname"></label><br/> 
<label id="place"></label></div>

Lequel sera efficace en termes de chargement de la page à savoir le code plus léger et page Ai-je mentionné une approche d'écriture? ou une meilleure solution est là?

Source

2013-05-02 manish

6 d'une demi-douzaine de l'autre, dépend de votre utilisation et qui est plus lisible. Je ne crois pas qu'il y aura une différence de performance ** significative **. – Liam

Dans la première méthode, tous les "

"+data.name
"+data.place

" devront être analysés par jQuery avant d'être ajoutés. Je dirais que le second est plus efficace. – Ian

Selon la complexité du projet, il peut être intéressant d'utiliser l'un des nombreux frameworks MV * Javascript, qui vous permettent de lier facilement votre DOM aux sources de données. Quelques exemples sont [Knockout.js] (http://knockoutjs.com/), [AngularJS] (http://angularjs.org/) et [Backbone.js] (http://backbonejs.org/). Cela vous permet de simplement extraire les données du serveur et de ne pas vous soucier de la mise à jour du DOM; le cadre fait cela pour vous. – jmeas

Selon le cas d'utilisation, les deux solutions ont des avantages et des inconvénients.

La première méthode:

ne charge pas les éléments jusqu'à ce que vous en avez besoin
Mais il a aussi JQuery créer l'élément en mémoire plutôt que de modifier des éléments sur la page.

La deuxième méthode:

ne crée pas les éléments pour modifier le balisage est un peu plus facile que nous ne cherchons pas html dans les js.
Maintenant, nous devons nous rappeler de cacher les éléments si nous ne voulons pas l'utilisateur de les voir

Quelle méthode que j'utiliser, dépendra de divers facteurs. Généralement, je préfère la seconde parce que quand je veux modifier le balisage, je ne regarde pas dans le javascript.

Source

2013-05-02 16:04:39 Schleis

cela signifie-t-il si j'ai un profil d'utilisateur DOM fixe comme toujours, nous devrions utiliser la deuxième approche et si son DOM dynamique comme montrant des commentaires qui change constamment, devrait utiliser le premier – manish

En règle générale, oui j'irais avec quelque chose comme ça. – Schleis

La manipulation répétée de DOM implique souvent des frais généraux. De ce point de vue, la première méthode semble plus appropriée. En ce qui concerne la vitesse de l'appel ajax, les données sont récupérées de la même manière dans les deux méthodes, vous pouvez utiliser .ajaxStart() et .ajaxStop() pour avoir un effet de 'chargement'.

Source

2013-05-02 16:03:10 Paras

Attribuer dynamiquement la valeur à dom

Répondre

Questions connexes