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();
});
妈耶，我要的是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();
}
});
效果图：
很好
易错点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]));
}
}
效果图:
妈耶，我明明要的是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]));
}
}
效果图：
很好，就是你了
补充
添加任务算是搞定了，但是发现一个问题，每次进来，我之前输入的东西呢？说好的记录呢？所以需要一个初始化的函数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写了好久都不对，后来发现函数没有调用，脑子是个好东西....
