todolist的编写过程以及踩坑记录(1)

layout: post
title: todolist的编写过程以及踩坑记录(1)
subtitle: todolist
date: 2017-11-29
author: EWL
header-img: img/home-bg-art.jpg
catalog: true
tags:
- todolist
- jquery
- javascript

整体框架以及功能

编写过程

• 删除任务：

删除的主要步骤为：传入对应item的index，之后在task_list中找到该index，然后将其删除，故首先需要对index的有效性进行判断，还是要注意对于特殊的index判断规避问题（index为0的时候!index不再生效，所以应该写成index === undefined），然后再判断index在task_list中是否有对应的项，万一超出范围应该立即return。在满足了一系列的条件之后，进行删除，

    function delete_task_item(index){
       
        if(index === undefined || !task_list[index]){
            return;
        }
        task_list.splice(index,1);        
  
        refresh_task_list();
    }

    // 刷新列表
    function refresh_task_list(){
        store.set('task_list', task_list);
        render_task_list();
    }

refresh_task_list()的编写也尤为重要，并且可以将之前的add_task_list()中的语句改为refresh_task_list()，并且相关的函数中但凡写了render_task_list的都可以稍作修改。
如下修改：

        // add_new_task包含了两个函数的执行，既更新又渲染
        if(add_new_task(new_task)){
            // 成功渲染后就进行清空聚焦
            // 输入结束清空输入框并聚焦
            $this.find('#content').val(null).focus();
        }

// 添加新任务
    function add_new_task(new_task){
        task_list.push(new_task);
        refresh_task_list();       
        return true;
    }

既然提到了refresh_task_list则相关的render_task_list也需要提一下，需要将渲染的内容和item的index一并传入render_task_item，以便后续的增删改查

// 渲染单个任务模板
    function render_task_item(data, index){
        if(index === undefined || !task_list[index]){
            // warning('你刚刚好像把我删了啊，坟蛋');
            return;
        }
        var task_item_tpl = '<div class="task-item" data-index="'+ index +'">'+
                '<span><input type="checkbox"></span>'+
                '<span class="task-content">'+ data.content +'</span>'+
                '<div class="fr">'+
                    '<span class="delete-btn">delete</span>'+
                    '<span class="detail-btn">detail</span>'+
                '</div>'+
                '</div>';
        // 返回被渲染的单个模板
        return $(task_item_tpl);
    }

结合以上的内容总结为：delete涉及到了删除之后列表的重新渲染refresh，而refresh又涉及到了渲染render，环环嵌套下来，add部分就可以免去 最开始的render。

易错点1：
捕捉删除按钮一定要在渲染了item模板之后再进行捕捉

function listen_task_delete(){
        $('.delete-btn').on('click', function(){
            var index = $(this).parents('.task-item').data('index'),
                confirm_task_delete = warningObj.confirmMsg('确认删除该项？');
            // 确认删除之后，立即执行删除函数
            
            confirm_task_delete ? delete_task_item(index) : null;           
            
        });
    }
function render_task_list(){
        
        $task_list.html(null);
       
        for(var i = 0, len = task_list.length; i < len; i++){
          
            $task_list.append(render_task_item(task_list[i], i));
          
            
        }
        // 在渲染之后添加事件，符合动态渲染的条件
        // 以上渲染结束，捕捉删除按钮，进行删除事件监听
        listen_task_delete();
    }

补充：

二次刷课的时候发现一个可以提升用户体验的地方就是在输入为空的时候提醒用户不能输入控制符之后将输入框清空并聚焦，这个小功能可以单独写一个函数封装。

删除功能最大的关键点在于二次渲染列表，这一点要注意函数的逐层嵌套。