手把手教你開發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

代碼中還沒有實現的部分，咱們將會在下節詳細講解其實現。