如何实现调用函数时向字符串传递参数？附JS代码示例

嘿，我明白你想要的是可复用、易修改的代码结构——不用每次改mask规则或者样式都要重复写一堆相似代码，而是通过传递参数来灵活配置，对吧？

针对你的需求，我们可以把重复的逻辑封装成可接收参数的函数，这样后续修改参数或者新增元素时，只需要调用函数并传入新值就好：

1. 封装掩码初始化函数 #

把mask的初始化逻辑抽成函数，接受选择器、掩码格式和配置选项作为参数：

function initInputMask(selector, maskPattern, options = {}) {
  // 默认配置，可通过传入的options覆盖
  const defaultOptions = { reverse: true };
  $(selector).mask(maskPattern, { ...defaultOptions, ...options });
}

2. 封装下拉框样式设置函数 #

同样把select的样式设置封装成函数，接受样式对象作为参数：

function setSelectStyles(styles = {}) {
  // 默认样式，可通过传入的styles覆盖
  const defaultStyles = { fontSize: "13.5px", width: "70%" };
  $("select").css({ ...defaultStyles, ...styles });
}

3. 在DOM就绪时调用函数 #

现在你可以在$(document).ready里轻松调用这些函数，传递你需要的参数：

$(document).ready(function(){
  // 初始化DRs和NewR的掩码，可单独修改每个的规则
  initInputMask('.DRs', "#.###0.00");
  initInputMask('.NewR', "#.###0.00");
  
  // 设置select样式，如需修改直接传新的样式对象即可
  setSelectStyles();
  // 示例：如果要修改成更大的字体和更宽的宽度，只需：
  // setSelectStyles({ fontSize: "15px", width: "80%" });
});

这样做的好处： #

• 易维护：以后要改掩码格式或者样式，只需要修改调用函数时的参数，不用找遍代码修改硬编码的值
• 可复用：新增需要掩码的输入框或者修改其他select样式时，直接调用已有函数即可
• 清晰直观：函数名和参数能明确表达意图，代码可读性更高

内容的提问来源于stack exchange，提问作者Josh Gomez