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

杀马特。学长 韩版系。学妹 提交于 2020-03-07 20:22:58

  1. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
  2. 手把手教你开发Chrome扩展二:为html添加行为
  3. 手把手教你开发Chrome扩展三:关于本地存储数据

上一节我们已经讲了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();
})();

好吧,以下就是本节中所要提到的全部代码:

代码中尚未实现的部分,我们将会在下节详细讲解其实现。
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!