js| control in the Web development often to use JS, in order to improve the efficiency of the general will make JS class files. This is convenient for updating reuse in use. Below, according to a case of my work, describes how to define a JS class file to make a custom control.
First, the design needs
In this demand, we're going to make one, get a set of student scores from WebService, and then show it on the page. And, of course, add some simple interaction effects.
According to the design of MVC, we define m (data model) including data connection and analysis reorganization of data. V presentation layer, using the Document.Write method to write the page. c container, control layer. Associate M with V.
They are named Assessmentlist (presentation layer), Assessmentlistdata (data layer), Assessmentlistcontrl (Controller).
Second, the performance layer
Assessmentlist (performance layer). According to my demand mainly has 2 parameters, one is the grade pass line, we call Cutscore. The second parameter is the data source of the presentation layer, which we define as an array of arrays, because it is convenient to sort, called Scorearray.
The code is as follows:
JavaScript Document Mvc-v
Customizing Assessmntlist objects
The object is divided into 3 display states, downloaded; no transcripts; and scores list
Performance Layer
function Assessmentlist (Cutscore,scorearray)
{
This.cutscore = cutscore;//Pass Score
This.scorearray = Scorearray;
This.divguid = Math.random ();
Internal method, note: Use this. Such syntax can be used to privatize the method and become an instance method so that there is no misuse of the method by the external program
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 ()
{
Structure
Document.writeln ("<div id=" Assessmentdiv "+this.divguid+" "class=" Assessmentdiv "><div id=" Assessmentdivload "+this.divguid+" "class=" Assessmentdivload "> Download performance Information ... </div><div id=" Assessmentdivnodata "+this.divguid+" "class=" Assessmentdivnodata "> This is your first time to answer the question. </div><div id= "assessmentdivlist" +this.divguid+ "class=" Assessmentdivlist "+this.divGuid+"); Mydiv.style.display = ' block '; "+this.divguid+"); mydiv.
Style.display = ' None '; "style=" Cursor:help "> Transcript </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)
}
}
}
The above code is very simple, it should be noted that. AssessmentList.prototype.bulidAssessmentList = function
(Myarray,cutscore). It's life. An instance method is mainly convenient for users to refresh the data source.
In addition, we added a randomly generated numeric suffix to the ID of each div created at Document.writeln.
This is to avoid a page with more than 2 instances, div ID does not repeat, Div onmouseover event has uniqueness.
where var _assessmentlist = new Assessmentlist (); AssessmentList.prototype.build = _bulidassessmentlist;
is the prototype extension. This allows you to initialize the instance with the. Build () method after you have created the instance.
After completing the above code, we can create a new HTM file to test whether the performance layer is working properly.
test.htm
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<!--join WebService connection-->
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>v2</title>
<style>
. assessmentdiv{...} {
font-size:14px;
Background-color: #FFFFCC;
}
. assessmentdivlists{...} {
font-size:12px;
padding-left:10px;
}
. assessmentdivnodata{...} {
Background-color: #FF9900;
Color: #FFFFFF;
Font-weight:bolder;
}
. assessmentdivload{...} {
Background-color: #3399CC;
Color: #FFFFFF;
Font-weight:bolder;
}
. assessmentdivlist{...} {
Background-color: #666600;
Color: #FFFFFF;
Font-weight:bold;
}
. pass{...} {
Color: #666600;
}
. nopass{...} {
Color: #FF3300;
}
</style>
<script language= "javascript" src= "assessmentlist.js" ></script><!--Presentation layer class-->
<body >
<div> Test Transcript Performance </div>
<div><script language= "javascript" type= "Text/javascript" ....
var a =new array (0.4,0.3,0.7,1,0.1,0.3);//This is the test array data.
var Testas = new Assessmentlist (60,a);
Testas.build ();
</script></div>
</body>
Presentation layer creation ended. The next step is data and control.
We talked about the production of the presentation layer, and then the data layer. We can think of it as a warehouse,
Call the method when needed, and of course we'll initialize him before that.
Third, the data layer
We talked about the production of the presentation layer, and then the data layer. We can think of it as a warehouse,
Call the method when needed, and of course we'll initialize him before that.
The following is the code for the data layer:
JavaScript Document mvc-m
SOAP Connection plus DOM analysis
To join the "ajaxrequest.js"
function Assessmentlistdata (Username,assessmentid) {
Structure
var ajaxobj = false;
This.username = UserName;
This.assessmentid=assessmentid;
var objself;
Objself=this;
This.callbackdata=function (cbobj) {return;}
//
Ajaxobj =new ajaxrequest; Creating Ajax Objects
Ajaxobj.method= "POST"; Set the request mode to get
Parameters
Ajaxobj.content= "username=" +username + "&assessmentid=" +assessmentid+ "";
Ajaxobj.url= "Your Web service address/webservice.asmx/getresultinfo"
Set callback function, output response content
Ajaxobj.callback=function (xmlobj) {
Objself.callbackdata (Parsedata (Xmlobj.responsetext));
}
Ajaxobj.send ();
}
//
function Parsedata (str) {
Generate XML
var xmldoc = new ActiveXObject ("Microsoft.XMLDOM");
Xmldoc.async = false;
Xmldoc.loadxml (str);
var XmlElement = xmlDoc.documentElement.getElementsByTagName ("NewDataSet");
Get NewDataSet
var statisticalinfo = xmlelement.item (0);
var resultarray = new Array ();
if (statisticalinfo!=undefined) {
for (i=0;i<statisticalinfo.childnodes.length;i++) {
if (StatisticalInfo.childNodes.item (i). nodename== "Table1") {
Resultarray.push (StatisticalInfo.childNodes.item (i). Childnodes.item (1). text);
}
}
}
return resultarray;
}
Here I used an AJAX called WebService class written by someone else, his name is Ajaxrequest. The use of the method is simple. The Ajaxobj.callback event is invoked when the result is obtained. Again, we map this event to the Assessmentlistdata.cal
Lbackdata of the event.
Then we can test whether this class is normal. Test htm:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<!--join WebService connection-->
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>v2</title>
<script language= "javascript" src= "assessmentlistdata.js" ></script><!--data-tier class-->
<script language= "javascript" src= "Ajaxrequest.js" type= "Text/javascript" > </script><!--Ajax WebService Connection Class-->
<script language= "javascript" type= "Text/javascript" ....
function init () ... {
var data = new Assessmentlistdata ("test01", "86");
Data.callbackdata = function (xmlobj) ... {
alert (xmlobj);
}
}
</script>
<body >
<div> test transcript Data Layer </div>
<div></div>
</body>
Ajaxrequest.js in Blueidea http://www.blueidea.com/download/product/2006/3993.asp
Iv. Control
We've done the function of performance and data, and then we're going to use them in an application,
This requires a controller to control their data logic and the sequence of events. First look at the code:
JavaScript Document MVC = C
function Assessmentlistcontrl (username,assessmentid,cutscore) ... {
var ajaxobj = false;
This.username = UserName;
This.assessmentid=assessmentid;
This.cutscore = Cutscore;
var objself;
Objself=this;
}
var _assessmentlistcontrl = new Assessmentlistcontrl ();
AssessmentListContrl.prototype.build = _bulidassessmentlistcontrl;
function _bulidassessmentlistcontrl ()
... {
var data = new Assessmentlistdata (This.username,this.assessmentid);
var ASL = new Assessmentlist (This.cutscore);
Data.callbackdata = function (xmlobj) ... {
Asl.bulidassessmentlist (Xmlobj,this.cutscore)
}
Download status
Asl.build ();
}
Here it is simpler to create an instance of our presentation layer and data layer and the ASL object. Then set an event callBackData. Let it make the presentation layer change after the data is accepted, and that's it.
To test it, it's just a Assessmentlistcontrl () object, and then run Assessmentlistcontrl.bulid ().
So this little example of us is done. If there is a change in the data layer, or if the presentation layer has new requirements, we can modify only part of it, and the data layer can be reused.
