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

整体框架以及功能

功能与编写过程

今天算是完成了最后一部分的编写——提醒功能，一方面是之前的显示提醒的部分，一方面是铃声提醒的部分。在写第一遍的时候，这两个地方都没有成功的出来，并且老师的源码部分也有一定的功能缺陷，也就是todolist的闹钟提醒只能设置一次，如果闹钟已经过期，那么已经设置过闹钟的那一条task-item就不能再设置闹钟。

image.png

这很不合理啊，所以我就进行了一丢丢的修改。

• 可以二次设置闹钟
• 将原生存在于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就显得更加的完备了。多的，也没什么特别想说的了，感觉这个项目刷两遍，还是挺值的。

image.png