用纯js创建任务列表并上下移动项目

Question

我正在开发一个纯js任务列表应用程序。我正在尝试添加一项帮助用户上下移动任务的功能。用户可以在点击某个按钮时向上或向下移动某个特定任务。我可以用jQuery来做到这一点，但不知道如何用纯js做到这一点。这里是DEMO

可能有人请帮助我，我怎样才能提高我的代码

HTML质量

<div class="task-list-app"> 

     <header class="main-header"> 
      <h1>Tasks list <span class="version"></span></h1> 

     </header> 

     <section class="main-section"> 

      <div> 
       <input type="text" id="add-new-task" name="add-new-task" placeholder="Type task name and hit Enter "> 
      </div> 

      <ul id="tasks-list"></ul> 

     </section> 

     <div class="status-bar"> 
      <span class="app-status"></span> 
     </div> 
    </div> 

JS

function TaskList() { 
    "use strict"; 
    var appVersion = '1.0.0v'; 

    function setAppStatus($status) { 

     var $appStatusElm = document.querySelector(".app-status"); 

     $appStatusElm.textContent = $status;   


    } 

    function addTask() { 

     var $addNewTask = document.querySelector("#add-new-task"); 

     $addNewTask.addEventListener("keypress", function (e) { 



      if (e.which == 13) { 
       var taskName = this.value; 

       appendNewTask(taskName); 

       this.value = ''; 
      } 

      return false; 

     }); 


    } 

    function appendNewTask (taskName) { 

     var $taskList = document.querySelector("#tasks-list"); 
     var $taskElm = document.createElement("li"); 
     var $btnsWrapper = document.createElement("div"); 
     var $deleteBtn = document.createElement('a');   
     var $moveUpBtn = document.createElement('a');  
     var $moveDownBtn = document.createElement('a'); 
     var $taskNameElm = document.createElement('span'); 
     var hrefAttr = document.createAttribute("href"); 
     var buttons = []; 

     hrefAttr.nodeValue ="#"; 

     $taskElm.appendChild($taskNameElm);   
     $taskNameElm.textContent = taskName;   
     $taskList.appendChild($taskElm); 
     $taskElm.appendChild($btnsWrapper); 

     setTimeout(function() { 
      $taskElm.classList.add("remove-border"); 
     }, 300); 


     $deleteBtn.textContent = "Delete";   
     var $deleteBtnHref = hrefAttr.cloneNode(true); 
     $deleteBtn.setAttributeNode($deleteBtnHref); 



     $moveUpBtn.textContent = "Move up"; 
     var $moveUpBtnHref = hrefAttr.cloneNode(true); 
     $moveUpBtn.setAttributeNode($moveUpBtnHref); 

     $moveDownBtn.textContent = "Move down"; 
     var $moveDownBtnHref = hrefAttr.cloneNode(true); 
     $moveDownBtn.setAttributeNode($moveDownBtnHref); 

     buttons = [$deleteBtn, $moveDownBtn, $moveUpBtn]; 

     buttons.forEach(function (btn) { 
      $taskElm.querySelector('div').appendChild(btn); 
     }); 

     $deleteBtn.addEventListener('click', function (e) { 
      e.path[3].removeChild(e.path[2]); 
      setAppStatus("Task " + taskName + " has been removed"); 
     }) 

     setAppStatus("Task " + taskName + " has been recorded"); 

    } 

    this.start = function() { 
     var $versionElm = document.querySelector(".main-header .version"); 


     $versionElm.textContent = appVersion; 

     addTask(); 

     setAppStatus("Ready To Use"); 

    }; 
} 


var app = new TaskList(); 
app.start(); 

Answer 1

一个重大改进我可以想象你的代码将包装在一个closur中即写入的方式，任何地方都可以访问TaskList（），并且可以覆盖，修改或覆盖其他方法。

总结整个脚本是这样的：

;(function(){ 
    // Your code here 
}); 

这会给你一些优势。首先，冒号在开始时将确保关闭脚本注入的其他关闭。它还会为您提供一个私有的代码范围，允许您设置全局常量/变量，这些常量/变量可以由您在代码中设置的其他类使用，而不会与执行脚本的页面上存在的任何其他变量相冲突。

Answer 2

以下是您希望在选择向上移动时更换整个li的方法。 （为了实现这一点，你只需要执行nextSibiling而不是previousSibiling）;

Here is a working JSFiddle with the code below

$moveUpBtn.addEventListener('click',function(e){ 
     var $mvTaskList = e.target.closest('ul'); 
     var $mvTask = e.target.closest('li'); 
     var $prevTask = e.target.closest('li').previousSibling; 
     if(typeof($prevTask)!=='undefined' && $prevTask!==null){ 
      $mvTaskList.insertBefore($mvTask, $prevTask); 
     } 
    }); 

，作为提高你的代码 - 采取基于使你的所有声明的mvUpBtn进行分组，而不是传遍了整个代码库是怎么回事，以及分组代码的考虑。另一种方法是限制createElement动作，直到创建完整的按钮为止 - 尽管在本例中没有理由放弃节点，但在其他情况下，会根据某些条件创建节点并失败（放弃节点）失败后的条件。附加到对象比创建完整的DOM节点要少得多。

var mvUpBtn = 'a'; 
mvUpBtn.textContent = 'Move Up'; 
mvUpBtn.setAttributeNode(hrefAttr.cloneNode(true)); 
var $mvUpBtn = document.createElement(mvUpBtn);