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

以下是您在选择“向上移动”时想要换出整个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);

Answer 2

我能为你的代码考虑的一个主要改进是将它包装在一个闭包中。它的编写方式，TaskList（）随处可访问，可以覆盖，修改或覆盖其他方法。

用以下内容包装整个脚本：

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

这会给你一些好处。首先，开头的冒号将确保关闭脚本的任何其他闭包。它还将为您的代码提供一个私有作用域，允许您设置可在您的代码中设置的其他类可以使用的全局常量/变量，这些类不会与执行该页面的页面上出现的任何其他变量发生冲突。脚本。

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

2 个答案: