上一节我们已经讲了Chrome扩展的基础知识，并构建了基础的html，这一节我们将就html DOM添加部分添加脚本，即脚本在我们的popup页面中进行的操作，页面所产生的变化。
正常情况下数据处理加载完成状态，这些数据是从本地数据读取的。
点击“添加新项”，出现输入框，输入文字后回车提交数据：
添加完成后将数据存储，同时添加DOM元素：
考虑到功能最简化处理，点击已标为完成的任务，将提示“删除或重置为未完成”：
以上功能为最核心功能，可以在此基础上进行扩展，比如任务分组，修改任务，任务提醒，网络同步数据等等。
下面开始相应的脚本内容。
为了避免全局变量，使用匿名函数方式，所有事件处理及数据绑定均在此函数中进行，同时定义与jQuery中的$()类似的函数：
( function (){ var $= function (id){ return document.getElementById(id);} })(); |
建立Tasks对象，定义show()函数和hide()函数，同时存储几个常用的DOM对象。
var Tasks = { show: function (obj){ obj.className= '' ; return this ; }, hide: function (obj){ obj.className= 'hide' ; return this ; }, //存储dom $addItemDiv:$( 'addItemDiv' ), $addItemInput:$( 'addItemInput' ), $txtTaskTitle:$( 'txtTaskTitle' ), $taskItemList:$( 'taskItemList' ) } |
其中show()函数和hide()函数均使用了链式调用，每次执行此函数均会返回对象本身，这样对象就可以使用形如类似jQuery书写方式来使用此函数。
然后注册事件：
//..... //初始化 init: function (){ /*注册事件*/ //打开添加文本框 Tasks.$addItemDiv.addEventListener( 'click' , function (){ Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv); Tasks.$txtTaskTitle.focus(); }, true ); //回车添加 Tasks.$txtTaskTitle.addEventListener( 'keyup' , function (ev){ var ev=ev || window.event; if (ev.keyCode==13){ //TODO:写入本地数据 Tasks.AppendHtml(task); Tasks.$txtTaskTitle.value= '' ; Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv); } ev.preventDefault(); }, true ); //取消 Tasks.$txtTaskTitle.addEventListener( 'blur' , function (){ Tasks.$txtTaskTitle.value= '' ; Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv); }, true ); //TODO:初始化数据，加载本地数据，生成html }, //.... |
其中待完成部分为我们下一节将重点计到的html5的本地存储功能。再定义数据操作部分，先写上空白函数：
//.... //增加 Add: function (){ //TODO }, //修改 Edit: function (){ //TODO }, //删除 Del: function (){ //TODO }, //... |
还需要初始化此函数使其执行并让匿名函数执行：
( function (){ var Tasks = { //*** } Tasks.init(); })(); |
好吧，以下就是本节中所要提到的全部代码：
( function (){ var $= function (id){ return document.getElementById(id);} var Tasks = { show: function (obj){ obj.className= '' ; return this ; }, hide: function (obj){ obj.className= 'hide' ; return this ; }, //存储dom $addItemDiv:$( 'addItemDiv' ), $addItemInput:$( 'addItemInput' ), $txtTaskTitle:$( 'txtTaskTitle' ), $taskItemList:$( 'taskItemList' ), //初始化 init: function (){ /*注册事件*/ //打开添加文本框 Tasks.$addItemDiv.addEventListener( 'click' , function (){ Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv); Tasks.$txtTaskTitle.focus(); }, true ); //回车添加 Tasks.$txtTaskTitle.addEventListener( 'keyup' , function (ev){ var ev=ev || window.event; if (ev.keyCode==13){ //TODO:写入本地数据 Tasks.AppendHtml(Tasks.$txtTaskTitle.value); Tasks.$txtTaskTitle.value= '' ; Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv); } ev.preventDefault(); }, true ); //取消 Tasks.$txtTaskTitle.addEventListener( 'blur' , function (){ Tasks.$txtTaskTitle.value= '' ; Tasks.hide(Tasks.$addItemInput).show(Tasks.$addItemDiv); }, true ); //TODO:初始化数据，加载本地数据，生成html }, //增加 Add: function (){ //TODO }, //修改 Edit: function (){ //TODO }, //删除 Del: function (){ //TODO }, AppendHtml: function (title){ var oDiv=document.createElement( 'div' ); oDiv.className= 'taskItem' ; var oLabel=document.createElement( 'label' ); oLabel.className= 'on' ; var oSpan=document.createElement( 'span' ); oSpan.className= 'taskTitle' ; var oText=document.createTextNode(title); oSpan.appendChild(oText); oDiv.appendChild(oLabel); oDiv.appendChild(oSpan); //注册事件 oDiv.addEventListener( 'click' , function (){ //TODO }, true ); Tasks.$taskItemList.appendChild(oDiv); }, RemoveHtml: function (){ //TODO } } Tasks.init(); })(); |
代码中尚未实现的部分，我们将会在下节详细讲解其实现。