上一節我們已經講了Chrome擴充的基礎知識，并建構了基礎的html，這一節我們将就html DOM添加部分添加腳本，即腳本在我們的popup頁面中進行的操作，頁面所産生的變化。
正常情況下資料處理加載完成狀态，這些資料是從本地資料讀取的。
點選“添加新項”，出現輸入框，輸入文字後回車送出資料：
添加完成後将資料存儲，同時添加DOM元素：
考慮到功能最簡化處理，點選已标為完成的任務，将提示“删除或重置為未完成”：
以上功能為最核心功能，可以在此基礎上進行擴充，比如任務分組，修改任務，任務提醒，網絡同步資料等等。
下面開始相應的腳本内容。
為了避免全局變量，使用匿名函數方式，所有事件處理及資料綁定均在此函數中進行，同時定義與jQuery中的$()類似的函數：
<code>(</code><code>function</code><code>(){</code>
<code> </code><code>var</code> <code>$=</code><code>function</code><code>(id){</code><code>return</code> <code>document.getElementById(id);}</code>
<code>})();</code>
建立Tasks對象，定義show()函數和hide()函數，同時存儲幾個常用的DOM對象。
<code>var</code> <code>Tasks = {</code>
<code> </code><code>show:</code><code>function</code><code>(obj){</code>
<code> </code><code>obj.className=</code><code>''</code><code>;</code>
<code> </code><code>return</code> <code>this</code><code>;</code>
<code> </code><code>},</code>
<code> </code><code>hide:</code><code>function</code><code>(obj){</code>
<code> </code><code>obj.className=</code><code>'hide'</code><code>;</code>
<code> </code><code>//存儲dom</code>
<code> </code><code>$addItemDiv:$(</code><code>'addItemDiv'</code><code>),</code>
<code> </code><code>$addItemInput:$(</code><code>'addItemInput'</code><code>),</code>
<code> </code><code>$txtTaskTitle:$(</code><code>'txtTaskTitle'</code><code>),</code>
<code> </code><code>$taskItemList:$(</code><code>'taskItemList'</code><code>)</code>
<code>}</code>
其中show()函數和hide()函數均使用了鍊式調用，每次執行此函數均會傳回對象本身，這樣對象就可以使用形如類似jQuery書寫方式來使用此函數。
然後注冊事件：
<code>//.....</code>
<code>//初始化</code>
<code>init:</code><code>function</code><code>(){</code>
<code> </code><code>/*注冊事件*/</code>
<code> </code><code>//打開添加文本框</code>
<code> </code><code>Tasks.$addItemDiv.addEventListener(</code><code>'click'</code><code>,</code><code>function</code><code>(){</code>
<code> </code><code>Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);</code>
<code> </code><code>Tasks.$txtTaskTitle.focus();</code>
<code> </code><code>},</code><code>true</code><code>);</code>
<code> </code><code>//回車添加</code>
<code> </code><code>Tasks.$txtTaskTitle.addEventListener(</code><code>'keyup'</code><code>,</code><code>function</code><code>(ev){</code>
<code> </code><code>var</code> <code>ev=ev || window.event;</code>
<code> </code><code>if</code><code>(ev.keyCode==13){</code>
<code> </code><code>//TODO:寫入本地資料</code>
<code> </code><code>Tasks.AppendHtml(task);</code>
<code> </code><code>Tasks.$txtTaskTitle.value=</code><code>''</code><code>;</code>
<code> </code><code>Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);</code>
<code> </code><code>}</code>
<code> </code><code>ev.preventDefault();</code>
<code> </code><code>//取消</code>
<code> </code><code>Tasks.$txtTaskTitle.addEventListener(</code><code>'blur'</code><code>,</code><code>function</code><code>(){</code>
<code> </code><code>Tasks.$txtTaskTitle.value=</code><code>''</code><code>;</code>
<code> </code><code>Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);</code>
<code> </code><code>//TODO:初始化資料，加載本地資料，生成html </code>
<code>},</code>
<code>//....</code>
其中待完成部分為我們下一節将重點計到的html5的本地存儲功能。再定義資料操作部分，先寫上空白函數：
<code>//增加</code>
<code>Add:</code><code>function</code><code>(){</code>
<code> </code><code>//TODO</code>
<code>//修改</code>
<code>Edit:</code><code>function</code><code>(){</code>
<code>//删除</code>
<code>Del:</code><code>function</code><code>(){</code>
<code>//...</code>
還需要初始化此函數使其執行并讓匿名函數執行：
<code> </code><code>var</code> <code>Tasks = {</code>
<code>//***</code>
<code> </code><code>}</code>
<code> </code><code>Tasks.init();</code>
好吧，以下就是本節中所要提到的全部代碼：
<code> </code><code>show:</code><code>function</code><code>(obj){</code>
<code> </code><code>obj.className=</code><code>''</code><code>;</code>
<code> </code><code>return</code> <code>this</code><code>;</code>
<code> </code><code>},</code>
<code> </code><code>hide:</code><code>function</code><code>(obj){</code>
<code> </code><code>obj.className=</code><code>'hide'</code><code>;</code>
<code> </code><code>//存儲dom</code>
<code> </code><code>$addItemDiv:$(</code><code>'addItemDiv'</code><code>),</code>
<code> </code><code>$addItemInput:$(</code><code>'addItemInput'</code><code>),</code>
<code> </code><code>$txtTaskTitle:$(</code><code>'txtTaskTitle'</code><code>),</code>
<code> </code><code>$taskItemList:$(</code><code>'taskItemList'</code><code>),</code>
<code> </code><code>//初始化</code>
<code> </code><code>init:</code><code>function</code><code>(){</code>
<code> </code><code>/*注冊事件*/</code>
<code> </code><code>//打開添加文本框</code>
<code> </code><code>Tasks.$addItemDiv.addEventListener(</code><code>'click'</code><code>,</code><code>function</code><code>(){</code>
<code> </code><code>Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);</code>
<code> </code><code>Tasks.$txtTaskTitle.focus();</code>
<code> </code><code>},</code><code>true</code><code>);</code>
<code> </code><code>//回車添加</code>
<code> </code><code>Tasks.$txtTaskTitle.addEventListener(</code><code>'keyup'</code><code>,</code><code>function</code><code>(ev){</code>
<code> </code><code>var</code> <code>ev=ev || window.event;</code>
<code> </code><code>if</code><code>(ev.keyCode==13){</code>
<code> </code><code>//TODO:寫入本地資料</code>
<code> </code><code>Tasks.AppendHtml(Tasks.$txtTaskTitle.value);</code>
<code> </code><code>Tasks.$txtTaskTitle.value=</code><code>''</code><code>;</code>
<code> </code><code>Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);</code>
<code> </code><code>}</code>
<code> </code><code>ev.preventDefault();</code>
<code> </code><code>//取消</code>
<code> </code><code>Tasks.$txtTaskTitle.addEventListener(</code><code>'blur'</code><code>,</code><code>function</code><code>(){</code>
<code> </code><code>Tasks.$txtTaskTitle.value=</code><code>''</code><code>;</code>
<code> </code><code>Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv);</code>
<code> </code><code>//TODO:初始化資料，加載本地資料，生成html </code>
<code> </code><code>//增加</code>
<code> </code><code>Add:</code><code>function</code><code>(){</code>
<code> </code><code>//TODO</code>
<code> </code><code>//修改</code>
<code> </code><code>Edit:</code><code>function</code><code>(){</code>
<code> </code><code>//删除</code>
<code> </code><code>Del:</code><code>function</code><code>(){</code>
<code> </code><code>AppendHtml:</code><code>function</code><code>(title){</code>
<code> </code><code>var</code> <code>oDiv=document.createElement(</code><code>'div'</code><code>);</code>
<code> </code><code>oDiv.className=</code><code>'taskItem'</code><code>;</code>
<code> </code><code>var</code> <code>oLabel=document.createElement(</code><code>'label'</code><code>);</code>
<code> </code><code>oLabel.className=</code><code>'on'</code><code>;</code>
<code> </code><code>var</code> <code>oSpan=document.createElement(</code><code>'span'</code><code>);</code>
<code> </code><code>oSpan.className=</code><code>'taskTitle'</code><code>;</code>
<code> </code><code>var</code> <code>oText=document.createTextNode(title);</code>
<code> </code><code>oSpan.appendChild(oText);</code>
<code> </code><code>oDiv.appendChild(oLabel);</code>
<code> </code><code>oDiv.appendChild(oSpan);</code>
<code> </code><code>//注冊事件</code>
<code> </code><code>oDiv.addEventListener(</code><code>'click'</code><code>,</code><code>function</code><code>(){</code>
<code> </code><code>//TODO</code>
<code> </code><code>Tasks.$taskItemList.appendChild(oDiv); </code>
<code> </code><code>RemoveHtml:</code><code>function</code><code>(){</code>
代碼中尚未實作的部分，我們将會在下節詳細講解其實作。
本文轉自黃聰部落格園部落格，原文連結：http://www.cnblogs.com/huangcong/p/3531725.html，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)