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

---

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

---

整体框架以及功能

功能	主函数	相关函数
添加任务	add_new_task	render_task_item、render_task_list

编写过程

• 添加任务
  添加任务的主要步骤为：获取输入框的内容，存入一个空对象中>将该对象push进task_list中>一旦添加成功，就渲染页面中的taks-list部分>将整个任务列表的渲染拆分为单个item的渲染

绑定主输入框所在的表单，为其注册submit事件，（submit只针对于表单事件，绑定在div上不会生效）， 并且要为按钮设置禁用默认行为（否则直接刷新页面，后续的程序都不会再执行）

具体相关的代码如下：

var add_task_form = $('.add-task');
    add_task_form.on('submit', function(e){
        e.preventDefault();
        // 以下为测试代码
        console.log('hello');
    });

易错点1：

每一次将获取的输入框内容存入一个空对象，该空对象一定不能是全局的，否则会出现以下情况。

var new_task = {};
    add_task_form.on('submit', function(e){
        e.preventDefault();
        var $this = $(this);
        
        // 获取输入框的内容
        // $(this)指向表单本身
        new_task.content = $this.find('#content').val();
        // 禁止输入空值
        // 并且调用提醒函数
        // 调用$.trim可以防止输入连续的空格
        // 连.length和！new_task都不好使
        if(!$.trim(new_task)){
            warning('禁止输入空值');
        }
        // 如果添加成功
        if(add_new_task(new_task)){
            // 就进行模板的渲染
            render_task_list();
        }
        // 输入结束清空输入框并聚焦
        $this.find('#content').val(null).focus();
    });

image.png
image.png
image.png

妈耶，我要的是123不是333，这就涉及到了作用域的问题，不要把独立的东西写进全局，不然就不是修改，而是不断的重写一个

---

修改后的代码：

add_task_form.on('submit', function(e){
       e.preventDefault();
       var $this = $(this);
       var new_task = {};        
    
       new_task.content = $this.find('#content').val();      
       
       if(!$.trim(new_task)){
           warning('禁止输入空值');
       }
   
       if(add_new_task(new_task)){
           // 就进行模板的渲染
           render_task_list();
       }     
      
   });

效果图：

image.png

很好

---

易错点2:：

每次渲染之前都将原来的task_list的div里面的内容全部清空，否则会出现下面的状况

代码：

 function render_task_list(){
        
        for(var i = 0, len = task_list.length; i < len; i++){
            $task_list.append(render_task_item(task_list[i]));          
          }
    }

效果图:

image.png

妈耶，我明明要的是123

---

改代码：

 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]));          
          }
    }

效果图：

image.png

很好，就是你了

---

补充

添加任务算是搞定了，但是发现一个问题，每次进来，我之前输入的东西呢？说好的记录呢？所以需要一个初始化的函数init

思路如下：

获得localStorage里的task_list>渲染task_list

易错点1：

初始化有可能存在两种情况：首先，是第一次渲染，还没有task_list，根本不能通过store找到task_list，这时候要返回一个空数组，来容纳之后输入的内容。

代码：

function init(){
        // 提取出task_list，然后进行渲染
        // 但是要考虑一个问题，如果一开始localStorage里什么
        // 都没有，则task_list只不过是一个空数组
        task_list = store.get('task_list') || [];
        if(task_list.length){
            render_task_list();
        }        
    }

效果就不用放了，就是一进页面就刷新了列表，之前的记录都会显示进列表，很好。

为啥判断要用length，不直接来一个task_list呢

答：这是一种最稳妥的方式，包括在jquery文档中都说过这么一句话,对于jquery对象的判断，最好也是使用length来判断。

易错点2：

写完了函数，要执行啊，坟蛋，我tm写了好久都不对，后来发现函数没有调用，脑子是个好东西....