中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

在web開發(fā)中常常要使用js，為了提高效率一般都會(huì)制作js的類文件。這樣在使用中更新復(fù)用都很方便。下面按照我工作中的一個(gè)案例，介紹如何定義js類文件制作自定義的控件。

一、設(shè)計(jì)需求

這個(gè)需求中，我們要制作一個(gè)，從webservice上獲取一組學(xué)生成績信息，然后在頁面上按照及格與否顯示出來。當(dāng)然還要加上一些簡單的互動(dòng)效果。

按照MVC的設(shè)計(jì)，我們定義M（數(shù)據(jù)模型）包括數(shù)據(jù)連接和數(shù)據(jù)的分析重組。V表現(xiàn)層，使用document.write的方法寫頁面。 C容器，控制層。將M與V聯(lián)系起來。
 
他們分別命名成assessmentList（表現(xiàn)層），assessmentListData（數(shù)據(jù)層），assessmentListContrl（控制器）。

二、表現(xiàn)層

assessmentList（表現(xiàn)層）。根據(jù)我的需求主要有2個(gè)參數(shù)，1個(gè)是成績的及格線，我們叫cutScore。第二個(gè)參數(shù)就是表現(xiàn)層的數(shù)據(jù)源，我們這里定義成一個(gè)數(shù)組Array，因?yàn)榉奖闩判颍�叫scoreArray。

代碼如下：

// JavaScript Document MVC - V
//自定義assessmntList對(duì)象
//該對(duì)象分3種顯示狀態(tài)，下載中；沒有成績單；和成績列表
//表現(xiàn)層
function assessmentList(cutScore,scoreArray)
{
    this.cutScore = cutScore;//及格分?jǐn)?shù)
    this.scoreArray = scoreArray;
    this.divGuid = Math.random();
    //內(nèi)部方法，注意：使用this.這樣的語法可以使方法私有化，成為實(shí)例方法，這樣就不會(huì)出現(xiàn)方法被外部程序誤用的事情
    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()
{
    //構(gòu)造
    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)..這是生命了一個(gè)實(shí)例方法，主要是方便用戶使用的刷新數(shù)據(jù)源的。另外，我們?cè)赿ocument.writeln時(shí)對(duì)每個(gè)創(chuàng)建的div的id加了一個(gè)隨機(jī)生成的數(shù)字后綴。這樣做是為了避免一個(gè)頁面出現(xiàn)2個(gè)以上的實(shí)例時(shí)，div的id不重復(fù)，div的onmouseover事件有唯一性。

其中var _assessmentList = new assessmentList(); assessmentList.prototype.build = _bulidassessmentList; 是原型擴(kuò)展。這樣在創(chuàng)建好實(shí)例后就可以通過 .build()方法初始化實(shí)例了。

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁 下一頁 Js 按照MVC模式制作自定義控件 [2]

◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論