JavaScript按照MVC模式制作自定义控件(1)
2006-10-31 15:56
253 查看
引:
在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>
表现层创建结束。接下来是数据与控制了。
在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>
表现层创建结束。接下来是数据与控制了。
相关文章推荐
- JavaScript按照MVC模式制作自定义控件
- JavaScript按照MVC模式制作自定义控件(2)
- JavaScript按照MVC模式制作自定义控件(3)
- Js 按照MVC模式制作自定义控件
- 用JavaScript制作趣味计数器
- 制作JavaScript选择器(2)查询链
- Javascript制作站内搜索
- javascript制作省市联动等类似二级目录
- 分享个用JavaScript制作的简单图片展播代码
- 网页制作中最有用的免费Ajax和JavaScript代码库
- 一起学android之自定义控件一起制作自定义标签(39)
- 用Javascript制作一个可自动填写的文本框(全文完)
- 构建自定义控件之五——自定义控件集成javascript
- Javascript 调用XML制作连动下拉框
- 利用Javascript制作网页特效(其他常见特效)
- Javascript 制作图形验证码实例详解
- 利用JavaScript基础制作小样品
- 教你如何制作网页上的友情链接--JavaScript基础
- 简单Ajax Javascript制作的RSS阅读器
- javascript制作照片墙及制作过程中出现的问题