JavaScript creates custom controls in MVC mode _ Javascript tutorial

JavaScript: JavaScript creates custom controls in MVC mode. Javascript tutorial

Javascript is often used in web development. js class files are usually produced to improve efficiency. In this way, update reuse is convenient. The following describes how to define custom controls for js files based on one of my cases.

I. design requirements

In this requirement, we need to create a set of Student Score information from the webservice, and then display the score on the page based on whether the pass is successful or not. Of course, some simple interaction effects need to be added.

According to the MVC design, we define M (Data Model) including data connection and data analysis and reorganization. V presentation layer: Use document. write to write the page. C container, control layer. Associate M with V.

They are named as assessmentList (performance Layer), assessmentListData (data layer), and assessmentListContrl (Controller) respectively ).

Ii. Presentation Layer
AssessmentList (Presentation Layer ). Based on my needs, there are mainly two parameters, one is the passing line of the score, and our name is cutScore. The second parameter is the data source at the presentation layer. Here we define it as an Array, which is called scoreArray for easy sorting.

The Code is as follows:

The following is a reference clip: // JavaScript Document MVC-V // Custom assessmntList object // The object is displayed in three statuses: Download, No transcript, and score list. // Presentation layer Function assessmentList (cutScore, scoreArray) { This. cutScore = cutScore; // pass score This. scoreArray = scoreArray; This. divGuid = Math. random (); // Internal method. Note: using this. syntax can make the method private and become an instance method, so that the method will not be misused by external programs. 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 =" "; Str + = Math. floor (Number (nu) * 100 ); Str + =""; // Alert (str) Return str; } }; Var _ assessmentList = new assessmentList (); AssessmentList. prototype. build = _ bucket assessmentList; Function _ bucket assessmentlist () { // Construct Document. writeln ("<div id =" assessmentDivLoad "+ this. divGuid +" "class =" assessmentDivLoad "> download score information... this is your first answer. Transcript "); 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. Bucket assessmentList = 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) } } }

[1] [2] Next page