Использование javascript: синтаксис функции и селектор jQuery для выполнения вызовов Ajax

Question

Я делаю front-end dev только в 10% случаев, и мне любопытно, какой способ лучше делать вызовы ajax.Эти вызовы просто отправляют данные в веб-приложение, которое указывает имя действия и идентификатор.

<a href='javascript:addToList({'action':'set-default-time-zone','id':23})'>set default timezone</a>
<div class='add-to-list action-set-default-time-zone id-23'>set default timezone</div>

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

Я реализовал метод div следующим образом:

$(document).ready(function(){
    $('.add-to-list').click(function(){
        var id=getId($(this).attr("class"));
        var action=getAction($(this).attr("class"));
        $.post('/api/' + action,function(data){
          ...
        },'json')
    });
});


function getAction(str){
    var parts=str.split(' ');
    var phrase='action-';
    for(i=0; i<parts.length; i++){
        var val=parts[i].match(phrase);
        if(val!=null){
            var action=parts[i].split('action-');
            return action[1];
        }
    }
}

function getId(piece){
    var parts=piece.split('id-');
    var frag_id=parts[parts.length-1];
    var part_id=frag_id.split('-');
    var id=part_id[part_id.length-1];
    return id;
}

Метод связи может показаться простым.

thx

Answer 1

Ну, второй подход - это то, что вы бы назвали Ненавязчивый JavaScript . Считается, что это более надежный подход (здесь я не буду использовать термин лучше ).

Однако ваша реализация немного сложна. Это может быть уменьшено до:

HTML:

<div class="add-to-list" data-action="set-default-time-zone" data-id="23">
    set default timezone
</div>

JavaScript:

$(document).ready(function () {
    $('.add-to-list').click(function () {
        var id = $(this).attr("data-id");
        var action = $(this).attr("data-action");

        $.post('/api/' + action, function(data) {
          // ...
        }, 'json')
    });
});

Спецификация HTML5 позволяет атрибутам, начинающимся с data-, переносить пользовательские данные. И он также обратно совместим (будет работать со старыми браузерами.)

Answer 2

Метод 1:

<a href='javascript:addToList({'action':'set-default-time-zone','id':23})'>set default timezone</a>

Метод 2:

<div class='add-to-list action-set-default-time-zone id-23'>set default timezone</div>

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