Оно работает. Но так ли лучше?

Question

Когда я начинаю изучать новый язык, я всегда чувствую, что делаю это не практичным, стандартным способом. Итак, вот вопрос относительно jQuery, и если то, что я делаю, приемлемо.

У меня 3 изображения.

<img src="del.png" class="delete user" />
<img src="del.png" class="delete event" />
<img src="del.png" class="delete recipe" />

Затем jQuery обнаруживает событие щелчка на $ ('. Delete').

$('.delete').click(function() {
    if( $(this).hasClass('user') ) {
        action = 'user'
    }

    if( $(this).hasClass('event') ) {
        action = 'event'
    }

   if( $(this).hasClass('recipe') ) {
        action = 'recipe'
    }

   // I then use ajax, send the action as $_POST to the PHP script
   // and it tells PHP what to delete.

   // Doing it this way, I don't have to use 3 onclick functions and 3 ajax functions.


});

Answer 1

Я согласен с @Tommi: вы не позволяете себе писать больше кода, чем нужно, а также консолидируете свой вызов ajax в одном месте вместо того, чтобы иметь 3 примерно идентичных вызова ajax (или писать функцию ajax и вызывать ее из отдельные места).

Если это работает для вас и не сбивает с толку, я не думаю, что с этим что-то не так. На самом деле, есть несколько способов сделать то, что вы пытаетесь сделать, уродливым и не элегантным способом, но это не один из них.

Answer 2

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

Answer 3

Что, если объект имеет пользователя и событие в качестве классов, тогда действие будет событием, а не пользователем?

Answer 4

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

Следующее решение получает список классов div, по которым щелкнули. Затем он извлекает последний класс в списке.

$('.delete').click(function() {

   // Your 'action' class type must always be the last in the list
   action = $(this).attr('class').split(' ').slice(-1); 

   // Remaining logic goes here...

});

Answer 5

Предположим, у вас есть структура LI (или что-то подобное):

<ul>
    <li>Some text <a href="delete.php?do=user">delete</a></li>
    <li>Some text <a href="delete.php?do=event">delete</a></li>
    <li>Some text <a href="delete.php?do=recipe">delete</a></li>
</ul>

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

$('.delete').click(function(){
    var t=$(this);
    jQuery.ajax({
        type: "GET",
        url: t.attr('href'),
        cache: false,
        success: function(data){
            t.parent().remove(); // you remove the whole li tag
        }
    });
});

Конечно, если вам нужно запускать различные функции при успешном выполнении ajax, то я думаю, что ваш выбор - лучший выбор.

Answer 6

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

function getType(elem)
{
    var m = /\btype:([a-zA-Z_]+)\b/.exec(elem.className);
    return m ? m[1] : null;
}

function deleteType(type)
{
    // delete code instead of alert
    alert("Deleting type " + type);
}

$(function()
{
    $(".delete").click(function(ev)
    {
        var type = getType(this);
        if (type)
        {
            deleteType(type);
        }
        return false;
    });
});

используется для таких элементов, как

<a href="#" class="delete type:foo">delete foo</a>
<a href="#" class="delete type:bar xxx">delete bar</a>
<a href="#" class="delete">do nothing</a>

Нет дополнительных кодов для добавления новых типов.

Answer 7

Этот код прекрасно виден изолированно. Однако я бы предложил использовать событие onClick для <a> напрямую, а не полагаться на jquery, добавляющий функциональность вашим элементам.

Хотя jquery выполняет приемлемую работу, вы в конечном итоге получаете код, который трудно прочитать, потому что конечный результат не отображает факт, что на самом деле есть обработчик событий, связанный с событием onClick. Лично я предпочитаю видеть, какой код на самом деле выполняется, используя такие инструменты, как Firebug, чтобы просмотреть страницу, которую мне обслуживают.

Это не проблема, если вы единственный человек, который когда-либо читал ваш код.

Answer 8

Возможно, вы захотите создать отдельную функцию для вашего AJAX и передать в нее action.

Поскольку ваш код стоит, он позволит вам динамически изменять действия и выполнять несколько действий для одного img. Я бы задокументировал, является ли это преднамеренным.

Answer 9

Это решение делает вашу систему зависимой от JavaScript для работы. Более надежное решение состоит в том, чтобы создать что-то, что по крайней мере функционально без javascript, а затем при загрузке использовать javascript для изменения поведения кнопок, чтобы сделать что-то более ajax-y.

Для этого требуется больше кода, и не выглядит элегантно. Но если вы ищете «лучшее» решение, возможно, вы захотите взвесить и определить, является ли обработка углового случая «без JavaScript» приоритетной задачей.

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