Todolist项目总结 JavaScript+jQuery
Html部分
- 消息提醒,开始隐藏
- 内容区
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调用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();