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>");               
    }
4

4 回答 4

3

与本地化document.createElement将是最快的。但是，如果您的标记很大，那么采用这种方式会使其成为维护的噩梦。此外，将事物“可视化”并不容易。

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

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

于 2011-07-29T23:33:07.253 回答
1

你可以试试这个：

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

    div.innerHTML = '<object width=\"489\" height=\"414\" >' + 
        '.......'
    document.body.appendChild(div);
}
于 2011-07-29T23:25:55.773 回答
1

我知道有一个 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);               
    }

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

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

                document.writeln(html);               
        }

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

于 2011-07-29T23:28:28.753 回答
1

对于 HTML 的一般操作和添加，我推荐使用 jQuery。它使该过程变得更加容易和快捷。

您将在此处找到更多信息：

于 2011-07-29T23:32:04.487 回答