首页  »  网页设计教程  »  Js 按照MVC模式制作自定义控件

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

浏览数:共 3335 次     评论:共 0 条     发布日期:2012-04-12     分类:javascript

在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&nb



上一篇:JS实现仿新浪信息提示效果
下一篇:滑动展开/收缩广告源码实例效果