jquery+bootstrap 实现简单备忘录（二）

写在前面的话

    在上一篇文章中文章中，我已经初略介绍了这个项目的结构和函数。接下来，我会详尽把这个项目的内部逻辑展现在你面前。
    在这篇文章中，我们探讨的是dom操作逻辑

非常感谢你能看到这篇文章，也希望你能继续看下去……

程序的开始

定义对象和变量

//待办事件对象
var data = {
        time:"",//备忘提醒时间
        content:"",//备忘内容
        title:"",//备忘标题
        key:"",//备忘标识
        state:"",//备忘状态
};
//监视时间对象
var timeobj = {
        neartime:"",//最近的一个备忘事项时间
        nearflag:"",//最近的一个备忘事项标记
        obj:"",//最近的一个备忘事项对象
};
var idFlag = 0;//事件状态改变标志
var watcher = null;//事件监听器
var alert = $('.alert').get(0);//闹钟
$('.datetime').datetimepicker();//使用时间输入框插件

执行初始化函数

init();//初始化dom结构
time_watch();//开始时间监听
//事件初始化
function init(){
    ping();//拼接备忘事项
    listion_del();//监听删除
    listion_list();//监听列出
    listion_che();//监听选中
    /*这三个操作都是基于备忘事项dom树的，一旦dom树变化，需要重新绑定*/
}

初始化dom结构（拼接字符串）

//事件列表拼接
function ping(){
    //拼接html内容
    var tabContentStr="";
    var f_tabContentStr = "";
    var tmpStr = "";
    for (var i = localStorage.length-1; i >= 0; i--) {
      var key = localStorage.key(i);
      /*JSON.parse将string转换为json*/
      var object = JSON.parse(localStorage.getItem(key));
      var state = object.state;
      if(state){//未完成
        tmpStr = ping_unfinish(object,i);
        tabContentStr=tabContentStr+tmpStr;
      }else{//已完成
        tmpStr = ping_finish(object,i);
        f_tabContentStr=f_tabContentStr+tmpStr;
      }
    }
    $('#tList').html(tabContentStr);
    $('#fList').html(f_tabContentStr);
}
//未完成事件拼接
function ping_unfinish(object,i){
        var tempStr = '<li class="list-group-item" id="'+i+'">'+
            '<div class="row" style="vertical-align:center">'+
                '<div class="col-xs-9">'+
                    '<input type="checkbox" data-toggle="modal" data-target="#modal_sure">'+
                    '<span class="tudo-word" style="word-wrap:break-word">'+object.title+'...</span>'+
                '</div>'+
                '<div class="col-xs-3 text-right">'+
                    '<button type="button" class="btn btn-link del">删除</button>'+
                    '<button type="button" class="btn btn-link list" data-toggle="modal" data-target="#modal_list">详细</button>'+
                '</div>'+
            '</div>'+
        '</li>';
        return tempStr;
}
//已完成事件拼接
function ping_finish(object,i){
        var tempStr = '<li class="list-group-item" id="'+i+'">'+
            '<div class="row" style="vertical-align:center">'+
                '<div class="col-xs-9">'+
                    '<input type="checkbox" checked disabled>'+
                    '<span class="tudo-word" style="word-wrap:break-word">'+object.title+'...</span>'+
                '</div>'+
                '<div class="col-xs-3 text-right">'+
                    '<button type="button" class="btn btn-link del">删除</button>'+
                    '<button type="button" class="btn btn-link list" data-toggle="modal" data-target="#modal_list">详细</button>'+
                '</div>'+
            '</div>'+
        '</li>';
        return tempStr;
}

dom操作监听

    为什么要进行dom监听？
    因为在这个dom树里的备忘事项（一个个的li）是动态显示的，随着用户的添加和删除等操作。
    存在于这些li上被绑定的删除，列出（button），checkbox框也是动态变化的，需要不停的变化，所以需要监听这些操作
    需要监听的操作有：
    list上的删除（button点击）,列出（button点击）,checkbox框（勾选）

删除dom监听

//删除事件监听
function listion_del(){
    // 删除事件触发
    $('.del').on('click',function(){
        var id = $(this).parent().parent().parent().attr("id");
        thing_del(id);
        init();
        time_reset();
    });
}

//事件删除操作
function thing_del(id){
    var key = localStorage.key(id);
    localStorage.removeItem(key);
}

列出dom监听

//列出事件监听
function listion_list(){
    //列出事件触发
    $('.list').on('click',function(){
        var id = $(this).parent().parent().parent().attr("id");
        thing_list(id);
    });
}

//事件列出操作
function thing_list(id){
    var key = localStorage.key(id);
    data = JSON.parse(localStorage.getItem(key));
    $('#modal-content').attr("disabled",!data.state);
    $('#modal-time').attr("disabled",!data.state);
    $('#modal-title').val(data.title);
    $('#modal-content').val(data.content);
    $('#modal-time').val(data.time);
}

勾选dom监听

//勾选事件监听
function listion_che(){
    //勾选事件触发
    $('input:checkbox').on('click',function(){
        $(this).prop("checked",false);
        idFlag = $(this).parent().parent().parent().attr("id");
    });
}

dom操作触发

    为什么这些操作是触发而不是监听呢？因为它们不是被绑定在li上的，不会随着用户的操作而发生改变。
    这些操作有：
        备忘事项的提交操作
        备忘内容的修改操作
        勾选事项后对提示框的确认操作

提交事件触发

//提交事件触发
$('#submit').on('click',function(){
    thing_sub();
    init();
    time_reset();
});

//事件提交操作
function thing_sub(){
    data.state = true; //此时状态是未完成状态
    data.time = $('#time').val();//获取提醒时间
    data.content = $('#input').val();//获取提醒内容
    data.title = data.content.substring(0,8);//获取提醒标题
    data.key = new Date().getTime();
    /*因为localStorage.setItem无法识别json 使用JSON.stringify(data)*/
    localStorage.setItem(data.key,JSON.stringify(data));//将待办事件对象存入本地
    $('#input').val("");//清空数据
    $('#time').val("");//清空数据
}

修改事件触发

//修改事件触发
$('#update').on('click',function(){
    thing_upd();
    init();
    time_reset();
});

//事件修改操作
function thing_upd(){
    data.time = $('#modal-time').val();
    data.content = $('#modal-content').val();
    data.title = data.content.substring(0,8);
    localStorage.setItem(data.key,JSON.stringify(data));//将待办事件对象存入本地
}

确认事件触发

//确认事件触发
$('#sure').on('click',function(){
    thing_change();
    init();
    time_reset();
});

// 事件状态改变操作
function thing_change(){
    var key = localStorage.key(idFlag);
    var object = JSON.parse(localStorage.getItem(key));
    object.state = false;
    idFlag = 0;
    localStorage.setItem(key,JSON.stringify(object));
}

    至此，dom的逻辑结构，数据操作我已经完全列出来了。也许有很多模糊的地方。我会把这个项目打包分享在百度云上，链接附在最后一讲上。
    下一篇文章，我会详细介绍这个项目的灵魂所在：备忘闹钟铃声提醒功能的实现