jQuery基础应用之todoList

todoList的功能

todoList是一个简易方便的待办事项的便签，功能比较简单，适合用来熟悉和复习jQuery的基础操作。其主要的功能有：打开todoList会自动显示上一次使用完的结果；在输入框中输入内容，并按下enter键可以将内容添加到正在进行的事中，并且会将输入框清空，方便下一次的输入；将正在进行的事的前面的复选框打上勾，这件事会从正在进行的事中移除，并自动加入到已经完成的事中，而将已经完成的事的前面的复选框的勾去掉，它又会回到正在进行的事中；在每件事的后面都有一个删除按钮，点击它会删除这件事；在正在进行的事和已经完成的事的后面都有一个记录事件数量的数字；点击最下面的clear按钮会一键清空便签的内容。下面是页面截图。

相关功能的分析

复现功能

打开便签，它会直接复现上次的结果，那么相应的数据应该是直接存储到浏览器本地的，打开页面时，就会自动读取上次的数据，并且渲染到页面上。实际上，todoList里的功能都是对数据进行操作。

添加功能

添加功能主要是一个对数组的push操作的过程，首先获取本地数据，然后将获取到的文本框的内容添加到数据中，并保存到本地，最后是重新渲染页面。

标记功能

标记功能主要跟复选框的状态有关，根据复选框的状态动态修改数据，并保存到本地。

删除功能

删除功能主要是对数组的一个splice操作的过程，首先获取本地数据，然后获取点击了删除按钮的对应的事项的索引，根据索引删除数组里对应的数据，之后保存到本地，最后是重新渲染页面。

渲染（加载）功能

渲染功能的主流程是：获取并遍历数组，根据数组里面表示复选框的状态属性的值，来选择是在正在进行的事，还是在已经完成的事里面动态添加元素，与此同时对相应的事项进行计数。

代码的封装

我们发现，多个功能里面都有重复的流程，所以我们可以把这些流程封装成函数，在使用时直接调用即可。

完整的代码

话不多说，以下是完整的代码，因为本身是小白，所以有些错误也请谅解。

$(function() {
     
    //渲染页面,相当于自动读取记录，直接回到用户上次使用完的结果
    load();
    $(".todo").on("keydown", function(event) {
     
        //判断是否按下了enter键
        if (event.keyCode === 13) {
     
            //获取本地数据
            var local = getData();
            //从输入框中得到数据并更新数据，将数据存储为[{title: "xxx",done:false}]的形式
            local.push({
     
                title: $(this).val(),
                done: false
            });
            //保存数据到localStorage
            saveData(local);
            $(this).val(''); //把输入框内容自动清空，不用在下一次输入时手动清空
            //重新渲染页面
            load();
        }
    });
    // 删除功能，点击每个小Li后面的删除键删除对应的本地数据
    $("ul,ol").on("click", "a", function() {
     
        // alert(11);
        //获取数据
        var data = getData();
        // 修改数据
        var index = $(this).attr("_ti"); //获取按键的编号
        data.splice(index, 1); //根据索引删除对应的本地数据
        // 保存数据
        saveData(data);
        // 渲染页面
        load();
    });
    //复选框功能
    $("ul,ol").on("click", "input", function() {
     
        // alert(11);
        // 获取数据
        var data = getData();
        // 修改数据
        var index = $(this).siblings("a").attr("_ti"); //获取兄弟元素的索引
        data[index].done = $(this).prop("checked"); //获取复选框的状态，并更新本地数据
        // console.log(data);
        // 保存数据
        saveData(data);
        // 渲染页面
        load();
    });
    //clear功能：一键清除
    $(".clear").click(function() {
     
        // 获得数据
        var data = getData();
        // 修改数据
        data = [];
        // 保存数据
        saveData(data);
        // 渲染页面
        load();
    })
});
// 获取本地数据
function getData() {
     
    var data = localStorage.getItem("todolist");
    if (data !== null) {
     
        return JSON.parse(data); //将字符串转换为数组读取
    } else {
     
        return [];
    }
};
//保存数据到本地
function saveData(data) {
     
    var data = localStorage.setItem("todolist", JSON.stringify(data)); //将数组转换为字符串格式存储
};
//渲染页面
function load() {
     
    var data = getData();
    var todoCount = 0; //对正在进行的事进行计数
    var doneCount = 0; //对已经完成的事进行计数
    //遍历数据
    $("ul,ol").empty(); //将列表清空，防止每次渲染时累加上一次的数据
    $.each(data, function(i, n) {
     
        //i是遍历的数组的索引，n是对应索引的数据
        if (n.done) {
     
            $("ol").prepend("
" + n.title + "
"); //添加到已经完成的事里
            doneCount++;
        } else {
     
            $("ul").prepend("
" + n.title + "
"); //添加到正在进行的事里
            todoCount++;
        };
    });
    $(".doing span").text(todoCount);
    $(".done span").text(doneCount);
}

总结

todolist虽然功能简单，但对于我们新手来说非常具有实际意义，主要锻炼了我们增、删、改的能力，更多的是培养了我们的编程思想，让我们在实现页面功能时有一个比较系统的思路，能够让代码更加富有逻辑和完整。