Javascript——更好的 HTML 编写方法

发布于 2024-11-26 23:09:20 字数 601 浏览 1 评论 0原文

这个问题是关于 Javascript 为视频播放器编写 HTML 代码的问题。我认为有一些更快的方法（document.createElement、Jquery 等）。请告诉一些更好更快的方法来完成这个过程。提前致谢

    function createPlayer(videoSource){
            document.writeln("<div id=\"player\">");
            document.writeln("<object width=\"489\" height=\"414\" >");
            document.writeln("<param name=\"player\" value=\"bin-    debug/FlexPlayer.swf\">");
           //etc
            document.writeln("</embed>");
            document.writeln("</object>");
            document.writeln("</div>");               
    }

原文

This problem is about Javascript writing HTML code for video player. I think there are some faster methods(document.createElement,Jquery and etc). Please tell some better and faster methods for this procedure. Thanks in advance

    function createPlayer(videoSource){
            document.writeln("<div id=\"player\">");
            document.writeln("<object width=\"489\" height=\"414\" >");
            document.writeln("<param name=\"player\" value=\"bin-    debug/FlexPlayer.swf\">");
           //etc
            document.writeln("</embed>");
            document.writeln("</object>");
            document.writeln("</div>");               
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三人与歌 2024-12-03 23:09:20

使用 document.createElement 进行原生化将是最快的。但是，如果您的标记很大，那么采用这种方式将使其成为维护噩梦。而且，将事物“可视化”并不容易。

在这些情况下，您可能需要权衡客户端模板解决方案，例如 jQuery 模板或下划线模板或 John Resig 的微模板。

另一个性能提升是构建整个标记并在最后将其添加到 DOM（首先添加子级，然后将父级添加到 DOM）。

回复收藏 0 原文

听不够的曲调 2024-12-03 23:09:20

我知道有一个 jQuery 函数，它允许您创建一个模板 HTML 片段，稍后您可以仅使用 1 或 2 行代码重复使用该片段，添加变量并将其附加到页面。

为此，您将需要 jQuery （最新的应该没问题） http://jquery.com/

tmpl 函数的文档是此处：http://api.jquery.com/jquery.tmpl/

有关如何操作的详细信息要使用它，你最好阅读一个示例在 jQuery 文档中，我自己没有使用过它，所以无法为您写一个很好的例子，但是文档网站上有很棒的东西。

希望这有帮助

编辑：
实现该功能的一种资源密集型方法是，不是将每一行依次写入文档，而是将它们全部附加到一个字符串，然后在完成后写入一次。

例如：

function createPlayer(videoSource){
            var html="<div id=\"player\">";
            html+="<object width=\"489\" height=\"414\" >";

            //etc            
            document.writeln(html);               
    }

这更快，因为向文档写入一行比仅在内存中附加字符串使用更多的资源。为了获得最大速度，您甚至可以在函数外部声明 html var，并将其作为一个长字符串设置为标记，然后编写它 - 即

var html;
 function createPlayer(videoSource){
                html="<div id=\"player\"><object width=\"489\" height=\"414\" >"; //and so forth           

                document.writeln(html);               
        }

如果您可以证明较大的下载大小是合理的，如果可能的话，我会选择 jQuery 解决方案，它通常更易于管理——我过去已经做过很多脚本生成的 HTML，但它很快就变得难以维护。祝你好运

There is a jQuery function I know of that allows you to create a template HTML snippet which you can later use repeatedly with only 1 or 2 lines of code, adding in variables and appending it to the page.

For this you will need jQuery (latest should be fine) http://jquery.com/

Docs for the tmpl function are here: http://api.jquery.com/jquery.tmpl/

For details on how to use it you'd be best reading an example on the jQuery docs, I've not used it myself so can't write you a good example but there is great stuff on the docs site.

Hope this helps

EDIT:
A less resource intensive way to acheive that function would be to, rather than writing each line in turn to the document, just append them all to a string and then write that once when you are finished.

Eg:

function createPlayer(videoSource){
            var html="<div id=\"player\">";
            html+="<object width=\"489\" height=\"414\" >";

            //etc            
            document.writeln(html);               
    }

This is faster because writing a line to the document uses more resources than just appending a string in memory. For MAXIMUM SPEED you could even declare the html var outside of the function and just set it to the markup as one long string, then write it - i.e

var html;
 function createPlayer(videoSource){
                html="<div id=\"player\"><object width=\"489\" height=\"414\" >"; //and so forth           

                document.writeln(html);               
        }

If you can justify the larger download sizes I'd go for the jQuery solution if possible, it's generally a bit more manageable - I've done plenty script generated HTML in the past and it very quickly becomes a pain to maintain. Good luck

回复收藏 0 原文

猥︴琐丶欲为 2024-12-03 23:09:20

你可以试试这个：

function createPlayer(videosource){
    var div = document.createElement('div');

    div.innerHTML = '<object width=\"489\" height=\"414\" >' + 
        '.......'
    document.body.appendChild(div);
}

You can try this:

function createPlayer(videosource){
    var div = document.createElement('div');

    div.innerHTML = '<object width=\"489\" height=\"414\" >' + 
        '.......'
    document.body.appendChild(div);
}

回复收藏 0 原文