Js 按照MVC模式制作自定义控件
作者:ppanyong 发布时间:2008-10-12 12:11:00
在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()方法初始化实例了。
猜你喜欢
- 当where子句对某一列使用函数时,除非利用这个简单的技术强制索引,否则Oracle优化器不能在查询中使用索引。通常情况下,如果在WHERE
- 头疼的挂马事件申请了个免费空间弄了个小站空间还可以二年多了挺稳定的只是从今年年初开始网页老莫名奇妙的被人挂马仔细检查了网站 不存在什么漏洞应
- 内容摘要:这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理,实例是实现一个日期选择下拉菜单。首先来分析一下日期下拉菜
- Jabob Nielsen提出的10个可用性原则中有一个原则-防止出错(Error Prevention)。官网中有对这一原则的具体解释,这
- 最近一直在“深山老林”中修炼“支付宝新版收银台”,经历了白板设计,视觉设计,前端开发,前后端联调各个阶段。点点滴滴……重点谈谈对交互设计的感
- 如何在约定时间显示特定的提示信息?<%Function Greeting()
- 通常我们做网站,设计版面布局是第一步,如何做到版面布局具有创意又美观大方呢?这就需要一定的版面处理功底。让我们先来了解一下版面布局的步骤:一
- 这里是一个使用日期函数的例子。下面的查询选择了所有记录,其date_col的值是在最后30天以内: mysql>
- BluePrint是一个非常成熟也非常流行的CSS框架,很多网站和wordpress基于Blueprint搭建前端结构。最近,bluepri
- 其实我这样做的本意是为了防止盗链!大家帮忙看一下通过代码能够根治盗链!只要不是HTTP_REFERER来源于(google.com goog
- 下列语句部分是Mssql语句,不可以在access中使用。SQL语句分类:DDL—数据定义语言(CREATE,ALTER,DROP,DECL
- 之前在豆瓣上听到有友邻在抱怨卓越的配送速度慢得跟蜗牛一样,超过配送时间期限几天还没送到,当时不太相信,因为此前在卓越网上购买的物品基本上是在
- 什么是 JScript?JScript 是由微软开发的活动脚本语言,基于 ECMAScript 规范实现。Internet Explorer
- 1、 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务。 2、 开始->程序->Oracle - OraHome81-
- 1.INPUT和图片按钮对齐:<form method="post" action="
- FCKeditor至今已经到了2.3.1版本了,对于国内的WEB开发者来说,也基本上都已经“闻风知多少”了,很多人将其融放到自己的项目中,更
- 阅读上一篇:W3C优质网页小贴士(三)明智地选择 URI没有什么比走到你最喜欢的商店门口,却发现店门紧闭,而且没有看见店面搬迁告示这种事情还
- 一、PL/SQL出现的目的 结构化查询语言(Structured Query Language,简称SQL)是用来访问关系型数据库一种通用语
- 外面很多所谓sitemap生成代码都只生成目录文件地址,没生成动态的,我后来自己写了这个,是支持动态的,例子: 如你是文章网站,文章有200
- 很久以前就知道微软的Petshop的很经典,昨天抽出时间去学习,一开始还真的不适应,什么成员资格,还真的看不太懂,运行petshop想从登陆