手把手教你开发Chrome扩展二：为html添加行为

1. 手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单
2. 手把手教你开发Chrome扩展二：为html添加行为
3. 手把手教你开发Chrome扩展三：关于本地存储数据

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

好吧，以下就是本节中所要提到的全部代码：

View Code

代码中尚未实现的部分，我们将会在下节详细讲解其实现。

转载于:https://my.oschina.net/Rayn/blog/97665