整体框架以及功能
| 功能 | 主函数 | 相关函数 |
|---|---|---|
| 提醒显示 | task_remind_check | show_msg hide_msg render_remind_msg |
功能与编写过程
今天算是完成了最后一部分的编写——提醒功能，一方面是之前的显示提醒的部分，一方面是铃声提醒的部分。在写第一遍的时候，这两个地方都没有成功的出来，并且老师的源码部分也有一定的功能缺陷，也就是todolist的闹钟提醒只能设置一次，如果闹钟已经过期，那么已经设置过闹钟的那一条task-item就不能再设置闹钟。
这很不合理啊，所以我就进行了一丢丢的修改。
- 可以二次设置闹钟
- 将原生存在于body中的提醒部分变成后期渲染的内容
具体如下
// 初始化
function init(){
// 提取出task_list，然后进行渲染
// 但是要考虑一个问题，如果一开始localStorage里什么
// 都没有，则task_list只不过是一个空数组
task_list = store.get('task_list') || [];
if(task_list.length){
render_task_list();
}
task_remind_check();
}
// 提醒任务时间
function task_remind_check(){
var current_timestamp;
var timer = setInterval(function(){
for(var i = 0, len = task_list.length; i < len; i++){
var item = get(i),task_timestamp;
if(!item && !item.remind_date){
continue;
}
current_timestamp = (new Date()).getTime();
task_timestamp = (new Date(item.remind_date)).getTime();
if(current_timestamp - task_timestamp >= 1){
show_msg(item.content, i);
}
}
}, 500);
}
function render_remind_msg(msg, index){
var data = {};
var tpl =
'<span class="msg-content" data-index='+ index +'>'+ msg +'</span>'+
'<span class="msg-confirm-btn">Ok, I got it, thanks for reminding me</span>';
$('.msg').html(tpl);
$('.msg-confirm-btn').click(function(){
var index = $(this).siblings('.msg-content').data('index');
data.remind_date = "";
update_task(index, data);
$alert.get(0).pause();
hide_msg();
});
}
// 提醒事件
function show_msg(msg, index){
if(!msg){return;}
render_remind_msg(msg, index);
$alert.get(0).play();
console.log($alert);
$('.msg').show();
}
function hide_msg(){
$('.msg').hide();
}
总体而言，其中碰到两次困难，一个是关于渲染tpl部分，会因为setInterval不停地刷新，然后tpl中的文字就不断的闪动，这就好尴尬的。然后发现是setInterval的时间忘记设置了。另一个困难就是绑定事件的时候，不知道该怎么在闹钟提醒后关闭提醒并且删除该条item的提醒闹钟，这一点是满足二次设置闹钟的关键。emmmm后来思考了一番觉得还是应该使用渲染将每一次的i设置为index，然后还是根据index来进行设置，拿到闹钟所在的item的index直接赋值为空，然后更新update_task就可以对localStorage中的task_list内容修改。
这一节，得到的最大的提升就是自己对于渲染模板有了更深入的认识和使用，老师写的部分功能缺失缺失很严重，自己能对它们进行修改，也是感觉挺开心的。
后续补充
之后还想做一下，“五分钟后提醒”功能以及修改一下alert的样式，原生的alert看起来还是有些太僵硬了。这个todolist就显得更加的完备了。多的，也没什么特别想说的了，感觉这个项目刷两遍，还是挺值的。
