Javascript - лучший способ написания HTML

Question

Эта проблема связана с написанием 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>");               
    }

Answer 1

Быть нативным с document.createElement будет самым быстрым. Однако, если ваша разметка велика, такой путь превращает ее в кошмар обслуживания. Также нелегко «визуализировать» вещи.

В этих случаях вы можете пойти на компромисс с шаблонными решениями на стороне клиента, такими как шаблоны jQuery или шаблоны подчеркивания, или микротемблирование Джона Резига.

Еще одним повышением производительности является создание всей разметки и добавление ее в DOM в самом конце (сначала добавьте потомков, а затем добавьте родителя в DOM).

Answer 2

Существует известная мне функция jQuery, которая позволяет вам создавать фрагмент HTML-кода шаблона, который впоследствии можно будет многократно использовать только с 1 или 2 строками кода, добавляя переменные и добавляя его на страницу.

Для этого вам понадобится jQuery (последний должен быть в порядке) http://jquery.com/

Документы для функции tmpl здесь: http://api.jquery.com/jquery.tmpl/

Для получения подробных сведений о том, как его использовать, лучше всего почитать пример на документах jQuery, я сам им не пользовался, поэтому не могу написать хороший пример, но на сайте документации есть отличные материалы.

Надеюсь, это поможет

EDIT: Менее ресурсоемким способом реализации этой функции было бы вместо того, чтобы записывать каждую строку по очереди в документ, просто добавить их все в строку и затем написать это один раз, когда вы закончите.

Например:

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

            //etc            
            document.writeln(html);               
    }

Это быстрее, потому что запись строки в документ требует больше ресурсов, чем просто добавление строки в память. Для МАКСИМАЛЬНОЙ СКОРОСТИ вы можете даже объявить HTML-переменную вне функции и просто установить ее в разметку как одну длинную строку, а затем записать ее - т.е.

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

                document.writeln(html);               
        }

Если вы можете оправдать большие размеры загрузок, которые я бы выбрал для решения jQuery, если это возможно, оно, как правило, немного более управляемо - в прошлом я сделал много HTML-кода, сгенерированного скриптами, и его очень быстро стало трудно поддерживать. Удачи

Answer 3

Для общего манипулирования и добавления HTML я бы порекомендовал jQuery. Это делает процесс намного проще и быстрее.

Более подробную информацию вы найдете здесь:

• jQuery Методы манипуляции - http://api.jquery.com/category/manipulation/
• jQuery Tutorials - http://docs.jquery.com/Tutorials

Answer 4

Вы можете попробовать это:

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

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