Question

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

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

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

如何处理具有大量活动部件的复杂模块。

Answer 1

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

Answer 2

取决于您的服务器端架构。只需找到具有和js支持的模板引擎即可。

然后屏蔽与您的局部视图API匹配的部分视图（它们都是不同的，与模板引擎分开）

现在在服务器和客户端上重复使用您的视图。

所以基本上你用javascript和ajax增强你的标记，以便动态地部分更新部分视图。

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

如上所述node.js使这个功能很容易实现;）

Answer 3

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

我有这个网站，我必须更新标题并在用户通过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);

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

JavaScript：在飞行和页面加载时管理/添加内容的最佳方法

3 个答案: