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=tempData[index].imgUrl;
}
</script>
</head>
<body>
<div style="border: 1px solid gray; width: 300px; background-color: gray" id="type">
<span>计算机编程</span>
<span>医学</span>
<span>科学</span>
<span>名著</span>
<span>小说</span>
<span>所有图书</span>
</div>
<table border="1px" style="width: 300px; height: auto; float: left">
<thead style="background-color: #2e67c7"><td>书名</td><td>作者</td><td>单价</td></thead>
<tbody id="data"></tbody>
</table>
<div style="border: 1px solid red; width: 400px; height: auto; float: left; margin-left: 20px; display: none;" 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()函数，可实现按照图书的类别来填充表格的数据。
同个这个例子，我想说的是，作为一个编程人员，我们要充分利用抽象思想，将具有相同或相似功能的代码对立出来，封装成一个函数，提高代码的重复利用率，使自己在编程过程中达到事半功倍的效果。
