在web开发中常常要使用js，为了提高效率一般都会制作js的类文件。这样在使用中更新复用都很方便。下面按照我工作中的一个案例，介绍如何定义js类文件制作自定义的控件。

一、设计需求

这个需求中，我们要制作一个，从webservice上获取一组学生成绩信息，然后在页面上按照及格与否显示出来。当然还要加上一些简单的互动效果。

按照MVC的设计，我们定义M（数据模型）包括数据连接和数据的分析重组。V表现层，使用document.write的方法写页面。 C容器，控制层。将M与V联系起来。Qw6Linux联盟
  Qw6Linux联盟
他们分别命名成assessmentList（表现层），assessmentListData（数据层），assessmentListContrl（控制器）。

二、表现层

assessmentList（表现层）。根据我的需求主要有2个参数，1个是成绩的及格线，我们叫cutScore。第二个参数就是表现层的数据源，我们这里定义成一个数组Array，因为方便排序，叫scoreArray。

代码如下：

// JavaScript Document MVC - VQw6Linux联盟
//自定义assessmntList对象Qw6Linux联盟
//该对象分3种显示状态，下载中；没有成绩单；和成绩列表 Qw6Linux联盟
//表现层Qw6Linux联盟
function assessmentList(cutScore,scoreArray)Qw6Linux联盟
{Qw6Linux联盟
    this.cutScore = cutScore;//及格分数Qw6Linux联盟
    this.scoreArray = scoreArray;Qw6Linux联盟
    this.divGuid = Math.random();Qw6Linux联盟
    //内部方法，注意：使用this.这样的语法可以使方法私有化，成为实例方法，这样就不会出现方法被外部程序误用的事情Qw6Linux联盟
    this.hideDiv = function (id){Qw6Linux联盟
        var mydiv = document.getElementById(id);Qw6Linux联盟
        mydiv.style.display  = "none";Qw6Linux联盟
    }Qw6Linux联盟
    this.writeList = function (myArray,cutScore){Qw6Linux联盟
        var tmparray = myArray;Qw6Linux联盟
        tmparray.sort();Qw6Linux联盟
        for(var i in tmparray){Qw6Linux联盟
            this.addAssementItem(String("assessmentDivLists"+this.divGuid),tmparray[i],cutScore);Qw6Linux联盟
        }Qw6Linux联盟
    }Qw6Linux联盟
    this.showDiv = function showDiv(id){Qw6Linux联盟
        var mydiv = document.getElementById(id);Qw6Linux联盟
        mydiv.style.display  = "block";Qw6Linux联盟
    }Qw6Linux联盟
    this.addAssementItem = function (id,nu,cutScore){Qw6Linux联盟
        var mydiv = document.getElementById(id);Qw6Linux联盟
        //alert(mydiv.id)Qw6Linux联盟
        mydiv.innerHTML+=this.addAssementItemContent(nu,cutScore);Qw6Linux联盟
    }Qw6Linux联盟
    this.addAssementItemContent = function (nu,cutScore){Qw6Linux联盟
        var passstr=""Qw6Linux联盟
        if(Number(nu*100)>Number(cutScore)){Qw6Linux联盟
            passstr="pass"Qw6Linux联盟
        }else{Qw6Linux联盟
            passstr ="nopass"Qw6Linux联盟
        }Qw6Linux联盟
        var str = "<li class='"+passstr+"'>";Qw6Linux联盟
        str+=Math.floor(Number(nu)*100);Qw6Linux联盟
        str+="</li>";Qw6Linux联盟
        //alert(str)Qw6Linux联盟
        return str;Qw6Linux联盟
    Qw6Linux联盟
    }Qw6Linux联盟
    Qw6Linux联盟
};Qw6Linux联盟
var _assessmentList = new assessmentList();    Qw6Linux联盟
assessmentList.prototype.build = _bulidassessmentList;    Qw6Linux联盟
function _bulidassessmentList()Qw6Linux联盟
{Qw6Linux联盟
    //构造Qw6Linux联盟
    document.writeln("<div id="assessmentDiv"+this.divGuid+"" class="assessmentDiv"><div id="assessmentDivLoad"+this.divGuid+"" class="assessmentDivLoad" >下载成绩信息...</div><div id="assessmentDivNodata"+this.divGuid+"" class="assessmentDivNodata">这是你第一次答题。</div><div id="assessmentDivList"+this.divGuid+"" class="assessmentDivList" onMouseOver="var mydiv = document.getElementById('assessmentDivLists"+this.divGuid+"');    mydiv.style.display  = 'block';" onMouseOut="var mydiv = document.getElementById('assessmentDivLists"+this.divGuid+"');mydiv.Qw6Linux联盟
style.display  = 'none';" style="cursor:help">成绩单</div><div id="assessmentDivLists"+this.divGuid+"" class="assessmentDivLists" ></div></div>");Qw6Linux联盟
    if(this.scoreArray==null){Qw6Linux联盟
        this.hideDiv("assessmentDivNodata"+this.divGuid);Qw6Linux联盟
        this.hideDiv("assessmentDivList"+this.divGuid);Qw6Linux联盟
    }else if(this.scoreArray.length==0){Qw6Linux联盟
        this.hideDiv("assessmentDivLoad"+this.divGuid);Qw6Linux联盟
        this.hideDiv("assessmentDivList"+this.divGuid);Qw6Linux联盟
        Qw6Linux联盟
    }else if(this.scoreArray.length>0){Qw6Linux联盟
        this.hideDiv("assessmentDivLoad"+this.divGuid);Qw6Linux联盟
        this.hideDiv("assessmentDivNodata"+this.divGuid);Qw6Linux联盟
        this.writeList(this.scoreArray,this.cutScore);Qw6Linux联盟
    }Qw6Linux联盟
    this.hideDiv("assessmentDivLists"+this.divGuid);Qw6Linux联盟
    Qw6Linux联盟
    Qw6Linux联盟
};Qw6Linux联盟
//Qw6Linux联盟
assessmentList.prototype.bulidAssessmentList = function (myArray,cutScore){Qw6Linux联盟
    if(myArray==null||myArray==undefined){Qw6Linux联盟
    }else{Qw6Linux联盟
        var tmparray = new Array();Qw6Linux联盟
        tmparray =myArray;Qw6Linux联盟
        tmparray.sort();Qw6Linux联盟
        for(var i in tmparray){Qw6Linux联盟
            this.addAssementItem(String("assessmentDivLists"+this.divGuid),tmparray[i],cutScore);Qw6Linux联盟
        }Qw6Linux联盟
        if(myArray.length>0){Qw6Linux联盟
            this.hideDiv("assessmentDivLoad"+this.divGuid);Qw6Linux联盟
            this.hideDiv("assessmentDivNodata"+this.divGuid);Qw6Linux联盟
            this.showDiv("assessmentDivList"+this.divGuid)Qw6Linux联盟
        }else if(myArray.length==0){Qw6Linux联盟
            this.hideDiv("assessmentDivList"+this.divGuid);Qw6Linux联盟
            this.hideDiv("assessmentDivLoad"+this.divGuid);Qw6Linux联盟
            this.showDiv("assessmentDivNodata"+this.divGuid)Qw6Linux联盟
        }Qw6Linux联盟
    }Qw6Linux联盟
}

以上代码很简单，要注意的是。assessmentList.prototype.bulidAssessmentList = function Qw6Linux联盟
(myArray,cutScore)..这是生命了一个实例方法，主要是方便用户使用的刷新数据源的。Qw6Linux联盟
另外，我们在document.writeln时对每个创建的div的id加了一个随机生成的数字后缀。Qw6Linux联盟
这样做是为了避免一个页面出现2个以上的实例时，div的id不重复，div的onmouseover事件有唯一性。

其中var _assessmentList = new assessmentList(); assessmentList.prototype.build = _bulidassessmentList;Qw6Linux联盟
是原型扩展。这样在创建好实例后就可以通过 .build()方法初始化实例了。

完成以上代码后，我们可以新建一个htm文件来测试一下表现层的工作是否正常。Qw6Linux联盟
 Qw6Linux联盟
test.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Qw6Linux联盟
<html xmlns="http://www.w3.org/1999/xhtml">Qw6Linux联盟
<head>Qw6Linux联盟
<!--加入webservice连接-->Qw6Linux联盟
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />Qw6Linux联盟
<title>v2</title>Qw6Linux联盟
<style>...Qw6Linux联盟
.assessmentDiv{...}{Qw6Linux联盟
font-size:14px;Qw6Linux联盟
background-color:#FFFFCC;Qw6Linux联盟
}Qw6Linux联盟
.assessmentDivLists{...}{Qw6Linux联盟
font-size:12px;Qw6Linux联盟
padding-left:10px;Qw6Linux联盟
}Qw6Linux联盟
.assessmentDivNodata{...}{Qw6Linux联盟
background-color:#FF9900;Qw6Linux联盟
color:#FFFFFF;Qw6Linux联盟
font-weight:bolder;Qw6Linux联盟
}Qw6Linux联盟
.assessmentDivLoad{...}{Qw6Linux联盟
background-color:#3399CC;Qw6Linux联盟
color:#FFFFFF;Qw6Linux联盟
font-weight:bolder;Qw6Linux联盟
}Qw6Linux联盟
.assessmentDivList{...}{Qw6Linux联盟
background-color:#666600;Qw6Linux联盟
color:#FFFFFF;Qw6Linux联盟
font-weight:bold;Qw6Linux联盟
}Qw6Linux联盟
.pass{...}{Qw6Linux联盟
color:#666600;Qw6Linux联盟
}Qw6Linux联盟
.nopass{...}{Qw6Linux联盟
color:#FF3300;Qw6Linux联盟
}Qw6Linux联盟
</style>Qw6Linux联盟
<script language="javascript" src="assessmentList.js"></script><!--表现层类-->Qw6Linux联盟
</head>

<body >Qw6Linux联盟
<div>测试成绩单 表现</div>Qw6Linux联盟
<div><script language="javascript" type="text/javascript">...Qw6Linux联盟
        var a =new Array(0.4,0.3,0.7,1,0.1,0.3);// 这是测试用的array数据。Qw6Linux联盟
        var testAS = new assessmentList(60,a);    Qw6Linux联盟
        testAS.build();Qw6Linux联盟
</script></div>Qw6Linux联盟
</body>Qw6Linux联盟
</html>

表现层创建结束。接下来是数据与控制了。

前面我们讲了表现层的制作，接下来是数据层了。我们可以把它看成是一个仓库，Qw6Linux联盟
需要的时候就调用方法，当然在这之前我们要初始化他。

三、数据层

前面我们讲了表现层的制作，接下来是数据层了。我们可以把它看成是一个仓库，Qw6Linux联盟
需要的时候就调用方法，当然在这之前我们要初始化他。

下面是数据层的代码：

// JavaScript Document MVC-MQw6Linux联盟
//soap连接加dom分析Qw6Linux联盟
//要加入"ajaxrequest.js" Qw6Linux联盟
function assessmentListData(userName,assessmentID){Qw6Linux联盟
    //构造Qw6Linux联盟
    var ajaxobj = false;Qw6Linux联盟
    this.userName = userName;Qw6Linux联盟
    this.assessmentID=assessmentID;Qw6Linux联盟
    var ObjSelf;Qw6Linux联盟
    ObjSelf=this;Qw6Linux联盟
    this.callbackdata=function(cbobj) {return;}Qw6Linux联盟
    //Qw6Linux联盟
    ajaxobj =new AJAXRequest;    // 创建AJAX对象Qw6Linux联盟
    ajaxobj.method="POST";   // 设置请求方式为GETQw6Linux联盟
    //参数Qw6Linux联盟
    ajaxobj.content="userName="+userName +"&assessmentID="+assessmentID+"";Qw6Linux联盟
    ajaxobj.url="你的web服务地址/WebService.asmx/GetResultInfo"Qw6Linux联盟
    // 设置回调函数，输出响应内容Qw6Linux联盟
    ajaxobj.callback=function(xmlobj) {Qw6Linux联盟
         ObjSelf.callbackdata(parseData(xmlobj.responseText));Qw6Linux联盟
    }Qw6Linux联盟
    ajaxobj.send();  Qw6Linux联盟
}Qw6Linux联盟
//Qw6Linux联盟
function parseData(str){Qw6Linux联盟
    //生成xmlQw6Linux联盟
    var xmlDoc = new ActiveXObject("microsoft.xmldom");Qw6Linux联盟
    xmlDoc.async = false;Qw6Linux联盟
    xmlDoc.loadXML(str);Qw6Linux联盟
    Qw6Linux联盟
    var xmlElement = xmlDoc.documentElement.getElementsByTagName("NewDataSet");Qw6Linux联盟
    //得到newdatasetQw6Linux联盟
    var statisticalInfo = xmlElement.item(0);Qw6Linux联盟
    var resultArray = new Array();Qw6Linux联盟
    if(statisticalInfo!=undefined){Qw6Linux联盟
        for(i=0;i<statisticalInfo.childNodes.length;i++){Qw6Linux联盟
            if(statisticalInfo.childNodes.item(i).nodeName=="Table1"){Qw6Linux联盟
            resultArray.push(statisticalInfo.childNodes.item(i).childNodes.item(1).text);Qw6Linux联盟
            }Qw6Linux联盟
        }Qw6Linux联盟
    }Qw6Linux联盟
    return resultArray;Qw6Linux联盟
}Qw6Linux联盟
在这里我用了一个别人写好的 ajax调用webservice的类，他的名字是AJAXRequest。使用方法很简单。ajaxobj.callback事件就是在得到结果时调用的。同样我们将这个事件映射到assessmentListData.calQw6Linux联盟
lbackdata的事件上。

接着我们就可以测试这个类是否正常。测试htm：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Qw6Linux联盟
<html xmlns="http://www.w3.org/1999/xhtml">Qw6Linux联盟
<head>Qw6Linux联盟
<!--加入webservice连接-->Qw6Linux联盟
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />Qw6Linux联盟
<title>v2</title>Qw6Linux联盟
<script language="javascript" src="assessmentListData.js"></script><!--数据层类-->Qw6Linux联盟
<script language="javascript" src="ajaxrequest.js" type="text/javascript"> </script><!--ajax webservice连接类-->Qw6Linux联盟
<script language="javascript" type="text/javascript">...Qw6Linux联盟
function init()...{Qw6Linux联盟
var data = new assessmentListData("test01","86");Qw6Linux联盟
data.callbackdata = function (xmlobj)...{Qw6Linux联盟
alert(xmlobj);Qw6Linux联盟
}Qw6Linux联盟
}

</script>Qw6Linux联盟
</head>

<body onload="init()">Qw6Linux联盟
<div>测试成绩单数据层</div>Qw6Linux联盟
<div></div>Qw6Linux联盟
</body>Qw6Linux联盟
</html>

Qw6Linux联盟
ajaxrequest.js 在blueidea上下载 http://www.blueidea.com/download/product/2006/3993.asp

四、控制

前面我们完成了，表现和数据的功能，接着就是将他们使用在一个应用中了，Qw6Linux联盟
这就需要一个控制器控制他们的数据逻辑，以及事件的顺序。先看一下代码：

// JavaScript Document MVC = CQw6Linux联盟
function assessmentListContrl(userName,assessmentID,cutScore)...{Qw6Linux联盟
    var ajaxobj = false;Qw6Linux联盟
    this.userName = userName;Qw6Linux联盟
    this.assessmentID=assessmentID;Qw6Linux联盟
    this.cutScore = cutScore;Qw6Linux联盟
    var ObjSelf;Qw6Linux联盟
    ObjSelf=this;Qw6Linux联盟
}

var _assessmentListContrl = new assessmentListContrl();    Qw6Linux联盟
assessmentListContrl.prototype.build = _bulidassessmentListContrl;    Qw6Linux联盟
function _bulidassessmentListContrl()Qw6Linux联盟
...{Qw6Linux联盟
    var data = new assessmentListData(this.userName,this.assessmentID);Qw6Linux联盟
    var ASL = new assessmentList(this.cutScore);Qw6Linux联盟
    data.callbackdata = function (xmlobj)...{Qw6Linux联盟
        ASL.bulidAssessmentList(xmlobj,this.cutScore)Qw6Linux联盟
    }Qw6Linux联盟
    //下载状态Qw6Linux联盟
    ASL.build();Qw6Linux联盟
}

这里比较简单，就先创建我们表现层与数据层的实例 data和ASL这辆个对象。然后设置一个事件callbackdata。让它在数据接受完成后使表现层完成相应的改变，仅此而已。

测试一下，就是new一个assessmentListContrl()对象，然后运行assessmentListContrl.bulid()就可以了。

到此，我们的这个小实例就完成了。如果当数据层有变化，或者表现层有新的需求，我们就可以只修改其中一部分，而且数据层是可以复用的。