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