My Todo项目实战及总结

1.项目简介

	My Todo项目类似于一个备忘录，用户可以添加要做的事情（任务），可以对该任务进行备注或者描述，并且可以设置该任务的提醒时间。当到该任务的提醒时间时，系统会弹出提醒信息，用户点击“知道了”按钮，可关闭提醒信息。当用户完成该任务后，可以将该任务设置成完成状态。用户还可以更新任务的信息，比如描述、提醒时间。

1.1项目实现功能

1. 添加任务
在输入框里输入任务名称，点击提交按钮，即可添加任务到任务列表里。
2. 删除任务
点击某一任务的删除按钮，可以对应删除该任务，并将其从任务列表中移除。
3. 更新任务
点击“详细”按钮，可以查看每一条任务的详细信息，并且可以修改任务描述、提醒时间。点击提交按钮后，可以实现对任务的更新。
4. 完成任务
用户点击单选框，表示任务已经完成。已经完成的任务被呈现在任务列表的下半部分，未完成的任务显示在列表的上半部分。
5. 提醒任务
当任务列表里的任务到提醒时间时，系统会弹出提醒信息，提醒用户完成该任务。只有当用户点击“知道了”按钮后，该提醒信息才会隐藏。

1.2项目效果图

1. 添加任务

2. 删除任务

3. 更新任务


4. 完成任务

5. 提醒任务

2.项目技术总结

2.1本地存储

	为了保存用户输入浏览器的数据，采用本地存储的方式保存数据。用户输入的数据被存储到本地，再次启动程序时，数据不会丢失。这里是通过引入一个store插件来实现的。
	store插件的链接：[store插件](https://github.com/marcuswestin/store.js#user-content-api)
	项目中用到的方法：store.set(),store.get(),store.clearAll().

2.2datetimepicker控件

	在本项目需要实现一个让用户选择时间的功能，可以自己动手写源代码，但是考虑到时间问题，以及现有的控件比较成熟。
	开发有时候就好比是造车，如果已经有轮子了，直接拿过来用就好了，不用自己再从基础的造轮子开始。这就是站在巨人的肩膀上。
	所以这里选择引用一个datetimepicker控件，该插件的链接：[datetimepicker控件](https://github.com/xdan/datetimepicker)    
	datetimepicker控件界面如图所示：

2.3删除弹出框

	在项目中，当用户点击“删除”按钮删除该任务时，需要弹出一个提示框，让用户确定删除，才作出删除的操作。防止用户误触导致数据丢失。
	可以用alert方法来弹出提示框，但是该方法在用户不点击“确定”或者“取消”的情况下，程序不再继续执行，而是被阻断。但是这里希望，弹出框不影响程序继续执行。所以这里用到了promise方法。
	
	该方法使用步骤：
	1.定义：`var dfd = $.Deferred();`
	2.传值：`$box_sure.on('click',function(){
		sure = true;
		dfd.resolve(sure);
		hide_pop();
	})`
	3.返回值：`return dfd.promise();`

3.知识点总结

	本项目适合新手，难度一般。本项目已经上传github:[my-todo](https://github.com/wuzhaoqing325/my-todo)
	对项目中涉及的知识点总结如下：

1. 在自己动手写样式之前，可以先引入一些插件对各种标签进行初始化。因为很多标签都有默认的样式，这些样式有些我们是不需要的。比如normalize.css等插件。normalize.css
2. 有写插件是基于jquery的，所以在引用这一类的插件时，要把jquery.js放在这些插件的前面。
3. js文件开头可以加一个“；”，它的作用是：防止之前引入的js文件结束时没有加该符号，可能会导致一些不必要的错误。
4. 不要惯性思维的在html文件中定义div等，有时候在js文件中定义更加方便，但是记得在创建完之后把它们添加到body中。
5. $(window)有一个resize事件，当浏览器窗口的大小发生改变时，触发该事件。
6. 在模板中的类，并没有添加到dom中，需要在渲染函数中定义一下。
7. 有些事件需要循环监听，这时可以用定时器。
8. jquery的extend方法可以将两个对象的一些属性或方法进行合并。
9. e.preventDefault();阻止执行事件的默认操作。

最后

以上就是机灵铃铛最近收集整理的关于My Todo项目实战及总结My Todo项目实战及总结的全部内容，更多相关My内容请搜索靠谱客的其他文章。