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

【 tulaoshi.com - Web开发 】

　在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" 下载成绩信息.../divdiv id="assessmentDivNodata"+this.divGuid+ "" class="assessmentDivNodata"这是你第一次答题。/divdiv 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"成绩单/divdiv 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.length0){
        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.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)
        }
    }
}

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

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

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

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

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

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

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