jQuery 和数据属性来处理所有 ajax 调用？

Question

我正在考虑一种方法，通过在属性链接上启用 ajax 来减少 javascript 代码量。示例:

<a href="/Default/Link.html" data-endpoint="/Ajax/Link.html" rel="targetId" async="true">Click me!</a>

async="true" 将禁用链接 (href) 的默认行为，并使用 data-endpoint 执行 ajax 调用value 并将其插入到 rel 中定义的元素 id 中。

我不是 JS 专家，所以我很感激使用这种方法的任何想法或陷阱。像cache: true等选项如果能够传入也很酷，但并不是真正需要的，因为我想这样做是为了获取包含或多或少实时数据的部分 View (不需要缓存)。

(这受到我看到的关于 Facebook 如何最小化代码的演讲的启发，但与他们如何优化所有内容到每一个字节相比，可能非常简单)

Answer 1

类似这样的

HTML

<a href="/Default/Link.html" 
    data-endpoint="/Ajax/Link.html" 
    data-target="targetId" 
    data-cache="false",
    data-async="true">Click me!</a>

jQuery

$('a[data-async="true"]').click(function(e){
    e.preventDefault();
    var self = $(this),
        url = self.data('endpoint'),
        target = self.data('target'),
        cache = self.data('cache');

    $.ajax({
        url: url,
        cache : cache,
        success: function(data){ 
                       if (target !== 'undefined'){
                          $('#'+target).html( data );
                       }
                 }
    });
});