上一节我们已经讲了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=)