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

整體框架以及功能

編寫過程

• 刪除任務(wù)：

刪除的主要步驟為：傳入對應(yīng)item的index，之后在task_list中找到該index，然后將其刪除，故首先需要對index的有效性進行判斷，還是要注意對于特殊的index判斷規(guī)避問題（index為0的時候!index不再生效，所以應(yīng)該寫成index === undefined），然后再判斷index在task_list中是否有對應(yīng)的項，萬一超出范圍應(yīng)該立即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()，并且相關(guān)的函數(shù)中但凡寫了render_task_list的都可以稍作修改。
如下修改：

        // add_new_task包含了兩個函數(shù)的執(zhí)行，既更新又渲染
        if(add_new_task(new_task)){
            // 成功渲染后就進行清空聚焦
            // 輸入結(jié)束清空輸入框并聚焦
            $this.find('#content').val(null).focus();
        }

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

既然提到了refresh_task_list則相關(guān)的render_task_list也需要提一下，需要將渲染的內(nèi)容和item的index一并傳入render_task_item，以便后續(xù)的增刪改查

// 渲染單個任務(wù)模板
    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);
    }

結(jié)合以上的內(nèi)容總結(jié)為：delete涉及到了刪除之后列表的重新渲染refresh，而refresh又涉及到了渲染render，環(huán)環(huán)嵌套下來，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('確認(rèn)刪除該項？');
            // 確認(rèn)刪除之后，立即執(zhí)行刪除函數(shù)
            
            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));
          
            
        }
        // 在渲染之后添加事件，符合動態(tài)渲染的條件
        // 以上渲染結(jié)束，捕捉刪除按鈕，進行刪除事件監(jiān)聽
        listen_task_delete();
    }

補充：

二次刷課的時候發(fā)現(xiàn)一個可以提升用戶體驗的地方就是在輸入為空的時候提醒用戶不能輸入控制符之后將輸入框清空并聚焦，這個小功能可以單獨寫一個函數(shù)封裝。

刪除功能最大的關(guān)鍵點在于二次渲染列表，這一點要注意函數(shù)的逐層嵌套。