Question

您好，所以今天我很想知道如何编写更聪明，更短的代码。这是我两个星期前喜欢的小项目：

me.combobox.requery

 // Get input element
    let filterInput = document.getElementById('filterInput');
    // Add event listener
    filterInput.addEventListener('keyup', filterNames);

    function filterNames(){
      // Get value of input
      let filterValue = document.getElementById('filterInput').value.toUpperCase();

      // Get names ul
      let ul = document.getElementById('names');
      // Get lis from ul
      let li = ul.querySelectorAll('li.collection-item');

      // Loop through collection-item lis
      for(let i = 0;i < li.length;i++){
        let a = li[i].getElementsByTagName('a')[0];
        // If matched
        if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
          li[i].style.display = '';
        } else {
          li[i].style.display = 'none';
        }
      }

    }

    function do1(){
      var input = document.getElementById('ipt1').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('div1');
        li.appendChild(a);
        div1.appendChild(li)
        if(input===""){
          alert('please fill in information');
          return false;
        }
  
    }

    function do2(){
      var input = document.getElementById('ipt2').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('div2');
      li.appendChild(a);
      div2.appendChild(li);
    
    }

     function do3(){
      var input = document.getElementById('ipt3').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('div3');
      li.appendChild(a);
      div3.appendChild(li);
}

因此，您可以看到3个函数在本质上是相同的，但仅具有不同的ID和类似的东西。我该如何缩短这3个功能？我搜索了一些有关原型的内容，因为我听说原型与缩短代码，使代码更容易理解和缩短代码有关。因此，如果您有任何想法，请发表评论，我将不胜感激。还有一个问题：我应该开始学习javascript OOP吗？我真的不知道学习是否重要？

Answer 1

执行一个功能并接受一些参数：

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对其全部调用。

Answer 2

在函数中添加一个参数，使您可以传递每个实例之间不同的位。

这是一个有效的演示，其中函数addName接受一个与您的div / ipt名称串联的数字。

// Get input element
let filterInput = document.getElementById('filterInput');
// Add event listener
filterInput.addEventListener('keyup', filterNames);

function filterNames() {
  // Get value of input
  let filterValue = document.getElementById('filterInput').value.toUpperCase();
  // Get names ul
  let ul = document.getElementById('names');
  // Get lis from ul
  let li = ul.querySelectorAll('li.collection-item');
  // Loop through collection-item lis
  for (let i = 0; i < li.length; i++) {
    let a = li[i].getElementsByTagName('a')[0];
    // If matched
    if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
      li[i].style.display = '';
    } else {
      li[i].style.display = 'none';
    }
  }
}

function addName(num) {
  var input = document.getElementById('ipt' + num).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";
  }
  if (input === "") {
    alert('please fill in information');
    return false;
  }
  var div = document.getElementById('div' + num);
  li.appendChild(a);
  div.appendChild(li)
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
  <title>My Contacts</title>
</head>
<div class="container">
  <h1 class="center-align">
    My Contacts
  </h1>
  <input type="text" id="filterInput" placeholder="Search names...">
  <ul id="names" class="collection with-header">
    <li class="collection-header">
      <h5>A</h5> <input class="ipt" type="box" id="ipt1"><button onclick="addName(1);">click me to add another name</button>
    </li>
    <div id="div1">

    </div>
    <li class="collection-header">
      <h5>B</h5> <input class="ipt" type="box" id="ipt2"><button onclick="addName(2);"> click me to add another name</button>
    </li>
    <div id="div2">

    </div>
    <li class="collection-header">
      <h5>C</h5> <input class="ipt" type="box" id="ipt3"><button onclick="addName(3);"> click me to add another name</button>
    </li>
    <div id="div3">
    </div>
  </ul>
</div>

Answer 3

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

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

Answer 4

下面是一些可以简化代码本身的事情的示例。

此外，我还没有阅读全部代码，但是可以这么说，您对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'
  }
}

...

如何使这3个非常相似的功能更短

4 个答案: