Js制作自定义控件.doc

Js制作自定义控件

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

一、设计需求

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

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

他们分别命名成assessmentList（表现层），assessmentListData（数据层），assessmentListContrl（控制器）。

二、表现层

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

代码如下：

//JavaScriptDocumentMVC-V
//自定义assessmntList对象
//该对象分3种显示状态，下载中；没有成绩单；和成绩列表
//表现层
functionassessmentList(cutScore,scoreArray)
{
this.cutScore=cutScore;//及格分数
this.scoreArray=scoreArray;
this.divGuid=Math.random();
//内部方法，注意：使用this.这样的语法可以使方法私有化，成为实例方法，这样就不会出现方法被外部程序误用的事情
this.hideDiv=function(id){
varmydiv=document.getElementById(id);
mydiv.style.display="none";
}
this.writeList=function(myArray,cutScore){
vartmparray=myArray;
tmparray.sort();
for(variintmparray){
this.addAssementItem(String("assessmentDivLists"+this.divGuid),tmparray[i],cutScore);
}
}
this.showDiv=functionshowDiv(id){
varmydiv=document.getElementById(id);
mydiv.style.display="block";
}
this.addAssementItem=function(id,nu,cutScore){
varmydiv=document.getElementById(id);
//alert(mydiv.id)
mydiv.innerHTML+=this.addAssementItemContent(nu,cutScore);
}
this.addAssementItemContent=function(nu,cutScore){
varpassstr=""
if(Number(nu*100)>Number(cutScore)){
passstr="pass"
}else{
passstr="nopass"
}
varstr="<liclass='"+passstr+"'>";
str+=Math.floor(Number(nu)*100);
str+="</li>";
//alert(str)
returnstr;

}

};
var_assessmentList=newassessmentList();
assessmentList.prototype.build=_bulidassessmentList;
function_bulidassessmentList()
{
//构造
document.writeln("<divid="assessmentDiv"+this.divGuid+""class="assessmentDiv"><divid="assessmentDivLoad"+this.divGuid+""class="assessmentDivLoad">下载成绩信息...</div><divid="assessmentDivNodata"+this.divGuid+""class="assessmentDivNodata">这是你第一次答题。</div><divid="assessmentDivList"+this.divGuid+""class="assessmentDivList"onMouseOver="