javascript - Jquery 中数据属性的替代方案

Question

我有一个网页，用户可以从列表中选择要购买的不同套餐之一。包裹详细信息来自数据库。

HTML Code

<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 属性，为了安全起见，我对所选数据进行服务器端检查。

My Question

有没有办法隐藏这种数据暴露，或者有没有其他更干净的方法来实现这一点，因为我看到人们使用 Angular、Webpack 等能够实现列表选择，而不给出或显示任何可以通过浏览器中的检查元素功能看到的数据。

注意:如果我的问题太基础，我很抱歉，如果使用 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 更改为任意标识符)。