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

引：

  在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()方法初始化实例了。

完成以上代码后，我们可以新建一个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"   />
< title > v2 </ 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 >
< div >< script  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 >

 

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