你的位置:首页 > Java教程

[Java教程]js抽象方法的使用

  本周复习的一下js和DOM的相关操作,让我感触最深就是js抽象方法的运用,利用抽象可以将具有相同或相似功能的js代码独立出来封装成一个函数,这样可以提高代码的重复利用率,提高代码书写的效率,也可以有效的减少代码的冗余。

  下面我以利用js动态填充表格数据,以及对表格中数据的相关操作为例,对本周所学的抽象方法做一个小结,代码如下:

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style type="text/css">    span:hover{      cursor: pointer;    }    tbody tr:hover{      cursor: pointer;    }  </style>  <script type="text/javascript">    var dataObji=null;  //初始化tbody对象    var colorObj=null; //初始化选中的span对象    var colorTrObj=null;  //初始化选中的tr对象    var showObj=null;  //初始化显示div对象    var typeObj=null;  //初始化图书类型对象    var num=null;  //初始化图书id对象    var bookName=null;  //初始化图书名对象    var author=null;  //初始化图书作者对象    var type=null;  //初始化图书类型对象    var time=null;  //初始化图书出版日期对象    var price=null;  //初始化图书价格对象    var pic=null;  //初始化图书图片对象    //定义图书类数组    var books=[{id:1,bookName:'ASP.net 初级编程',author:'Tom',bookType:'计算机编程',productTime:'1998-04-13',price:56,imgUrl:'./img/1.jpg'},      {id:2,bookName:'本草纲目',author:'Mr Li',bookType:'医学',productTime:'2003-05-3',price:45,imgUrl:'./img/2.jpg'},      {id:3,bookName:'三国演义',author:'罗贯中',bookType:'名著',productTime:'2005-6-16',price:80,imgUrl:'./img/3.jpg'},      {id:4,bookName:'时间简史',author:'霍金',bookType:'科学',productTime:'2012-04-20',price:39,imgUrl:'./img/4.jpg'},      {id:5,bookName:'探索',author:'Jim',bookType:'科学',productTime:'2012-08-10',price:120,imgUrl:'./img/1.jpg'},      {id:6,bookName:'ASP.net 高级编程',author:'Bob',bookType:'计算机编程',productTime:'2013-04-17',price:88,imgUrl:'./img/2.jpg'},      {id:7,bookName:'三个臭皮匠',author:'Linna',bookType:'小说',productTime:'2015-01-20',price:90,imgUrl:'./img/3.jpg'}];    window.onload=function(){      //获取显示图书详情的div对象      showObj=$("show");      //获取文档中的tbody对象      dataObji=$("data");      num=$("Bnum"); //获取图书id对象      bookName=$("Bname");  //获取图书名对象      author=$("Bauthor");  //获取图书作者对象      type=$("Btype");  //获取图书类型对象      time=$("Btime");  //获取图书出版日期对象      price=$("Bprice"); //获取图书价格对象      pic=$("Bpic"); //获取图书图片对象      //填充tbody      fillData(books);      //根据选中的图书类型填充tbody      var selectObj=$("type").getElementsByTagName("span");      for(var i=0;i<selectObj.length;i++){        selectObj[i].onclick=function(){          changeColor(this);        }      }    };    //将数据填充到tbody中    var tempData;//每次填充的数据不一样,用一个临时变量来接收    function fillData(date){      tempData=date;      var str="";      for(var i=0;i<date.length;i++){        str+="<tr onclick='changeTRColor(this,"+i+")'><td>"+date[i].bookName+"</td><td>"+date[i].author+"</td><td>"+date[i].price+"</td></tr>";      }      dataObji.innerHTML=str;    }    //改变选中的span的背景,并创建一个新的数组存储选中的图书类型的图书数据    function changeColor(obj){      if(colorObj!=null){        colorObj.style.backgroundColor="";      }      obj.style.backgroundColor="green";      colorObj=obj;      typeObj=obj.innerHTML;      if(typeObj=="所有图书"){        fillData(books);      }else{        var newBooks=[];        for(var i=0;i<books.length;i++){          if(typeObj==books[i].bookType){            newBooks.push(books[i]);          }        }        fillData(newBooks);      }    }    //根据元素的id获取元素对象    function $(idNO){      return document.getElementById(idNO);    }    //改变选中的tr的背景    function changeTRColor(obj,index){      if(colorTrObj!=null){        colorTrObj.style.backgroundColor="";      }      obj.style.backgroundColor="yellow";      colorTrObj=obj;      showObj.style.display="block";      num.innerHTML=tempData[index].id;      bookName.innerHTML=tempData[index].bookName;      author.innerHTML=tempData[index].author;      type.innerHTML=tempData[index].bookType;      time.innerHTML=tempData[index].productTime;      price.innerHTML=tempData[index].price;      pic.src="/images/loading4.gif" data-original=tempData[index].imgUrl;    }  </script></head><body>  <div id="type">    <span>计算机编程</span>    <span>医学</span>    <span>科学</span>    <span>名著</span>    <span>小说</span>    <span>所有图书</span>  </div>  <table border="1px" >    <thead ><td>书名</td><td>作者</td><td>单价</td></thead>    <tbody id="data"></tbody>  </table>  <div id="show">    书      号:<label id="Bnum"></label><br/>    书      名:<label id="Bname"></label><br/>    作      者:<label id="Bauthor"></label><br/>    类      型:<label id="Btype"></label><br/>    出版日期:<label id="Btime"></label><br/>    单      价:<label id="Bprice"></label><br/>    图      片:<img id="Bpic" width="200px" height="200px" />  </div></body></html>

   其中,通过应用json创建的一个图书类的数组,然后通过js中简单的DOM操作对表格(table)中的tbody动态填充数据,并利用抽象思想封装一个changeColor()的函数,可以实现点击表格的单元格时使其变色;还利用抽象思想封装了一个fillData()函数,可实现按照图书的类别来填充表格的数据。

   同个这个例子,我想说的是,作为一个编程人员,我们要充分利用抽象思想,将具有相同或相似功能的代码对立出来,封装成一个函数,提高代码的重复利用率,使自己在编程过程中达到事半功倍的效果。