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

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

这里有一些选项(不确定哪一个更容易管理,更好的性能):

  • 仅使用JavaScript呈现内容(也适用于页面加载)
  • 在页面加载时将重复标记呈现为模板,并在飞行中添加内容时执行查找替换。 例如:
    {Name}

  • 不同的方法?

此外,如何处理具有大量运动部件的复杂模块。

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

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

然后关闭与您的局部视图API匹配的部分视图(它们都是不同的并且与模板引擎分开)

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

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

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

如前所述node.js使这个function很容易实现;)

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

我有这个网站,我必须更新标题,并在用户通过Facebookvalidation后创建上传表单。 我用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({  }, content); 

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