Альтернатива атрибуту данных в Jquery

Question

У меня есть веб-страница, где пользователь может выбрать один из разных пакетов для покупки из списка.Детали пакета поступают из базы данных.

HTML-код

<div data-package='2346343' class="retail-package">Cost : 10$</div> 
<div data-package='5465654' class="retail-package">Cost : 20$</div> 
<div data-package='3455675' class="retail-package">Cost : 30$</div> 

Jquery Code

$('.retail-package').on('click', function() {
   $(this).addClass("selected-package");
   var selectedPackage = $(this).data("package");
});

Сейчас вышеКод показывает, как мы (особенно я) обычно выбираем конкретную вещь из списка при нажатии. В этой процедуре, как вы можете видеть в HTML-коде, я выдаю или показываю pakcageId пользователям, т.е. любой может сделать проверкуэлемент в браузере и просматривать или даже манипулировать атрибутом data-package, для безопасности я проверяю выбранные данные на стороне сервера.

Мой вопрос

Есть лиспособ скрыть это подвергание данных, или есть какой-то другой более чистый способ сделать это, потому что я видел людей, использующих Angular, Webpack и т. д., способных реализовать list selection без выдачи или показа любых данных, которые можно увидетьФункция проверки элементов в браузере.

Примечание: извините, если мой вопрос слишком прост, если это невозможно сделать с помощью jquery, какие еще технологии я могу использовать?

Answer 1

Вы можете создать Map, где ключи - произвольные идентификаторы с автоматическим приращением, а значения - номера пакетов :

const idPackageMap = new Map()

// id generator: whenever you call it, "i" is incremented and returned
const id = (() => {
  let i = 0

  return () => ++i
})()

const addPackage = package =>
  idPackageMap.set(id(), package)

addPackage(2346343)
addPackage(5465654)
addPackage(3455675)

console.log('contents: ', [...idPackageMap.entries()])
console.log('package number for id 2: ', idPackageMap.get(2))

Теперь, когда вы вставляете эти элементы <div>, вы можете установить произвольный идентификатор , и когда вам нужно найти фактический пакет число означает использование Map#get: idPackageMap.get(1) (измените 1 на любой произвольный идентификатор).