如何使用自定義參數創建函數

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) {
   .....
};