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

爱笑的凑凑凑

爱笑的凑凑凑

2016-01-29 11:29

Js 按照MVC模式制作自定义控件,Js 按照MVC模式制作自定义控件
在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" [next]
        }else{
            passstr ="nopass"
        }
        var str = "<li class=’"+passstr+"’";
        str+=Math.floor(Number(nu)*100);
        str+="</li";
        //alert(str)
        return str;
    
    }
    
};
var _assessmentList&nbs
展开更多 50%)
分享

猜你喜欢

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

电脑网络
Js 按照MVC模式制作自定义控件

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

Web开发
JavaScript按照MVC模式制作自定义控件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

自定义 CRichEditCtrl 控件

C语言教程 C语言函数
自定义 CRichEditCtrl 控件

VC中自定义CRichEditCtrl控件

编程语言 网络编程
VC中自定义CRichEditCtrl控件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

GridView控件自定义分页详解

Web开发
GridView控件自定义分页详解

自定义控件(可以动态加载用户控件)

电脑网络
自定义控件(可以动态加载用户控件)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

《欢乐西游》最强组合阵容攻略

《欢乐西游》最强组合阵容攻略

javascript实例教程(19) 使用HoTMetal(1)

javascript实例教程(19) 使用HoTMetal(1)
下拉加载更多内容 ↓