Question

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

它是所有化妆品，意味着它不存储信息，不生成任何对象或数组，尽管学习如何在纯JavaScript中操作DOM元素并构建我的第一个＆＃34;程序＆＃34;确实很有趣。！

我正以更多的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);
}

按Enter键会触发一个完成所有操作的函数。创建一个新的任务对象，将其推送到数组，显示任务并附加可随时更新的注释，例如 - task：get milk note：杏仁奶。但是我最终想要使用本地存储再次重建此应用程序，并再次使用ajax和JSON。我想我很难将这种功能注入这个功能而不会破坏它。所以我再次这样做，并将这些步骤分解为几个较小的功能，即插入＆＃39;彼此：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

直接回答你的问题：通常最好有几个较小的功能而不是一个大功能。一般来说，重新使用谨慎部分的代码更容易，并且通常更容易/更快地对较小的功能进行单元测试。小函数可以链接在一起构成一个大函数（如果由于应用程序功能要求而有意义的话）。

TODO APP：一个怪物功能比几个小功能更好吗？

1 个答案: