JQuery DOM манипулирование - более эффективный способ сделать это - PullRequest
Новая
       11

JQuery DOM манипулирование - более эффективный способ сделать это

0 голосов
/ 14 августа 2011

Я делаю много повторяющихся сегментов кода для мобильного html-приложения.Чтобы оценить время загрузки, я пытался сократить html-код и автоматизировать его с помощью jQuery, но jquery становится довольно многословным.Вот пример.Можно ли сделать подобные вещи менее многословными и более эффективными? 

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>   
<script type="text/javascript">

tplCnf = "\n\n\
        <center>\n\
        <div data-role='content' data-theme='b'>\n\
                <fieldset data-role='controlgroup' data-type='horizontal'>\n\
                    <input type='radio' name='FMT' id='' value='S' checked='checked' /><label   name='FMT' for=''>Serial</label>\n\
                    <input type='radio' name='FMT' id='' value='P' /><label                     name='FMT' for=''>Parallel</label>\n\
                    <input type='radio' name='FMT' id='' value='O' /><label                     name='FMT' for=''>Other</label>\n\
                </fieldset>\n\
        </div>\n\
        </center>";

$(document).ready(function()
{
    /* This is used to populate configuration types */          
    var groups = ['A','B','C','D','E','F'];

    /* add data config type types */
        for (var myLetters in groups){
            // clone fragment of html
            myTmpl = $(tplCnf); 

            // create a unique name for Configuratin radio boxes and corresponding labels
            myTmpl.find('input[name="FMT"]')                
                .attr("name", "FMT-"+groups[myLetters]);                
            myTmpl.find('label[name="FMT"]')                
                .attr("name", "FMT-"+groups[myLetters]);

            // apply id name to first configuration radio box 
            name1 = "preConfigRadio-" + groups[myLetters] + "1";            
            myTmpl.find('input[name="FMT-"+ groups[myLetters]]:eq(0)')
                .attr("id", name1)
            myTmpl.find('label[name="FMT-"+ groups[myLetters]]:eq(0)')
                .attr("for", name1);

            // apply id name to second configuration radio box 
            name2 = "preConfigRadio-" + groups[myLetters] + "2";            
            myTmpl.find('input[name="FMT-"+ groups[myLetters]]:eq(1)')
                .attr("id", name2);
            myTmpl.find('label[name="FMT-"+ groups[myLetters]]:eq(1)')
                .attr("for", name2);

            // apply id name to third configuration radio box 
            name3 = "preConfigRadio-" + groups[myLetters] + "3";
            myTmpl.find('input[name="FMT-"+ groups[myLetters]]:eq(2)')
                .attr("id", name3);
            myTmpl.find('label[name="FMT-"+ groups[myLetters]]:eq(2)')
                .attr("for", name3);

            // then append
            myTmpl.appendTo("#placeholder"+groups[myLetters]).trigger('create');                                    
        }
});

</script>   

</head> 
<body>  

<!-- ***   Navigation bar   *** -->
<div data-role="page"  id="preHelpTab">
<div data-role="header" data-position="inline">

<input type="hidden" id="preBeginRequestDtls" name="BeginRequestDtls" value=""  />

        <div id='groupA' class='preGroups'> 
        This is Group A
            <div id='placeholderA' ></div>  

        </div>

        <div id='groupB' class='preGroups'> 
        This is Group B
            <div id='placeholderB' ></div>  
        </div>

        <div id='groupC' class='preGroups'> 
        This is Group C
            <div id='placeholderC' ></div>  
        </div>

        <div id='groupD' class='preGroups'> 
        This is Group D
            <div id='placeholderD' ></div>  
        </div>

        <div id='groupE' class='preGroups'> 
        This is Group E
            <div id='placeholderE' ></div>  
        </div>

        <div id='groupF' class='preGroups'> 
        This is Group F
            <div id='placeholderF' ></div>  
        </div>
</div>
</div>

Ответы [ 2 ]

0 голосов
/ 14 августа 2011

Рассмотрите возможность использования jQuery Templates

Создайте один шаблон элемента ввода, например, так: 

<script id="inputTemplate" type="text/html">
    <input type='radio' name="${groupName}" id="${id}" value="${value}" />
    <label name="${labelName}" for="${for}">${labelValue}</label>
</script>

Затем вы можете создать шаблон для группы входов, например:

<script id="groupTemplate" type="text/html">
    <center>
        <div data-role='content' data-theme='b'>
            <fieldset data-role='controlgroup' data-type='horizontal'>
                ${inputItem}
            </fieldset>
        </div>
    </center>
</script>

Теперь, используя оба из них, фактический код jQuery станет намного более управляемым !!

Определите ваш DataSet для входных данных: 

var inputDataSet = [
    { groupName: "FMT-A", id: 1, value: "", labelName: "1A", for: "", labelValue: "123" },
    { groupName: "FMT-A", id: 2, value: "", labelName: "2A", for: "", labelValue: "123123" },
    { groupName: "FMT-A", id: 3, value: "", labelName: "3A", for: "", labelValue: "1231231" }
]

Наконецодну единственную строку для приведения и добавления: 

$("#groupTemplate").tmpl($("#inputTemplate").tmpl(inputDataSet)).appendTo("#placeholder");

Я знаю, что ваши действительные значения и логика не соответствуют друг другу, но, по сути, именно так вы и должны поступать.Шаблоны jQuery позволяют значительно улучшить управляемость кода и более чистые манипуляции с DOM в таких ситуациях, когда вы хотите вставить HTML-элементы на основе переменных данных на страницу.

Кроме того, они широко используются при вызовах AJAX, поскольку вы можете без труда отображать данные результатов POST.

0 голосов
/ 14 августа 2011

Логика выглядит хорошо, но вы можете улучшить производительность кода, кэшируя локальные переменные, а не находя их несколько раз.Взгляните на это 

$(document).ready(function()
{
    /* This is used to populate configuration types */          
    var groups = ['A','B','C','D','E','F'], inputs, label, name;

    /* add data config type types */
        for (var myLetters in groups){
            // clone fragment of html
            myTmpl = $(tplCnf); 

            // create a unique name for Configuratin radio boxes and corresponding labels
            inputs = myTmpl.find('input[name="FMT"]')                
                .attr("name", "FMT-"+groups[myLetters]);                
            lables = myTmpl.find('label[name="FMT"]')                
                .attr("name", "FMT-"+groups[myLetters]);

            for(var i =0;i<3;i++){
               name = "preConfigRadio-" + groups[myLetters] + (i+1);            
               inputs.eq(i).attr("id", name)
               labels.eq(i).attr("for", name);
            }

            // then append
            myTmpl.appendTo("#placeholder"+groups[myLetters]).trigger('create');                                    
        }
});
...