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

时间 2019-11-20

标签手把手开发 chrome 扩展 html 添加行为栏目 Chrome 繁體版

原文原文链接

上一节咱们已经讲了Chrome扩展的基础知识，并构建了基础的html，这一节咱们将就html DOM添加部分添加脚本，即脚本在咱们的popup页面中进行的操做，页面所产生的变化。 html

正常状况下数据处理加载完成状态，这些数据是从本地数据读取的。 html5

点击“添加新项”，出现输入框，输入文字后回车提交数据： chrome

添加完成后将数据存储，同时添加DOM元素：网络

考虑到功能最简化处理，点击已标为完成的任务，将提示“删除或重置为未完成”： dom

以上功能为最核心功能，能够在此基础上进行扩展，好比任务分组，修改任务，任务提醒，网络同步数据等等。 ide

下面开始相应的脚本内容。函数

为了不全局变量，使用匿名函数方式，全部事件处理及数据绑定均在此函数中进行，同时定义与jQuery中的$()相似的函数： this

           (function(){ 
         
               var $=function(id){return document.getElementById(id);} 
         
           })();

创建Tasks对象，定义show()函数和hide()函数，同时存储几个经常使用的DOM对象。 spa

           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书写方式来使用此函数。 htm

而后注册事件：

           //..... 
         
           //初始化 
         
           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

代码中还没有实现的部分，咱们将会在下节详细讲解其实现。