JavaScript：用于管理/添加内容和网页加载的最佳方法 [英] JavaScript: Best approach for managing/adding content on fly and page load

问题描述

哪种技术更好地管理即时添加的内容，并且还需要在页面加载时呈现。

这里有一些选项（不确定哪一个更容易管理，性能更好）：

• 仅使用JavaScript呈现内容（也用于页面加载）
  
• 在页面加载时将重复标记呈现为模板，并在添加内容时执行查找替换。例如：< div id = {Id}> {Name}< / div>
li>

另外，如何处理有大量运动部件的复杂模块。

解决方案

我所做的是使用jQuery插件来创建DOM元素（ http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype ）

我有这个网站，我必须更新标题并在用户通过Facebook进行身份验证后创建上传表单。
我正在用javascript来做这件事，以避免整个页面刷新

  var upload_form = $ .FORM（{action ：main，方法：post，enctype：multipart / form-data}，
 $ .DIV（{className：fields}，
 $ .INPUT（{name： title，value：titulo de la foto，className：overlay，id：name}），
 $ .INPUT（{name：location，value：Lugar donde fue tomada， className：overlay，id：location}），
 $ b $ .INPUT（{type：hidden，value：response.session.uid}），
 $ .INPUT （{type：hidden，id：username_input}），
 
 $ .DIV（{className：image_upload}，
 $ .SPAN（{}，
 $ .INPUT（{type：file，name：image，className：overlay}）
）
），
 
 $ .A（{href ：javascript :;，id：submit}，$ .IMG（{src：public / images / upload.jpg}））
）
）; 
 
 var logged_header = $ .SPAN（{}，
 $ .A（{href：javascript :;}，
 $ .IMG（{src：http： // picture.facebook.com/+ response.session.uid +/ picture？type = square，
 className：picture，height：20，align：left}）
 $，
 $ .SPAN（{id：username}，Cargando ...），
 $ .A（{id：fb_logout}，（cerrar sesion） ）
）; 
  

DOM创建非常简单直接。

  $。ELEMENTNAME（{< json object with attributes>}，content）; 
  

现在 upload_form 和 logged_header 包含HTML。
注意 logged_header 在添加到文档后如何使用一些变量更新。

  FB.Event.subscribe（'auth.login'，function（response）{
 $（＃login）。html（）。append（logged_header）; 
 $ （#upload.content）。html（）。append（upload_form）; 
 
 $（＃username）。html（rows [0] .name +）; 
 $（＃username_input）.val（rows [0] .name）; 
}）; 
  

Which technique is better to manage content that gets added on the fly and also need to be rendered on page load.

Some options here (not sure which one is easier to manage and better for performance):

• render content using JavaScript only (also for page load)
• render duplicate markup as template on page load and do a find replace when adding content on fly. For example: <div id={Id}>{Name}</div>
• different approach?

Also how to handle this for complicated modules with lots of moving parts.

解决方案

What I do is use a jQuery plugin to create the DOM elements (http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype)

I have this site, where i have to update the header and create the upload form once the user has been authenticated with facebook. I am doing this with javascript, to avoid a complete page refresh

var upload_form = $.FORM({ action: "main", method: "post", enctype: "multipart/form-data" }, 
     $.DIV({ className: "fields" }, 
           $.INPUT({ name: "title", value: "Titulo de la foto", className: "overlay", id: "name" }),
           $.INPUT({ name: "location", value: "Lugar donde fue tomada", className: "overlay", id: "location" }),

           $.INPUT({ type: "hidden", value: response.session.uid}),
           $.INPUT({ type: "hidden", id: "username_input" }),

           $.DIV({ className: "image_upload" },
                 $.SPAN({}, 
                        $.INPUT({ type: "file", name: "image", className: "overlay"})
                       )
                ),

           $.A({ href: "javascript:;", id: "submit" }, $.IMG({ src:"public/images/upload.jpg" }))
          )
    );

 var logged_header = $.SPAN({},
       $.A({ href: "javascript:;" },
           $.IMG({ src: "http://graph.facebook.com/" + response.session.uid + "/picture?type=square", 
                 className: "picture", height: "20", align: "left" })
          ),
       $.SPAN({ id:"username" }, "Cargando... "),
       $.A({ id: "fb_logout" }, "(cerrar sesion)")
      );

DOM creation is very simple and straight forward.

$.ELEMENTNAME({ <json object with attributes> }, content);

Now upload_form and logged_header contain HTML. notice how logged_header gets updated with some variables after added to the document.

     FB.Event.subscribe('auth.login', function(response) {
        $("#login").html("").append(logged_header);
        $("#upload .content").html("").append(upload_form);

        $("#username").html(rows[0].name + " ");
        $("#username_input").val(rows[0].name);
     });

这篇关于JavaScript：用于管理/添加内容和网页加载的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！