Прежде всего, отличная работа! Это впечатляющая работа для новичка в javascript
Мало что можно улучшить, но я не вижу, что вы делаете что-то не так.Может быть, только логика с remainder слишком запутана.Могу поспорить, что должен быть более простой способ
Удобочитаемость
Ваш код, несомненно, будет легче читать и понимать, если бы у вас была логика представления (шаблонизации), логика запросаи разделенная логика «массирования» данных
Логика представления
Как правило, построение HTML-структур «вручную» (createElement, appendChild) занимает большеусилия и, возможно, более запутанно, чем рендеринг строки с функцией шаблона (вроде как вы сделали) и вставка результата туда, где он вам нужен.Смешивание этих подходов еще более подвержено ошибкам, чем выполнение всего «вручную».Поэтому я хотел бы предложить вам одну функцию представления / шаблона, которая будет принимать данные и возвращать строку
function renderTable(data) {
var result = '<div>';
// build the result string...
result += '</div>';
return result;
}
// and then...
targetEl.innerHTML = renderTable(data);
. Вы также можете использовать микро-шаблон .Тот или иной вид шаблонирования был бы необходим для большего применения.Познакомьтесь с шаблонизаторами.Для вашего проекта хорошо подходит сборка строк с использованием JavaScript.Хотя есть более продвинутая техника , которую вы можете рассмотреть
Логика "массирования" данных
Ну, это сводится к наличию вашего шаблонафункция не «умна» в отношении своего контекста (базовое разделение интересов) и использует только данныеНе «готовить» его, а только есть:)
Итак, вместо этого
function renderTable(data) {
var result = '<div>';
var something = data.abc * data.xyz;
// do something with something here
result += '</div>';
return result;
}
targetEl.innerHTML = renderTable(data);
... вы делаете это
function adaptResponsePayloadData(data) {
var result = { ...data };
result.something = result.abc * result.xyz;
return result;
}
function renderTable(data) {
// ...
}
targetEl.innerHTML = renderTable(adaptResponsePayloadData(data));
ЭтоПример так называемого шаблона проектирования адаптера.Это правильный случай для его использования.Существует множество других шаблонов проектирования , и я настоятельно рекомендую выделить время, чтобы ознакомиться с ними
Логика запроса
Еще одна проблема, связанная с разделением здесь,Вы можете иметь логику запроса в отдельной функции, аналогично тому, как мы отделили «массаж» от вида выше
const API_ENDPOINT_URL = 'https://api.iextrading.com/1.0/stock/spy/news';
function fetchData(callback) {
var request = new XMLHttpRequest();
request.open('GET', API_ENDPOINT_URL);
request.onLoad(() => {
var data = JSON.parse(request.responseText);
callback(data);
});
request.send();
}
// ... and then
fetchData(data => {
// ...
targetEl.innerHTML = renderTable(adaptResponsePayloadData(data));
});
Примечание по порядку выполнения
Естьэмпирическое правило, чтобы было ясно, когда ваш код запускаетсяЭто совершенно неважно, но есть возможность отделить то, что от когда на уровне кода
function goOn() { // there are many conventional names for this, like `main`
fetchData(data => {
document.body.innerHTML = renderTable(adaptResponsePayloadData(data));
});
}
window.onload = goOn;
Примечания по HTML и CSS
Тебе не нужно <tbody>.Это не нужно, если вы не хотите выделять что-то с помощью CSS
Избегайте использования встроенных стилей, таких как <td style="width: 33.33%; padding: 0px 25px">.Вы можете выразить это с помощью CSS
Вам не нужен класс divBorder.Добавьте отступ к родителю td и границу к ребенку table
Другие мелкие заметки
Условно имена с первой заглавной буквойбуквы являются конструкторами объектов или классами.Просто сделайте обычные имена переменных lowerCamelCase, например jsonHeadline
JSON - это термин для обозначения, которое мы знаем.Когда мы анализируем строку этой нотации, она просто становится data или contextData, вы получаете это ... Тогда, что внутри этих данных становится просто headline
Делайте все возможное для именования переменных, чтобычто вам не нужно писать комментарии, чтобы понять, что вы имели в виду.Найдите другие полезные советы здесь
Убедитесь, что в вашем производственном коде нет console.log операторов
let, которое безопаснее ключевого слова var.Вы никогда не загрязните глобальную область видимости этим
Обратите внимание, что на StackExchange есть Проверка кода, где вы можете узнать много других аспектов написания хорошего кода
Ты отлично справился.Удачи вам в вашем путешествии!:)