如何创建支持自定义命名参数的JavaScript元素创建函数

我完全懂你的需求——想用命名参数的方式调用函数，不用死记参数顺序，代码可读性也能大大提升对吧？JavaScript本身没有原生的命名参数语法（你写的createEl(el: "div", ...)这种写法是不合法的），但我们可以用对象传参的方式完美模拟这个效果，改起来很简单：

修改后的函数代码 #

var root = document.getElementById("root");

function createEl(options) {
  // 解构传入的配置对象，把你想要的命名映射到原参数逻辑上
  const { el, s: selectorType, sName: selectorName, src, in: input } = options;
  
  var newEl = document.createElement(el);
  
  if (selectorType === "id") {
    newEl.id = selectorName;
  };
  if (selectorType === "class") {
    newEl.classList.add(selectorName);
  };
  
  // 优化：只有当src有有效值时才赋值，避免给元素添加上不必要的null属性
  if (src !== null && src !== undefined) {
    newEl.src = src;
  }
  
  // 同理，input为空时也可以跳过赋值
  if (input) {
    newEl.innerHTML = input;
  }
  
  root.appendChild(newEl);
};

按命名参数风格调用 #

现在你就可以用你期望的格式调用函数了（注意要把参数包裹在对象大括号里）：

createEl({
  el: "div",
  s: "id",
  sName: "newId",
  src: null,
  in: "Hello World"
})

额外优化：添加默认值 #

如果有些参数是可选的，我们还可以在解构的时候给参数设置默认值，让函数的灵活性更强：

function createEl(options) {
  // 给每个参数设置默认值，调用时可省略不必要的参数
  const { 
    el = "div", 
    s = "class", 
    sName = "", 
    src = null, 
    in: input = "" 
  } = options;
  
  // 后续代码和之前一致...
}

比如调用时可以只传必要的参数：

createEl({
  s: "id",
  sName: "newId",
  in: "Hello World"
})

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