js商品规格实现

商品规格实现方案

在JavaScript中实现商品规格功能通常涉及前端交互逻辑和后端数据结构的配合。以下是几种常见的实现方式：

基于对象或数组的规格组合

使用对象或数组存储规格信息，并通过遍历生成可选的规格组合：

const specifications = {
  color: ['红色', '蓝色', '黑色'],
  size: ['S', 'M', 'L'],
  material: ['棉', '涤纶']
};

function generateCombinations(specs) {
  const keys = Object.keys(specs);
  let result = [{}];

  keys.forEach(key => {
    const values = specs[key];
    let temp = [];
    result.forEach(obj => {
      values.forEach(value => {
        temp.push({...obj, [key]: value});
      });
    });
    result = temp;
  });

  return result;
}

规格联动选择实现

实现规格间的联动选择，当选择某个规格后，其他规格的可选项会相应变化：

const stock = {
  '红色-S-棉': 10,
  '红色-M-棉': 5,
  '蓝色-L-涤纶': 8
};

function updateAvailableOptions(selected) {
  const availableOptions = {
    color: new Set(),
    size: new Set(),
    material: new Set()
  };

  Object.keys(stock).forEach(key => {
    const [color, size, material] = key.split('-');
    let match = true;

    if(selected.color && color !== selected.color) match = false;
    if(selected.size && size !== selected.size) match = false;
    if(selected.material && material !== selected.material) match = false;

    if(match && stock[key] > 0) {
      availableOptions.color.add(color);
      availableOptions.size.add(size);
      availableOptions.material.add(material);
    }
  });

  return availableOptions;
}

基于Vue/React的组件实现

在Vue中可以使用计算属性来实现规格选择：

// Vue示例
data() {
  return {
    selected: {
      color: null,
      size: null,
      material: null
    },
    specifications: {
      color: ['红色', '蓝色', '黑色'],
      size: ['S', 'M', 'L'],
      material: ['棉', '涤纶']
    },
    stock: {
      '红色-S-棉': 10,
      '红色-M-棉': 5,
      '蓝色-L-涤纶': 8
    }
  };
},
computed: {
  availableOptions() {
    const available = {
      color: new Set(),
      size: new Set(),
      material: new Set()
    };

    for(const key in this.stock) {
      if(this.stock[key] <= 0) continue;

      const [color, size, material] = key.split('-');
      let match = true;

      if(this.selected.color && color !== this.selected.color) match = false;
      if(this.selected.size && size !== this.selected.size) match = false;
      if(this.selected.material && material !== this.selected.material) match = false;

      if(match) {
        available.color.add(color);
        available.size.add(size);
        available.material.add(material);
      }
    }

    return {
      color: Array.from(available.color),
      size: Array.from(available.size),
      material: Array.from(available.material)
    };
  }
}

规格与SKU关联

实现规格选择后确定具体SKU的方法：

function findSku(selected) {
  const selectedValues = Object.values(selected).filter(Boolean);
  if(selectedValues.length !== Object.keys(specifications).length) return null;

  const skuKey = Object.keys(stock).find(key => {
    const parts = key.split('-');
    return parts.every((part, i) => part === selectedValues[i]);
  });

  return skuKey ? {sku: skuKey, stock: stock[skuKey]} : null;
}

可视化规格选择器

创建一个用户友好的规格选择界面：

// React示例
function SpecificationSelector({specs, stock, onSelect}) {
  const [selected, setSelected] = useState({});

  const availableOptions = useMemo(() => {
    // 计算可用选项的逻辑
  }, [selected, specs, stock]);

  const handleSelect = (type, value) => {
    const newSelected = {...selected, [type]: value};
    setSelected(newSelected);
    onSelect(newSelected);
  };

  return (
    <div className="spec-selector">
      {Object.keys(specs).map(type => (
        <div key={type}>
          <h4>{type}</h4>
          <div className="options">
            {availableOptions[type].map(option => (
              <button 
                key={option}
                className={selected[type] === option ? 'active' : ''}
                onClick={() => handleSelect(type, option)}
              >
                {option}
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

这些实现方案可以根据具体项目需求进行调整和组合，核心思想是通过数据结构表示规格关系，并通过算法处理规格间的联动逻辑。