Todolist项目总结 JavaScript+jQuery

Html部分

1. 消息提醒，开始隐藏
2. 内容区

2.1    标题

2.2    表单（输入框、提交按钮）

2.3 清单列表

2.4 任务详情遮罩

2.5 任务详情

3   video引入提示音乐

Css部分

box-sizing、transition、box-shadow的兼容性：加前缀-webkit-、-moz-…

已完成的任务添加删除线（由伪元素实现.task-item.completed:after，给它设定背景、宽、高，内容为空）及一定的opacity

任务详情遮罩采用position: fixed;覆盖整个屏幕，需要一定的透明度

设置video元素宽度、高度为0，用户不可见

Js部分

分为三大块：任务项、任务详情、提示信息

1. 首先初始化

1.1调用store.get('task_list')||[]尝试获取本地存储；

1.2 监听消息提醒，点击消息提醒中的“知道了”按钮，则隐藏消息提示；

1.3 如果任务清单的任务项目个数不为0，则渲染任务清单（所有的任务项）；

1.4任务提醒的检查（需要不断检查任务设定的时间到没有），设定时间戳，使用setInterval实现间歇调用，由于每个任务项对应的提醒时间不同，所以每次间歇调用都应该将所有的任务项遍历，有三种情况可以直接跳过（没有任务项、没有设定任务项时间或任务已经提示过了），利用当前的时间(new Date()).getTime()和任务项设定的时间(new Date(item.remind_date)).getTime()比较，一旦超过该时间，马上更新任务项的informed: true以作标识，说明该任务项已经提示过了，然后show_msg(item.content)；

渲染任务清单

即渲染所有的任务项，所以要遍历任务清单，将任务清单分成两类，一类是为完成的，一类是已完成的，定义一个数组保存已完成的清单，if(item && item.complete)则把item，item的获取store.get('task_list')[index]，保存到数组中，遍历完所有的任务清单项后会形成最终的数组，将该数组中的元素进行集中渲染（渲染单条任务项），并给每个项添加对应的类$task.addClass('completed');产生对应的css效果，且已完成的项添加到列表末尾，所以采用$task_list.append($task);方法添加单条html模板。而为完成的任务项则在遍历时直接渲染即可，且是从列表头部加入$task_list.prepend($task);基本样式渲染完成后，还要对事件监听渲染，listen_task_delete();listen_task_detail();listen_checkbox_complete();分别对任务删除、详情、已完成三个事件进行监听。

渲染单条任务项

传递进来两个参数，一个是item，一个是所有i，由于有传递进来的参数，所以首先作判断，判断这两个参数是否存在，因为接下来的程序中会用到，如果其中之一不存在，则不能继续进行，需要return；接下来采用html的形式直接给出单条的模板，模板中用到了item的一些属性，item.complete（是否完成，已完成则添加checked类显示相应的css效果）、item.content，还为单条任务项增加了data-index="'+index+'"属性待用，最终返回整个模板。

任务删除事件

利用jQuery相关方法找到删除按钮所在的任务项，从该任务项的模板中能获取到index，$item.data('index');获取到index后，pop弹出框提示“确认删除”，利用了异步回调方式实现，

pop('确定删除?').then(function (r) {r?delete_task(index):null;})

真正的删除操作，又在一个单独的函数中实现，可以实现复用，即删除单条的任务项，由于已经有了index，直接delete task_list[index]（该方法删除掉数组中的某个元素，使该位置置为undefined，数组长度不变），删除对整个内容造成了影响，所以需要更新localstorage：refresh_task_list();

更新（任务删除、任务详情修改、添加任务）

把改动后的任务项数组重新置入本地存储store.set('task_list',task_list);然后再次渲染任务清单

任务详情事件

两种情况可以打开任务详情面板，1.双击任务项；2.点击任务项对应的详情

两种情况处理方法大致相同，都需要找到所点任务项的div，同样，通过div中的data-index属性可以获得任务项对应的index，最后显示任务详情面板show_task_detail(index);

显示任务详情面板

显示任务详情包括以下几个过程（注意：渲染是构造html内容，而实际的显示由jQuery找到对应的元素将原本不显示的display: none;任务详情得以显示）:首先需要渲染指定任务项详情模板，然后在对应的元素下显示模板，为了用户有更好的体验，还应给整个屏幕加上遮罩效果（遮罩效果由css完成，只是在js中控制显示、隐藏即可，如$task_detail_mask.show();）

渲染指定任务项详情模板

任务详情模板包含在表单中，第一部分显示任务项的内容，以及其对应得输入框（开始时隐藏）；第二部分是项目的描述；第三部分设置项目的提醒时间；最后添加更新按钮；

双击任务内容，显示内容输入框，隐藏任务内容；监听更新按钮，阻止默认事件，获取表单中的内容输入框、内容描述、提醒时间存入一个空对象中，然后执行任务更新，更新的最后隐藏任务详情框。

任务更新

任务更新，需要传入任务的index和需要更新的data对象，使用$.extend({},task_list[index],data)方法，覆盖已有的值，添加新增的值，实现更新，得到新的task_list[index]，最后执行更新（刷新localstorage数据并渲染模板）

隐藏任务详情面板

点击更新后，需要隐藏任务详情面板，使用hide()方法，将面板和遮罩隐藏；

点击遮罩，也会隐藏面板

添加任务项

点击submit按钮后，阻止默认事件，获取输入框中的内容，如果有内容，则将内容添加到new_task={}空对象的new_task.content属性中，在将该对象传入add_task(new_task)直接push进任务列表数组，在进行更新，并返回true，如果返回true再把输入框清空（因为已经添加了）。

任务完成事件

点击任务项中的勾选框时执行该事件，点击后从任务项模板中取index，根据index取localstorage，判断item的complete属性，若该属性为true则改为false，否则改为true；最后将index和item.complete属性传入进行任务更新

pop弹出框（重点）

要显示的内容作为参数传入，如果没有传入，则直接报错。

变量声明：var conf={},$box,$mask,$title,$content,$confirm,$cancel,dfd,confirmed,timer;

根据传入的参数是否是字符串（typeof），把参数的合并分成两种情况；

Timer的作用，间歇调用（不断地确认用户是否点击，若点击则隐藏），不管是点击确认、取消还是遮罩部分，都会影响confirmed变量（confirmed为true则去执行then回调函数删除对应的task，false则不执行），点击后清除间歇调用的时间，最后使弹出框隐藏dismiss_pop()。

dfd=$.Deferred();延迟作用，实现异步，不会冻结程序（因为设定了定时提醒，即使弹出框显示，后台的提醒也正常执行）

确认

取消、点击遮罩取消

弹出框自适应：结合window的宽、高和弹出框宽、高设置弹出框的left和top值

$window.on('resize',function () {…})

$window.resize();