Js 按照MVC模式制作自定义控件

在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事件有唯一性。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有