Лучшая петля с JQuery?

Question

Я делаю это в javascript и просто задаюсь вопросом, может ли это быть решено более элегантно, используя больше jquery?

var tbl="";
    for(var i=1; i<13; i++) {
        // creating 12 div's, one for each month
        tbl += "<div class='month' id='m"+i+"'>" + months[i-1];

        // creating 31 divs for each day in month
        for(var j=1; j<32; j++) { 
            tbl += "<div class='monthday' id='m"+i+"d"+j+"'>"+
                        "<div class='date_header'>"+j+"</div>" +
                        "<div class='date_info'></div>" +
                   "</div>";
        }
        // close month-div
        tbl += "</div>";

        // insert a clear for each 4th month to get a nice style-break
        if(i==4 || i==8 || i==12) {
            tbl += "<br style='clear: both'>";
        }
    }

    // finished
    $("#friendsinfo").html(tbl);

Answer 1

Поиск jQuery Templates .Они позволяют вам делать то, что вы делаете, без суеты ручного объединения строк в подобном цикле.Вот пример того, как это работает:

var template = '<a href="${link}" id="{$id}">${anchor}</a>';
$.template('myTemplate', template);
var data = [];
for (var x = 0; x < something.length; x++) {
    var newLink = {
        link: something[x].url,
        id: 'mylink-' + something[x].id,
        anchor: something[x].title
    };
    data.push(newLink);
}

$.tmpl('myTemplate', data).appendTo('#myContainer');

Я использовал их для нескольких проектов, и они сделали чудеса для создания сложных блоков HTML.

Answer 2

Вещи, которые вы должны помнить при создании календаря:

1. Каждый месяц имеет разное количество дней.

2. Февраль имеет 29 дней в течениевисокосные годы.

3. Рассчитать високосный год сложнее, чем думает большинство людей.Годы, делимые на 4, являются високосными.Однако годы, которые делятся поровну на 100, не являются високосными, если только они не делятся поровну на 400.

Если вы хотите написать свой собственный код, мало чтоиспользование jQuery позволит сократить количество циклов, которые вы должны использовать.Однако я бы посоветовал вам избавиться от этой части:

// insert a clear for each 4th month to get a nice style-break
if(i==4 || i==8 || i==12) {
    tbl += "<br style='clear: both'>";
}

Используйте хороший CSS, чтобы правильно очистить строки, или используйте вместо этого таблицу (что на самом деле может быть более уместным в этом случае).

В любом случае, вы можете захотеть взглянуть на компонент пользовательского интерфейса jQuery datepicker.Я использовал это много, и это работает очень хорошо.Очевидно, это зависит от того, нужен ли вам на самом деле сборщик дат, или вы просто пытаетесь показать полный годовой календарь для расписания или чего-то еще.

http://jqueryui.com/demos/datepicker/

В качестве альтернативы, если вам просто нужночтобы отобразить полный календарь, посмотрите на существующий скрипт.Такого рода вещи уже тысячи раз делали другие люди, поэтому нет смысла заново изобретать колесо.

Например, попробуйте здесь: http://www.jsmadeeasy.com/javascripts/Calendars/list_test.asp

Одна заключительная мысль состоит в том, что ономожет быть более эффективно вывести календарь с помощью PHP или любого другого языка, который вы используете, и сделать div скрытым с помощью CSS.Тогда просто сделайте JavaScript, чтобы показать / скрыть календарь, а не создавать его каждый раз.

Answer 3

Создание html-разметки с использованием конкатенации строк не очень хорошая идея, похожая на jquery =)

Я бы предпочел сделать шаблон HTML для этого календаря и заполнить его данными.Вы можете использовать плагин jQuery Template для этого (ссылка на страницу плагина с jquery.com)

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

Answer 4

Модуль оператора.Вместо:

if(i==4 || i==8 || i==12) {

вы можете сделать:

if (i%4){

Кроме того, конкатенация строк медленная.Я думаю быстрее добавить ваши строки HTML в массив и присоединиться к ним ().Может быть не так:)