我正在尝试学习Web开发，所以我对各种语言和标记还没有太多的经验。我正在用博客创建一个网站，该博客从Tumblr v2 API读取JSON数据。从Tumblr获得JSON数据后，我想将每个帖子中的一些数据添加到我自己的网站的博客中，这是我一直在尝试使用的代码。
<script>
function loadBlogPosts(){
$.getJSON("http://api.tumblr.com/v2/blog/[MY_BLOG]/info?api_key=[MY_KEY]",
function(blogData){
$.each(blogData.posts, function(){
$(#main_content).append( [BUNCH OF NESTED HTML] );
});
}
);
}
</script>
在撰写本文之前，我认为最好对div中的每个博客帖子进行“布局”。所以我想出了这个：
<div class="post">
<div class="post_header">
<div class="post_title"></div>
<div class="post_author"></div>
<div class="post_date"></div>
</div>
<div class="post_content"></div>
<div class="post_footer"></div>
</div>
但这就是我被困住的地方。我知道我想做什么，但是我没有足够的JavaScript / JQuery / JSON / HTML经验来知道该怎么做。我想解析JSON博客数据，并针对每个帖子，获取帖子内容并将其应用于该div结构，同时将其写入/追加到“ main_content” div中。括在引号中，但是它变成了引号和斜线的真正混乱，而且看起来工作不正常。
那么，对我来说最好的方法是什么？有没有一种很好的方法来应用一大堆嵌套的HTML元素，同时用我的JSON数据中的内容填充它们呢？如果没有，我该怎么办？一般来说，我对HTML，JavaScript和Web编码还是很陌生，所以我可能会犯完全错误的错误！
如果您想要高性能：
在纯JavaScript中，性能最高的方法可能是使用 createDocumentFragment()
function postEl(json){ // create a function for the POST element
var post=document.createElement('div');
post.className='post';
var postHeader=document.createElement('div');
postHeader.className='post_header';
var postTitle=document.createElement('div');
postTitle.className='post_title';
postTitle.tectContent=json.title;
//more code
postHeader.appendChild(postTitle);
//more code
post.appendChild(postHeader);
return post;
}
function appendPosts(){ // append each post to a fragment. and then to the main
var frag=document.createDocumentFragment();
for(/*each post*/){
frag.appendChild(postEl(/*jsonPost*/));
}
document.getElementById('main_content').appendChild(frag);
}
预先创建结构也应该提高性能。
cloneNode
https://developer.mozilla.org/zh-CN/docs/Web/API/Node.cloneNode
https://developer.mozilla.org/zh-CN/docs/Web/API/document.createDocumentFragment
克隆节点还可以通过直接设置valuse而无需重新创建每个单独的节点来提高性能。
function appendPosts(js){
var node=document.createElemtnt('div'),
frag=document.createDocumentFragment();
node.innerHTML='<div class="post_header"><div class="post_title"></div><div class="post_author"></div><div class="post_date"></div></div><div class="post_content"></div><div class="post_footer"></div>';
for(var a=0,b;b=js.posts[a];++a){
var newNode=node.cloneNode(true),
childs=newNode.childNodes,
header=childs[0].childNodes;
header[0].textContent=b.title/*title from Postdata*/;
header[1].textContent=b.author/*author from Postdata*/;
header[2].textContent=b.date/*date from Postdata*/;
childs[1].textContent=b.content/*content from Postdata*/;
childs[2].textContent=b.footer/*footer from Postdata*/;
frag.appendChild(newNode);
}
document.getElementById('main_content').appendChild(frag);
}
function loadBlogPosts(){
$.getJSON("http://api.tumblr.com/v2/blog/[MY_BLOG]/info?api_key=[MY_KEY]",
appendPosts
)
此功能现在应该可以正常工作..但是由于我不完全了解json响应，您可能需要更改各种发布键。
注意：我将片段内容放入函数中，以便您了解其工作方式。您应该将postEl内容放入appendPosts函数中……（那也更快）
如果你有问题，就问吧。
编辑
不，他们不是全球人
var a,b,c,d; // not globals == var a;var b;var c;var d;
var a,b;c;d; // c d = gobal
// , comma affter a var allows you to not write 1000 times var.
编辑2
//.......
frag.appendChild(newNode);
}
var topNode=document.createElement('div');
topNode.className='post';
topNode.appendChild(frag);
document.getElementById('main_content').appendChild(topNode);
//.....
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句