手把手教你开发Chrome扩展二：为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();

})();

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