javascript - 功能及优化方面存在问题

Question

我正在尝试使用代码底部的两个功能://使用“添加”按钮将项目添加到待办事项列表和“//使用 ENTER KEY 添加项目到列表”并添加大量将这些函数添加到//Add new item to To-Do List 函数中，这样其他函数就更简单了，下面两个函数的代码不再重复。

如有任何建议，我们将不胜感激!

//Add new item to To-Do List
function addNewItem(list, itemText) {
  totalItems++;

  var listItem = document.createElement("li");

  list.appendChild(listItem);
}

//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event) {
  if (event.which === 13) {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }

    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();
  }
}


  //Add item to To-Do List with "Add" Button
  var btnNew = document.getElementById("btnAdd");
  btnNew.onclick = function() {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }


    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();

  }

https://jsfiddle.net/Rassisland/7bkcLfhu/

Answer 1

同时绑定(bind)按钮和回车键

最好将文本输入和按钮包装在表单元素中，并将 addNewItem 绑定(bind)到表单的 onsubmit 事件。然后按钮和按键就不需要单独处理，因为它们都会启动提交事件。要使用表单实现所需的功能，您应该:

• 将文本输入和按钮包装在表单元素中
• 将按钮更改为 <input type="submit" value="add">
• 将addNewItem函数绑定(bind)到表单的onsubmit
• 调用 event.preventDefault()在 addNewItem 函数中防止表单加载页面

重构思路

您可能需要考虑的另一件事是重构代码，使其不使用全局变量和函数。 I've Heard Global Variables Are Bad, What Alternative Solution Should I Use?

我还强烈建议使用 JS 库或框架来帮助解决浏览器兼容性、选择器等问题。如果您担心加载时间，可以通过 CDN 加载大多数流行的 JS 库。例如Google的cdn:https://developers.google.com/speed/libraries/当通过流行的 CDN 加载库时，用户浏览器很可能已经缓存了该资源，并且不会导致任何额外的加载。