javascript - 用于创建具有可选属性的简单节点的函数

Question

我正在尝试创建一个简单的函数，它接受一个强制的“node”变量，以及另外两个可选的“class”和“id”变量。当您指定所有 3 个元素时，该函数可以正确运行 - 但它不允许您创建一个没有 id 但带有类的元素，反之亦然。

我的代码如下:

var testEl = createEl('div', 'testClass', 'testId');

function createEl(node, theClass, id) {
  var newNode = document.createElement(node);
  newNode.classList.add(theClass);
  newNode.id = id;
  return newNode;
}

document.getElementsByTagName('p')[0].innerHTML = testEl.outerHTML; // fails why?
console.log(testEl.outerHTML);

<p>This should change</p>

有没有办法改进这个函数，这样你就可以创建像这样的变量:

var el = createEl(node = ‘span’, id = ‘someId’);

任何提示都会非常有帮助。感谢您的帮助。

代码笔:https://codepen.io/ns91/pen/KKwaQRY

Answer 1

JavaScript 中不存在命名参数。这意味着如果您想让某些参数成为可选参数，调用者必须为可选参数之前的每个参数提供一个值。例如。在没有类但带有 ID 的情况下调用函数:

createEl('div', '', 'testId');

<小时/>

我建议使用对象来保存所有属性。一个优点是您可以迭代该对象并将值分配给 DOM 元素:

function createEl(node, attributes) {
  var newNode = document.createElement(node);
  for (var prop in attributes) {
    newNode[prop] = attributes[prop];
  }
  return newNode;
}

createEl('div', {id: 'foo'});
createEl('div', {className: 'bar'});
createEl('div', {id: 'foor', className: 'bar'});

您还可以对某些属性添加特殊处理，例如classList(取决于您想要如何处理它):

function createEl(node, attributes) {
  var newNode = document.createElement(node);
  for (var prop in attributes) {
    switch (prop) {
      case 'classList':
        attributes[prop].forEach(cls => newNode.classList.add(cls));
        break;
      default:
        newNode[prop] = attributes[prop];
    }
  }
  return newNode;
}


createEl('div', {classList: ['foo', 'bar', 'baz']});