Блог

Я проверяю три элемента на их доступность. Если они определены, я выполняю одни и те же действия для каждого элемента. Я хотел бы избежать повторения кода. Как я могу написать это более коротким и эффективным способом?

 const studentElem = component.find("students").getElement();
if (studentElem != undefined) {
   let studentNoice = studentElem.innerText;
   studentNoice = studentNoice.replace('classNo', 'Reg No.');
   studentElem.innerHTML = studentNoice;
}
const staffElem = component.find("staff").getElement();
if (staffElem != undefined) {
   let staffNoice = staffElem.innerText;
   staffNoice = staffNoice.replace('staffNo', 'Staff Rec.');
   staffElem.innerHTML = staffNoice;
}
const parentElem = component.find("parents").getElement();
if (parentElem != undefined) {
   let parentNoice = parentElem.innerText;
   parentNoice = parentNoice.replace('ParentID', 'P-ID.');
   parentElem.innerHTML = parentNoice;
}
  

У вас правильная идея, это должно быть сокращено. Вы можете сделать это, передав переменные данные в функцию в качестве аргументов и принимая решения на основе этих значений аргументов.

Вам также не нужно явно проверять !=undefinded . Вы можете просто проверить наличие элемента if(elem) . И не используйте .innerHTML , когда строка, с которой вы работаете, не содержит HTML, .innerHTML что имеет последствия для безопасности и производительности. Используйте .textContent вместо этого.

Из MDN:

Рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого используйте Node.textContent . Это не анализирует переданный контент как HTML, а вместо этого вставляет его как необработанный текст.

 function foo(role, find, replace){
  const elem = component.find(role).getElement();
  // No need to check for !=undefined because that essentially means
  // you are checking for a "truthy" value, which is what an if condition
  // checks for by default, so checking the variable itself forces the 
  // value to be converted to a Boolean. If the element exists, the Boolean
  // becomes true and if not, it is false.
  if (elem) {
    // Setting up variables that are only used once is a bit of a waste
    // Just do the work here and there's less code to write and maintain
    elem.textContent = elem.textContent.replace(find, replace);
  }
}

// You then call the function and pass the variable data
foo("students", 'classNo', 'Reg No.');
foo("staff", 'staffNo', 'Staff Rec.');
foo("parents", 'ParentID', 'P-ID.');
  

Создайте функцию!

 function yourBuisnessLogic(componentName, subStr, newSubStr){
    const elem = component.find(componentName).getElement();
    if (elem != undefined) {
       let notice = elem.innerText;
       notice = notice.replace(subStr, newSubStr);
       elem.innerHTML = notice;
    }
}
  

и вызовы функций :

 yourBuisnessLogic("students",'classNo', 'Reg No.');
yourBuisnessLogic("staff",'staffNo', 'Staff Rec.');
yourBuisnessLogic("parents",'ParentID', 'P-ID.');