Блог

Главная - Вопросы по программированию - Уменьшение повторения javascript

Уменьшение повторения javascript

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть система меню с вкладками, и при нажатии на вкладку загружается определенная страница в соответствующий раздел вкладок.

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

Каждый экземпляр «TAB» — это название вкладки, на которую был нажат. URL-адрес {% … %} раздел — это динамический URL-адрес Django.

Я думал, что если бы название вкладки и URL были помещены в массив видов, это, по крайней мере, позволило бы создавать все функции в массовом порядке. Но есть ли способ упростить его еще больше?

Спасибо за любую помощь.

     function loadTABlog() {
        $("#TABlog").load("{% url list_TABlog person.id %}", function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#TABlog").html(msg   xhr.status   " "   xhr.statusText);
            }
        });
        return false;
    };
    $("#loadTABlog").click(function() {
        $("#TABlog").empty().html('<img src="{{ STATIC_URL }}loading.gif" class="ajaxloader" />');
        loadTABlog();
    });

Ответ №1:

Я бы попытался сделать его управляемым данными. Что-то вроде

 var tabs = [
    {activator: "#loadTabLog",
     element: "#tabLog",
     url: "{% url list_tab_log 9000 %}"},
    ...
];

И выполните итерацию по нему, назначив обработчики:

 for (var i = 0; i < tabs.length;   i) {
    var t = tabs[i];
    $(t.activator).click(function() {
        $(t.element).empty().html("<img>");
        ...
        $(t.element).load(t.url.replace("9000", actual_user_id), ...);
    });
}

Комментарии:

1. Привет, Аянами. Это интересная идея. Я попытался реализовать то, что вы предложили, но, похоже, работает только одна из вкладок — последняя. Если я удалю раздел активатора последних вкладок, он будет работать, но для новой последней вкладки.

2. И если я помещаю предупреждение в цикл for для t.url, он всегда показывает один и тот же URL, независимо от того, какая вкладка нажата.

3. @user973347 не видя кода или, предпочтительно, jsfiddle, я вообще не могу вам помочь ._.

4. $.each(вкладки, функция() { console.log(this.activator ‘ ‘ this.element); $(this.element).empty().html(‘<img src=»{{ STATIC_URL }}loading.gif » class=»ajaxloader» />’); $(this.element).load(this.url, функция (ответ, статус, xhr) { if (status == «ошибка») { var msg = «Извините, но произошла ошибка: «; $($(this).attr (‘href’)).html(msg xhr.status » » xhr.statusText); } возвращает false; }); });

5. jsfiddle.net/8tEA4 Это исправляет проблему. Теперь я понимаю, что из-за того, что это язык поздней привязки, «я» в цикле существовал только в конце цикла для использования. Следовательно, почему это всегда была последняя вкладка. Еще раз спасибо за вашу помощь, Аянами.