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

JavaScript: Best approach for managing/adding content on fly and page load

本文关键字：加载 方法 最佳 管理 添加 动态 JavaScript      更新时间：2023-09-26

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

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

  • 仅使用JavaScript渲染内容(也用于页面加载)
  • 在页面加载时呈现重复标记作为模板，并在动态添加内容时执行查找替换。例如:<div id={Id}>{Name}</div>
  • 不同的方法吗?

还有如何处理这个复杂的模块与大量的移动部件。

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

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

然后绑定与你的部分视图API匹配的部分视图(它们都是不同的，与模板引擎分开)

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

所以基本上你用javascript和ajax增强你的标记，在飞行中部分更新部分视图。当然，你的REST API将数据暴露为json和html，所以你可以很容易地从服务器获得原始数据或渲染视图。

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

我使用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);
     });
相关文章：