Javascript 如何缩短这3个非常相似的函数

你好，今天我很好奇，我该如何编写更智能、更短的代码。这是我两周前做的litle项目：

//获取输入元素
让filterInput=document.getElementById（'filterInput'）；
//添加事件侦听器
filterInput.addEventListener（'keyup'，filterNames）；
函数过滤器名称（）{
//获取输入值
让filterValue=document.getElementById（'filterInput'）.value.toUpperCase（）；
//得到你的名字
设ul=document.getElementById（'names'）；
//从ul获取lis
设li=ul.queryselectoral（'li.collection item'）；
//循环浏览收集项目列表
for（设i=0；i-1）{
li[i].style.display=''；
}否则{
li[i].style.display='none'；
}
}
}
函数do1（）{
var输入=document.getElementById（'ipt1'）。值；
var a=document.createElement（'a'）；
a、 setAttribute（'href'，'#'）；
a、 text内容=输入；
var li=document.createElement（'li'）；
li.setAttribute（'class'，'collection item'）；
a、 onclick=function（）{
var div=this.parentElement；
div.style.display=“无”；
}
var div=document.getElementById（'div1'）；
李.儿童（a）；
第1部分：儿童（李）
如果（输入==“”）{
警报（“请填写信息”）；
返回false；
}
}
函数do2（）{
var输入=document.getElementById（'ipt2'）。值；
var a=document.createElement（'a'）；
a、 setAttribute（'href'，'#'）；
a、 text内容=输入；
var li=document.createElement（'li'）；
li.setAttribute（'class'，'collection item'）；
a、 onclick=function（）{
var div=this.parentElement；
div.style.display=“无”；
}
var div=document.getElementById（'div2'）；
李.儿童（a）；
第2部分：儿童（李）；
}
函数do3（）{
var输入=document.getElementById（'ipt3'）。值；
var a=document.createElement（'a'）；
a、 setAttribute（'href'，'#'）；
a、 text内容=输入；
var li=document.createElement（'li'）；
li.setAttribute（'class'，'collection item'）；
a、 onclick=function（）{
var div=this.parentElement；
div.style.display=“无”；
}
var div=document.getElementById（'div3'）；
李.儿童（a）；
第3部分：儿童（李）；
}

我的联系人
我的联系人


A单击“我”添加其他名称


B单击我添加另一个名称


C单击我添加另一个名称

制作一个函数并输入一些参数：

function doTheThing(idA, idB){
  var input = document.getElementById(idA).value;
  var a = document.createElement('a');
  a.setAttribute('href', '#');
  a.textContent = input;
  var li = document.createElement('li');
  li.setAttribute('class', 'collection-item');
  a.onclick=function(){
    var div = this.parentElement;
    div.style.display = "none";
  }
  var div = document.getElementById(idB);
  li.appendChild(a);
  div.appendChild(li);   
}

---

此外，未定义变量

div1

、

div2

和

div3

，它们是您正在使用的ID。如上图所示，使用var div调用它们。

执行此操作时，首先要开始的是参数化差异。一种快速而肮脏的方法是这样的：

function doit(index, nonEmptyInput) {
    // assumption: code calling this function will not use an invalid/null value for index
    var input = document.getElementById('ipt'+index).value;
    if (nonEmptyInput && input === "") {
        alert('please fill in information');
        return false;
    }
    // input is valid
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.textContent = input;
    a.onclick = function() {
        this.parentElement.style.display = "none";
    }
    var li = document.createElement('li');
    li.setAttribute('class', 'collection-item');
    li.appendChild(a);
    document.getElementById('div'+index).appendChild(li);
}

---

向函数中添加一个参数，该参数允许您传递每个实例之间不同的位

下面是一个工作演示，其中函数

addName

获取一个与div/ipt名称连接的数字

//获取输入元素
让filterInput=document.getElementById（'filterInput'）；
//添加事件侦听器
filterInput.addEventListener（'keyup'，filterNames）；
函数过滤器名称（）{
//获取输入值
让filterValue=document.getElementById（'filterInput'）.value.toUpperCase（）；
//得到你的名字
设ul=document.getElementById（'names'）；
//从ul获取lis
设li=ul.queryselectoral（'li.collection item'）；
//循环浏览收集项目列表
for（设i=0；i-1）{
li[i].style.display=''；
}否则{
li[i].style.display='none'；
}
}
}
函数addName（num）{
var输入=document.getElementById（'ipt'+num）.value；
var a=document.createElement（'a'）；
a、 setAttribute（'href'，'#'）；
a、 text内容=输入；
var li=document.createElement（'li'）；
li.setAttribute（'class'，'collection item'）；
a、 onclick=function（）{
var div=this.parentElement；
div.style.display=“无”；
}
如果（输入==“”）{
警报（“请填写信息”）；
返回false；
}
var div=document.getElementById（'div'+num）；
李.儿童（a）；
儿童部（李）
}

我的联系人
我的联系人


A单击“我”添加其他名称


B单击我添加另一个名称


C单击我添加另一个名称

下面是一个简单缩短代码的示例

另外，我还没有通读您的所有代码，但是您使用

let

可以说是相当宽松的。在某些情况下，您应该使用

const

// you can remove most semi-colons for starters
const filterInput = document.getElementById('filterInput')

// no need for event listener, unless you plan on using the event more than once
filterInput.onkeyup = () => {

  // can reuse global variable which is declared above
  let filterValue = filterInput.value.toUpperCase()

  // here you can combine the selectors into one variable
  let li = document.getElementById('names').querySelectorAll('li.collection-item')

  // let is not necessarily necessary
  for (i = 0; i < li.length; i++) {
    let a = li[i].getElementsByTagName('a')[0]

    // can use ternary operator instead of if/else statement
    li[i].style.display = a.innerHTML.toUpperCase().indexOf(filterValue) > -1 ? '' : 'none'
  }
}

...

//首先，您可以删除大多数分号
常量filterInput=document.getElementById（'filterInput'）
//不需要事件监听器，除非您计划多次使用该事件
filterInput.onkeyup=（）=>{
//可以重用上面声明的全局变量
让filterValue=filterInput.value.toUpperCase（）
//给你