jquery - 为不同的显示逻辑集共享相同的 AJAX 调用

Question

我正在用 json 填充 div，但我认为这不是最好的方法。似乎有很多代码，有些似乎可以共享。

//data for DOM
$.getJSON('json/device.json', function (data) {
    var items = [];
    $.each(data[0].attributes, function (key, val) {
        items.push('<li id="' + key + '">' + '  ' + val + '</li>');
    });

    $('<ol/>', {
        'class': 'raw-list',
        html: items.join('')
    }).hide().fadeIn().appendTo('.json');
});

$.getJSON('json/device.json', function (data) {
    var items = [];
    $.each(data[0].status, function (key, val) {
        items.push(val);
    });

    $('<span/>', {
        'class': 'sort-label error',
        html: items.join('')
    }).hide().fadeIn().appendTo('.status-input .sort-label');
});

$.getJSON('json/device.json', function (data) {
    var items = [];
    $.each(data[0].location, function (key, val) {
        items.push(val);
    });

    $('<span/>', {
        'class': 'sort-label',
        html: items.join('')
    }).hide().fadeIn().appendTo('.location-input .sort-label');
});

$.getJSON('json/device.json', function (data) {
    var items = [];
    $.each(data[0].type, function (key, val) {
        items.push(val);
    });

    $('<span/>', {
        'class': 'sort-label',
        html: items.join('')
    }).hide().fadeIn().appendTo('.type-input .sort-label');
});

$.getJSON('json/device.json', function (data) {
    var items = [];
    $.each(data[0].brand, function (key, val) {
        items.push(val);
    });

    $('<span/>', {
        'class': 'sort-label',
        html: items.join('')
    }).hide().fadeIn().appendTo('.brand-input .sort-label');
});

Answer 1

$.getJSON如果您每次都检索相同的数据，则不需要多次调用。

例如：

$.getJSON('json/device.json', function(data) {

  // First set of display logic
  var items = [];
  $.each(data[0].attributes, function (key, val) {
     items.push('<li id="' + key + '">' + '  ' + val + '</li>');
  });

  $('<ol/>', {
    'class': 'raw-list',
    html: items.join('')
  })
  .hide().fadeIn().appendTo('.json');

  // Second set of display logic
  var items = [];
  $.each(data[0].status, function (key, val) {
    items.push(val);
  });

  $('<span/>', {
    'class': 'sort-label error',
    html: items.join('')
  })
  .hide().fadeIn().appendTo('.status-input .sort-label');

});

由于您对大多数数据集的显示逻辑使用了类似的代码块，因此您可以将其包装到一个函数中：

function displaySortLabel(items, parentClass) {
  $('<span/>', {
    'class': 'sort-label',
    html: items.join('')
  }).hide().fadeIn().appendTo('.' + parentClass +' .sort-label');
}

然后通过以下方式调用它：

displaySortLabel(items, "location-input");