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。代码如下：/ JavaScript Document MVC - V/自定义assessmntList对象/该对象分3种显示状态，下载中；没有成绩单；和成绩列表 /表现层function assessmentList(cutScore,scoreArray) this.cutScore = cutScore;/及格分数 this.scoreArray = scoreArray; this.divGuid = Math.random(); /内部方法，注意：使用this.这样的语法可以使方法私有化，成为实例方法，这样就不会出现方法被外部程序误用的事情 this.hideDiv = function (id) var mydiv = document.getElementById(id); mydiv.style.display = none; this.writeList = function (myArray,cutScore) var tmparray = myArray; tmparray.sort(); for(var i in tmparray) this.addAssementItem(String(assessmentDivLists+this.divGuid),tmparrayi,cutScore); this.showDiv = function showDiv(id) var mydiv = document.getElementById(id); mydiv.style.display = block; this.addAssementItem = function (id,nu,cutScore) var mydiv = document.getElementById(id); /alert(mydiv.id) mydiv.innerHTML+=this.addAssementItemContent(nu,cutScore); this.addAssementItemContent = function (nu,cutScore) var passstr= if(Number(nu*100)Number(cutScore) passstr=pass else passstr =nopass var str = ; str+=Math.floor(Number(nu)*100); str+=; /alert(str) return str; ;var _assessmentList = new assessmentList(); assessmentLtotype.build = _bulidassessmentList; function _bulidassessmentList() /构造 document.writeln(下载成绩信息.这是你第一次答题。成绩单); if(this.scoreArray=null) this.hideDiv(assessmentDivNodata+this.divGuid); this.hideDiv(assessmentDivList+this.divGuid); else if(this.scoreArray.length=0) this.hideDiv(assessmentDivLoad+this.divGuid); this.hideDiv(assessmentDivList+this.divGuid); else if(this.scoreArray.length0) this.hideDiv(assessmentDivLoad+this.divGuid); this.hideDiv(assessmentDivNodata+this.divGuid); this.writeList(this.scoreArray,this.cutScore); this.hideDiv(assessmentDivLists+this.divGuid); ;/assessmentLtotype.bulidAssessmentList = function (myArray,cutScore) if(myArray=null|myArray=undefined) else var tmparray = new Array(); tmparray =myArray; tmparray.sort(); for(var i in tmparray) this.addAssementItem(String(assessmentDivLists+this.divGuid),tmparrayi,cutScore); if(myArray.length0) this.hideDiv(assessmentDivLoad+this.divGuid); this.hideDiv(assessmentDivNodata+this.divGuid); this.showDiv(assessmentDivList+this.divGuid) else if(myArray.length=0) this.hideDiv(assessmentDivList+this.divGuid); this.hideDiv(assessmentDivLoad+this.divGuid); this.showDiv(assessmentDivNodata+this.divGuid) 以上代码很简单，要注意的是。assessmentLtotype.bulidAssessmentList = function (myArray,cutScore).这是生命了一个实例方法，主要是方便用户使用的刷新数据源的。另外，我们在document.writeln时对每个创建的div的id加了一个随机生成的数字后缀。这样做是为了避免一个页面出现2个以上的实例时，div的id不重复，div的onmouseover事件有唯一性。其中var _assessmentLi