在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),tmparray[i],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 = "<li class='"+passstr+"'>"; str+=Math.floor(Number(nu)*100); str+="</li>"; //alert(str) return str; } }; var _assessmentList = new assessmentList(); assessmentList.prototype.build = _bulidassessmentList; function _bulidassessmentList() { //构造 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.style.display = 'none';" style="cursor:help">成绩单</div><div id="assessmentDivLists"+this.divGuid+"" class="assessmentDivLists" ></div></div>"); 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.length>0){ this.hideDiv("assessmentDivLoad"+this.divGuid); this.hideDiv("assessmentDivNodata"+this.divGuid); this.writeList(this.scoreArray,this.cutScore); } this.hideDiv("assessmentDivLists"+this.divGuid); }; // assessmentList.prototype.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),tmparray[i],cutScore); } if(myArray.length>0){ 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) } } }
以上代码很简单,要注意的是。assessmentList.prototype.bulidAssessmentList = function (myArray,cutScore)..这是生命了一个实例方法,主要是方便用户使用的刷新数据源的。另外,我们在document.writeln时对每个创建的div的id加了一个随机生成的数字后缀。这样做是为了避免一个页面出现2个以上的实例时,div的id不重复,div的onmouseover事件有唯一性。
其中var _assessmentList = new assessmentList(); assessmentList.prototype.build = _bulidassessmentList; 是原型扩展。这样在创建好实例后就可以通过 .build()方法初始化实例了。
出处:蓝色理想
责任编辑:moby
上一页 下一页 Js 按照MVC模式制作自定义控件 [2]
◎进入论坛网页制作、网站综合版块参加讨论
|