黄聪：360浏览器、chrome开发扩展插件教程（2）为html添加行为

浏览数：29 / 时间：2015年06月09日

转载：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();
})();