JavaScript：管理/添加动态内容和页面加载的最佳方法

哪种技术更好地管理动态添加的内容以及需要在页面加载时呈现的内容

此处有一些选项（不确定哪一个更易于管理且性能更好）：

• 仅使用JavaScript呈现内容（也用于页面加载）
• 在页面加载时以模板形式呈现重复标记，并在动态添加内容时执行查找替换。例如：

  {Name}

• 不同的方法

---

另外，对于包含大量运动部件的复杂模块，如何处理此问题。

如果您使用的是node.js，它是一个救星。使用node.js，您还可以编写可以在服务器端和客户端执行的相同模板。在这一点上，你可以灵活地做任何你想做的事情，几乎没有重复

取决于您的服务器端体系结构。只需找到一个同时支持和js的模板引擎

然后栓接与局部视图API匹配的局部视图（它们都不同，并且与模板引擎分离）

现在在服务器和客户机上重新使用视图

因此，基本上您可以使用javascript和ajax增强标记，以便动态地部分更新部分视图

当然，您的RESTAPI将数据公开为json和html，因此您可以轻松地从服务器获取原始数据或呈现视图

---

如前所述，node.js使此功能非常容易实现；）

我要做的是使用jQuery插件创建DOM元素（）

我有这个网站，在那里我必须更新标题，并在用户通过facebook认证后创建上传表单。 我使用javascript来实现这一点，以避免完全刷新页面

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创建非常简单和直接

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

---

目前正在研究非节点解决方案

     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);
     });