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

时间:2010-04-06 12:16:11  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:成绩信息,然后在页面上按照及格与否显示出来。当然还要加上一些简单的互动效果。按照MVC的设计,我们定义M(数据模型)包括数据连接和数据的分析重组。V表现层,使用document.write的方法写页面。 C容器,控制层。将M与V联系起来。  他们分别命名成assessmentList(表现层),assessmentListData(数据层),assessmentListContrl(控制器)。二、表现层...
  正文:

在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.
"Js 按照MVC模式制作自定义控件"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13481.html

 1/4    1 2 3 4 下一页 尾页


关键字:

关于《Js 按照MVC模式制作自定义控件》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td