进入旧版 | 服务项目 | 成功案例 | 联系方式 | 过客留言 | 友情链接
   
设为首页
加入收藏
联系我们
网站首页 | 新闻资讯 | 操作系统 | 办公软件 | 网络软件 | 工具软件 | 媒体动画 | 网页制作 | 网站开发 | 程序开发 | 平面设计
Photoshop视频教程 | Word入门 | Flash入门 | JScript | VBScript | ASP | PHP | ADO | 网页特效 | 3DS MAX6.0命令 | 系统进程
您当前的位置:GOODSGY电脑学习网 -> 网站开发 -> JavaScript -> 文章内容  
JavaScript按照MVC模式制作自定义控件

在web开发中常常要使用js,为了提高效率一般都会制作js的类文件。这样在使用中更新复用都很方便。下面按照我工作中的一个案例,介绍如何定义js类文件制作自定义的控件。

一、设计需求

  这个需求中,我们要制作一个,从webservice上获取一组学生成绩信息,然后在页面上按照及格与否显示出来。当然还要加上一些简单的互动效果。

  按照MVC的设计,我们定义M(数据模型)包括数据连接和数据的分析重组。V表现层,使用document.write的方法写页面。 C容器,控制层。将M与V联系起来。
  
  他们分别命名成assessmentList(表现层),assessmentListData(数据层),assessmentListContrl(控制器)。

二、表现层
  assessmentList(表现层)。根据我的需求主要有2个参数,1个是成绩的及格线,我们叫cutScore。第二个参数就是表现层的数据源,我们这里定义成一个数组Array,因为方便排序,叫scoreArray。

  代码如下:www.goodsgy.com

以下是引用片段:
// 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)
        }
    }
}
www.goodsgy.com

[1] [2]  下一页

在百度中搜索:JavaScript按照MVC模式制作自定义控件
在Google中搜索:JavaScript按照MVC模式制作自定义控件
在Yahoo中搜索:JavaScript按照MVC模式制作自定义控件

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘 博采中心 YouNote 和讯网摘 天天收藏
[] [返回上一页] [打 印] [收 藏]

 相关文章    最新文章
· Linux操作系统下的三种Java环境配置方法
· 面向Java程序员的db4o指南: 数组和集合
· Java与.NET 谁才能主宰未来?
· Java编程技术中汉字问题的分析及解决
· Java 泛型的理解与等价实现
· 在Java中利用JCOM实现仿Excel编程详解
· [图文] Java小技巧:关于Cookie的操作
· Java中消除实现继承和面向接口编程
· Java实战篇:设计自己的Annotation
· 使用Java程序的泛型应该注意的几个地方
 
· 用JS解决网站防挂iframe木马的方案
· 技巧 JavaScript常用判断函数
· IE浏览器中一个值得关注的JS问题
· 简易实现DIV圆角的JavaScript代码
· Javascript调用XML制作连动下拉框
· Javascript实现页内查找关键词实例
· JavaScript的系统函数学习
· JavaScript仿Windows关机效果
· javascript弹出窗口问题总结
· 在JS中使用RecordSet对象的GetRows方法

∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
站内搜索

精彩图文
  网站导航  
操作系统 办公软件 网络软件
Vista Windows2003 WindowsXP Windows2000/NT Windows9X/ME Linux 其他 Word Excel Powerpoint Outlook 金山系列 其他 网页浏览 上传下载 联络聊天 邮件工具 服务器软件 网络辅助
工具软件 媒体动画 网页制作
系统工具 媒体工具 压缩工具 图文处理 文件管理 其他 3DMAX Authorware Director Maya 视频处理 其他 Flash Dreamweaver FireWorks FrontPage LiveMotion Golive HTML/CSS 其它
网站开发 平面设计 程序设计
ASP JSP PHP CGI JavaScript VBScript XML/SOAP Web服务器 Photoshop PhotoImpact CorelDraw Illustrator Freehand 设计欣赏 其他 VB VC .NET C/C++ DELPHI JAVA

冀ICP备05019428号
Copyright © 2004-2008 电脑学习网 Inc.All rights reserved.
TEL:13832340607
QQ:39873155
E_Mail:goodsgy(#)hotmail.com   (把(#)替换成@)
MSN:goodsgy(#)hotmail.com   (把(#)替换成@)