javascript - 待办事项应用程序 : Is one monster function better than several smaller functions?

Question

关闭。这个问题是 opinion-based 。目前不接受答案。

---

想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 .

已关闭 7 年前。

Improve this question

我正在通过用纯 JavaScript 制作一个待办事项应用程序来学习编码。我的第一次尝试可以在这里看到:conquerjs.com/todo

这都是装饰性的，这意味着它不存储信息，不生成对象或数组，尽管学习如何在纯 JavaScript 中操作 DOM 元素并构建我的第一个“程序”确实很有趣!

我正在以更加 OOP 的方式重建它。在第一个 Jsfiddle 中:https://jsfiddle.net/zv6ohr9b/

when(toDo, "keypress", function(event){
  if (event.key == "Enter" || event.keyCode == 13) {
    pushArray();
    toDo.value = "";
  }
});

function pushArray(){
  var nt = new Task(toDo.value, "No note yet");
  fruits.push(nt);
  var task = document.createElement("div");
  task.setAttribute("class", "taskitem");
  task.innerHTML = nt.Name;
  var t = document.createElement("input");
  t.setAttribute("class", "tasknote");
  task.appendChild(t);
  when(t, "keypress", function(event){
  if (event.key == "Enter" || event.keyCode == 13) {
    nt.Note = t.value;
    this.parentNode.innerHTML = nt.Name + " " + nt.Note;
    t.value = "";
  }
});

  result.appendChild(task);
  console.log(fruits);
}

按下回车键会触发一个执行所有操作的函数。创建一个新的任务对象，将其推送到数组，显示任务并附加可以随时更新的注释，例如 - 任务:获取牛奶注释:杏仁奶。然而，我最终想使用本地存储再次重建这个应用程序，并再次使用 ajax 和 JSON。我想我将很难将该功能注入(inject)到这个单一函数中而不破坏它。所以我又做了一次，并将这些步骤分解为几个较小的函数，这些函数相互“插入”:https://jsfiddle.net/8wm0r345/

  function Task(name, note) {
  this.Note = note;
  this.Name = name;
  this.completed = false;
}

function pushArray() {
  var nt = new Task(toDo.value, "No note yet");
  taskArray.push(nt);
  displayArray(result, nt.Name);
  appendNote(result, nt);
}

function displayArray(x, obj) {
  var task = make("div", "class", "taskitem", obj);
  x.appendChild(task);
}

function appendNote(el, obj) {
  var t = make("input", "class", "tasknote");
  el.appendChild(t);
  when(t, "keypress", submitNote.bind(null, obj, t));
}

function submitNote(newTask, theInput) {
  if (event.key == "Enter" || event.keyCode == 13) {
    newTask.Note = theInput.value;
    var n = make("div", "class", "hasNote", newTask.Note);
    var t = theInput;
    t.parentNode.insertBefore(n, t.nextSibling);
    t.parentNode.removeChild(t);
    when(n, "dblclick", function() {
      n.parentNode.insertBefore(t, n.nextSibling);
      n.parentNode.removeChild(n);
    });
  }
}

我的问题是:构建这样的小程序的推荐方法是什么？这里提供的代码中是否存在任何令人担忧的问题？谢谢。

Answer 1

直接回答你的问题:一般来说，拥有几个较小的函数比一个大函数更好。一般来说，重用分散的代码更容易，并且对较小的函数进行单元测试通常更容易/更快。小函数可以链接在一起形成一个大函数(如果由于应用程序功能要求而这样做有意义)。