Я хотел бы попросить больше мнения, чем вопрос: Что бы сообщество рекомендовало делать, когда вы должны делать веб-страницу с большим количеством данных, например, список продуктов, которые должны обладать некоторыми функциями, такими как покупка (добавление в корзину), сортировка и т.д., Если вам нужно манипулировать данными текущий продукт - цена, название, изображение, ссылка и другие атрибуты? Как вы это делаете в своих проектах?
Например, у нас есть страница с десятками продуктов, каждая из которых имеет атрибуты: цена, название, описание, изображение (URL), ссылка (URL). Как вы можете хранить данные, чтобы использовать их при некотором взаимодействии с пользователем? Лично я сделал это, просто вставив каждый атрибут в теги, например:
<div class="product" data-product_id="123">
<div class="pr_title">Title</div>
<div class="pr_body">Body</div>
<div class="pr_img"><img src="http://www.www.www/img.png"></div>
<div class="pr_link"><a href="#" onclick="location.href='http://www.stackoverflow.com/'; return false;">Buy!</a></div>
</div>
Таким образом, у меня есть моя структура html для презентации, и я работал с данными в jQuery, например:
var url = $('.product').find('.pr_link').find('a').attr('href');
Но когда проект стал большим, и к каждому элементу добавилось еще 10-15 атрибутов, получение данных из текущего продукта стало довольно сложным, и код стал в основном нечитаемым.
Я думал об использовании той же структуры, но для хранения данных в каком-то объекте, например:
var products = {
1: {
title: "abc",
description: "lorem ipsum",
price: 25.19,
img: "http://www.www.www/img.png",
link: "http://www.stackoverflow.com"
}
}
и сохраните разметку как можно проще, только используя элементы и стили, необходимые для дизайна с помощью css:
<div class="product" data-product_id="123">
<div class="title">Title</div>
<div>Body</div>
<img src="http://www.www.www/img.png">
<a href="#" onclick="location.href='http://www.stackoverflow.com/'; return false;">Buy!</a>
</div>
so onClick Мне нужно будет получить идентификатор продукта и запросить его в наших "продуктах":
var url = products[id].title;
В то время как это самый удобный способ работы с ним, требуется новый объект.
Другая идея заключалась в том, чтобы сохранить все данные в атрибутах data- родительского элемента div, например:
<div class="product" data-product_id="123" data-title="abc" data-body="Body">
но во многом, поскольку я знаю, что jQuery не работает с атрибутами данных хорошо (изначально).
Итак, каковы ваши предложения? Возможно, у вас есть еще лучшие идеи поделиться.
P.S. Я попытался найти некоторую информацию по этому вопросу, но, скорее всего, не смог найти способ сформулировать его, поэтому я ничего не нашел об этом. Если на сайтах обмена ссылками есть ссылки или даже похожие вопросы, не стесняйтесь публиковать их. Заранее благодарю вас!
