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