用 ChatGPT 生成尺码哥的代码

尺码哥最近更新了一下前端代码，就是在自动填充支持小数填充和鞋码填充，这个功能点其实很小，我就让 ChatGPT 来帮我完成，我同时也测试了 Claude.ai ,他们两个都能出色的完成这个小功能。

为什么要支持鞋码填充

尺码哥最近支持鞋码生成了，鞋码很小有人叫他 S，L，M 之类的，一般都会叫 36，37，42 之类的码，尺码哥有一个非常高效的地方，就是自动填充，比如你有 S，M，L，XL 之类的尺码，你只要在第一个单元输入 =S+4，后面就会自动输入 M，L，XL 之类的，很多用户反馈这一点很好用，但是当时代码写死了，不支持鞋子之类的纯数字填充，以所鞋码卖家就要一个一个输入，非常难受，他们给我反馈了几次后，我决定升级一下。

代码写死了，只支持 S，M 之类的码填充。

  const input = dInput.trim().toUpperCase();
			    const match = input.match(/^=(\w)([+-]\d+)$/);
			    if (!match) {
				    return;
			    }
			    const baseSize = match[1];
			    let offset = parseInt(match[2]);
			    const sizes = ["S", "M", "L", "XL", "XXL", "3XXL", "4XXL", "5XXL"];
			    const baseIndex = sizes.indexOf(baseSize);
			    if (baseIndex === -1) {
				    return;
			    }

			    const targetSizes = [];
			    let index = baseIndex;
			    while (offset > 0 && index < sizes.length - 1) {
				    index++;
				    offset--;
			    }
			    while (offset < 0 && index > 0) {
				    index--;
				    offset++;
			    }
			    for (let i = baseIndex; i < index; i++) {
				    targetSizes.push(sizes[i]);
			    }
			    $("input[name='Size[]']").each(function (index, value) {
				    $(this).val(targetSizes[index])
			    })

用 ChatGPT 修改代码

ChatGPT 给出了非常详细的修改建议，他的建议如下，就是加了一个条件判断，把数字填充加进运了。

if (this.name === 'Size[]') {
  const input = dInput.trim().toUpperCase();
  
  // 新增：匹配数字输入的正则表达式
  const numMatch = input.match(/^=(\d+)([+-]\d+)$/);
  if (numMatch) {
    const baseNumber = parseInt(numMatch[1]);
    const stepNumber = parseInt(numMatch[2]);
    
    const targetNumbers = Array.from({ length: maxSize }, (_, index) => baseNumber + stepNumber * index);
    $("input[name='Size[]']").each(function (index, value) {
      $(this).val(targetNumbers[index])
    });
  } else {
    // 原有的字母匹配逻辑
    const match = input.match(/^=(\w)([+-]\d+)$/);
    if (!match) {
      return;
    }
    const baseSize = match[1];
    let offset = parseInt(match[2]);
    const sizes = ["S", "M", "L", "XL", "XXL", "3XXL", "4XXL", "5XXL"];
    const baseIndex = sizes.indexOf(baseSize);
    if (baseIndex === -1) {
      return;
    }

    const targetSizes = [];
    let index = baseIndex;
    while (offset > 0 && index < sizes.length - 1) {
      index++;
      offset--;
    }
    while (offset < 0 && index > 0) {
      index--;
      offset++;
    }
    for (let i = baseIndex; i < index; i++) {
      targetSizes.push(sizes[i]);
    }
    $("input[name='Size[]']").each(function (index, value) {
      $(this).val(targetSizes[index])
    });
  }
}

支持小数填充

因为以前认为尺码不可能存在小数的尺码，结果后面用户反馈还真有，所以这次升级了支持小数填充，下面的代码只支持整数填充.

if (dInput.match(re)) {
        if (this.name !== 'Size[]') {
          var first = new Big(Number(dInput.match(re)[1]));
          var step = new Big(Number(dInput.match(re)[3]));

          this.value = first + step;

          var arrSize = $("input[name='" + this.name + "']");

          arrSize.each(function (index, value) {
            if (index < maxSize) {

              $(this).val(first.times(1).plus(step.times(index).times(1)));
            }
          })
        }



      }

ChatGTP 给的建议

if (dInput.match(re)) {
  if (this.name !== 'Size[]') {
    // 修改为 parseFloat 以支持小数
    var first = new Big(parseFloat(dInput.match(re)[1]));
    var step = new Big(parseFloat(dInput.match(re)[3]));

    // 使用 toFixed() 设置保留的小数位数并将结果转为数字
    this.value = Number(first.plus(step).toFixed(2));

    var arrSize = $("input[name='" + this.name + "']");

    arrSize.each(function (index, value) {
      if (index < maxSize) {
        // 使用 toFixed() 设置保留的小数位数并将结果转为数字
        $(this).val(Number(first.plus(step.times(index)).toFixed(2)));
      }
    });
  }
}

现在尺码哥完整的支持了鞋码和数字填充这两个小能力。