javascript - 如何使用自定义参数创建函数

Question

我无法更好地表达这一点，所以我会尽可能多地尝试。在这里，我编写了一个函数，它将在 html #root div 中创建一个元素

这是我写的函数

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

function createEl(element, selectorType, selectorName, src, input) {
    var newEl = document.createElement(element);

    if (selectorType == "id") {
        newEl.id = selectorName;
    };
    
    if (selectorType == "class") {
        newEl.classList.add(selectorName);
    };

    newEl.src = src;
    newEl.innerHTML = input;
    root.appendChild(newEl);
};

现在不要这样做：

createEl (
       "div",
       "id",
       "newId",
       null,
       "Hello World"
)

我想这样做

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

我不知道这是否有意义，因为我不知道如何用另一种方式表达它。:(

Answer 1

传递自定义参数

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


function createEl({element, selectorType, selectorName, src, input, parentTag}) {

    var newEl = document.createElement(element);

    if (selectorType == "id") {
        newEl.id = selectorName;
    };
    
    if (selectorType == "class") {
        newEl.classList.add(selectorName);
    };

    newEl.src = src;
    newEl.innerHTML = input;
    parentTag.appendChild(newEl);
};

var inputParams = {
    element: "div", 
    selectorType: "id", 
    selectorName: "newId",
    src: null, 
    input: "Hello World",
    parentTag: root
}
createEl(inputParams)

Answer 2

您可以将对象传递给函数。也重命名in，因为in是 javascript 中的保留关键字

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

function createEl(b) {
  b = b.src;
  var a = document.createElement(element);
  "id" === selectorType && (a.id = selectorName);
  "class" === selectorType && a.classList.add(selectorName);
  a.src = b;
  a.innerHTML = input;
  root.appendChild(a);
}
var obj = {
  el: "div",
  s: "id",
  sName: "newId",
  src: null,
  inp: "Hello World"
};

Answer 3

为了安全使用界面

interface ElementParam {
    element: string, 
    selectorType: string, 
    selectorName: string,
    src: string,
    input: string,
    parentTag: string
}

function createEl(type: ElementParam) {
   .....
};