本周复习的一下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/loading.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()函数，可实现按照图书的类别来填充表格的数据。
同个这个例子，我想说的是，作为一个编程人员，我们要充分利用抽象思想，将具有相同或相似功能的代码对立出来，封装成一个函数，提高代码的重复利用率，使自己在编程过程中达到事半功倍的效果。
原标题：js抽象方法的使用
关键词：JS
我知道了 