轉載：http://www.cnblogs.com/walkingp/archive/2011/04/02/2002668.html
上一節我們已經講了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();
})();
|
代碼中尚未實現的部分，我們將會在下節詳細講解其實現。