jQuery實現備忘錄小應用(練手項目)

首先感謝慕課網的實戰課程，我拖了很久才跟著寫完，現在整理一下思路。
實戰課原地址：http://coding.imooc.com/learn/list/72.html
測試地址：http://www.saarthur.com/write/myTodo_912/index.html

需求

• 能夠添加備忘事件
• 能夠修改、刪除備忘事件
• 定時提醒
• 自定義彈窗

思路

1. 首先用HTML+CSS把靜態頁面先排起來，將界面的效果調整好，以PC端的自適應爲主;
2. 實現添加Task的功能
   • 先將Task列表從HTML中注釋，並將單條用拼接字符串的方式作爲模板
   • 將新添加的單條Task推入localstore中儲存，并清空現有Task列表的模板並更新
3. 查看Task詳情功能
   • 在單條Task下增加“詳情”按鈕，在點擊“詳情”后彈出該條Task的詳情框，裏面含有標題、内容、提醒時間(想情況用jq動態插入)
   • 詳情框中標題為Task列表中顯示的文字(也就是我們一開始輸入的文字)，這需要從store中獲取，内容和提醒時間皆爲空
   • 爲了方便使用，增加雙擊該條Task即可打開詳情框的功能
   • 單擊遮罩層即可關閉詳情框
4. 刪除Task功能
   • 在單條Task下增加“刪除”按鈕，在點擊“刪除”后彈出提示“是否刪除該條”，點擊“是”后，將該條數據從store中刪除
   • 更新模板
5. Task詳情的更新
   • 點擊詳情后先清空之前的内容，並獲取當前點擊的Task的數據
   • 獲取詳情框中的標題、内容、提醒時間，并在修改后重新推入store中
   • 更新模板
6. 定時提醒功能
   • 設置一個定時器，每隔一短時間循環一次store中的task_list的數據，將task_list中含有定時提醒數據斌且沒有提醒過的單條拿出，對比現在時間，如果時間剛好則顯示提醒
   • 提醒狀態是後面插入HTML中，并在關閉后移除，且給該條Task的增加一個已提醒過的狀態
   • 增加提醒時的音效，關閉后移除
7. 修改彈出框
   • 替代原來刪除提示的瀏覽器自帶彈出框
   • 采用異步方法，不影響其他代碼的執行

用到的Jquery方法

• $.Deferred
   Deferred對象就是jQuery的回調函數解決方案，所以Deferred對象的含義就是“延遲”到未來某個點在執行。
   Deferred對象的一大好處，就是它允許你自由添加多個回調函數。另一大好處，就是它允許你為多個事件指定一個回調函數，這是傳統寫法做不到的。
   Deferred對象的最大優點，就是它把這一套回調函數接口，從ajax操作擴展到了所有操作。也就是説，任何一個操作——不管是ajax操作還是本地操作，也不管是異步操作還是同步操作——都可以使用deferred對象的各種方法，指定回調函數。
   這裏使用了Deferred.resolve()和Deferred.promise()。
   jQuery規定，Deferred對象有三種執行狀態——未完成、已完成和已失敗。如果執行狀態是“已完成”（resolved），Deferred對象立刻調用done()方法指定的回調函數；如果執行狀態是“已失敗”，調用fail()方法指定的回調函數；如果執行狀態是“未完成”，則繼續等待，或者調用progress()方法指定的回調函數（jQuery 1.7版本添加）。
   前面部分的ajax操作時，Deferred對象會根據返回結果，自動改變自身的執行狀態；但是，在wait()函數中，這個執行狀態必須由程序員手動指定。dtd.resolve()的意思是，將dtd對象的執行狀態從“未完成”改爲“已完成”，從而觸發done()辦法。
   而Deferred.promise()方法。它的作用是，在原來的Deferred對象上返回另一個Deferred對象，後者只開放與改變執行狀態無關的方法（比如done()方法和fail()方法），屏蔽與改變執行狀態有關的方法（比如resolve()方法和reject()方法），從而使得執行狀態不能被改變。
  ——以上來自於阮一峰的jQuery的deferred对象详解

• $.extend
   用一個或多個其他對象來擴展一個對象，返回被擴展的對象。
   $.extend([deep], target, object1, [objectN])

• setInterval
   setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
   setInterval() 方法會不停地調用函數，直到clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的ID值可用作 clearInterval() 方法的參數。
   setInterval(code,millisec[,"lang"])

• e.preventDefault()
   event.preventDefault() 取消事件的默認動作。

• Date().getTime()
   getTime() 函數用於使用當地時間返回當前Date對象中的時間值。該時間值表示從1970年1月1日午夜開始，到當前Date對象時，所經過的毫秒數，以格林威治時間爲準。
   該函數屬於Date對象，所有主流瀏覽器均支持該函數。

• append()
  append() 方法在被選元素的結尾（仍然在内部）插入指定内容。
  append() 和 appendTo() 方法執行的任務相同。不同之處在於：内容和選擇器的位置，以及 append() 能夠使用函數來附加内容。
  $(selector).append(content) 和 $(content).appendTo(selector)

• push()
  push() 方法可向數組的末尾添加一個或多個元素，並返回新的長度。
  arrayObject.push(newelement1,newelement2,....,newelementX)

2017年9月14日 第一次修改