js实现sku
SKU 实现的基本概念
SKU（Stock Keeping Unit）是商品库存管理的最小单位，通常由多个属性组合决定（如颜色、尺寸、材质等）。前端实现 SKU 的核心是处理属性组合的匹配与库存状态校验。
数据结构设计
SKU 的实现通常需要两类数据：
- 属性列表：描述商品的可选属性（如颜色、尺寸）。
- SKU 列表：每个 SKU 包含具体的属性组合和库存信息。
示例数据结构：
const attributes = [
{ name: '颜色', values: ['红色', '蓝色'] },
{ name: '尺寸', values: ['S', 'M'] }
];
const skus = [
{ id: 1, attributes: { 颜色: '红色', 尺寸: 'S' }, stock: 10 },
{ id: 2, attributes: { 颜色: '蓝色', 尺寸: 'M' }, stock: 5 }
];核心功能实现
1. 属性选择联动
根据已选属性过滤剩余可选值，避免无效组合。
function getAvailableValues(selectedAttributes, skus, attributeName) {
const availableValues = new Set();
skus.forEach(sku => {
let match = true;
for (const key in selectedAttributes) {
if (sku.attributes[key] !== selectedAttributes[key]) {
match = false;
break;
}
}
if (match) availableValues.add(sku.attributes[attributeName]);
});
return Array.from(availableValues);
}2. 库存校验
检查当前选择的属性组合是否有库存。
function checkStock(selectedAttributes, skus) {
return skus.some(sku => {
const match = Object.keys(selectedAttributes).every(
key => sku.attributes[key] === selectedAttributes[key]
);
return match && sku.stock > 0;
});
}3. 动态渲染可选属性
根据用户选择实时更新界面。
function renderAttributes(selectedAttributes) {
attributes.forEach(attr => {
const availableValues = getAvailableValues(selectedAttributes, skus, attr.name);
// 更新 UI，只显示 availableValues
});
}完整流程示例
- 用户选择“颜色：红色”，调用
getAvailableValues过滤出可选的尺寸（如['S']）。 - 用户继续选择“尺寸：S”，调用
checkStock检查库存。 - 若库存存在，高亮“加入购物车”按钮；否则禁用。
优化方向
- 性能：对 SKU 列表预处理为哈希表，加速查找。
- 交互：支持默认选中第一个有库存的组合。
- 扩展性：支持嵌套属性（如“套餐”包含多个子属性）。
通过上述方法，可以实现一个基础的 SKU 选择功能，适用于电商场景。
