Test af Request.js

Denne demo viser dig hvordan man opretter følgende :

• Opret en Anonymous Funktion i javascript
• Opret en singleton i javascript
• Opret en Request objekt i javascript

Denne demo og sample viser dig, hvor nemt du kan oprette en singleton javascript function.
Antag, at du ønsker at dumpe request parameterne fra en form post eller form get request.

   // Først skal du inkludere singleton object klassen
   <script type="text/javascript" src="Request.js.php"></script>
   // Så skal du teste den nye singleton function
  <script type="text/javascript">
	  alert("test af Hej:"+Request.getParameter("Say"));
  </script>

Meningen med et Singleton pattern som beskrevet i Design Patterns er: "Der kan kun være en instance, og der skal være en global single point reference til denne instance".

Singleton pattern er en af de mest brugte design pattern i Java.

Af en eller anden mystisk grund, så er der ikke særlig mange udviklere, der benytter singleton pattern når de skriver kode i javascript, og selv om dette egentlig er forholdvist nemt.

Den nemmeste løsning er at lave en anonymous constructor.

En anonmyous constructor kaldes sådan, fordi den ikke har nogen constructor. Se eksempel.

Design Patterns i JavaScript:
Selvom JavaScript ikke implementerer det rigtige Singleton pattern, så lugter det lidt derhen af fordi JavaScript IKKE et object-orienteret sprog, Men det er dog muligt at simulere Singleton pattern ved at benytte en anonymous function til at instanciere et nyt object som gemmer en reference i en global variable.

Indholdfortegnelse

• Singleton Pattern i JavaScript
• Anonymous Function er nøglen
• Eksempler af Anonymous Functions

I computer science, er singleton design pattern designed til at begrænse instantiation af en class til en (eller få) objekter. Dette er meget benyttet hvor præcist et object er nødvendigt til at koordinere forskellige interactions i systemet.

JavaScript programmer er normalt simple nok til at kunne håndtere den ønskede funtionalitet, uden at benytte Singleton pattern. Men best practice viser at dette kan : clarify code.

Hvis et program kun kræver en instance af et object, hvorfor så ikke benytte en singleton?

Hvis man benytter et object oriented indgangs vinkel for javascript koden, så kan efterfølgende metoder være nemmere at benytte.

Nøglen til dette er at benytte en anonymous functions for at oprette et object som kun er begrænset til en instance i programmet.

Singleton pattern kan simuleres i JavaScript ved:

At benytte en anonymous constructor for at oprette et nyt function object og gemme referencen til dette nye objekt i en global javascript variable.

For eksempel:

	var Request = new function() { 
		// gør et eller andet
	}

Den Anonymous Function er nøglen til løsningen, da en Anonymous Function kun kan kaldes en eneste gang.

Denne "kald kun 1 gang" er faktisk hvad vi ønsker.

Hvorfor kunne vi ikke have benyttet en : Named Function?

Normalt har en function et navn i erklæringen.

For eksempel, i denne function, er navnet "SingleObject" og kommer efter nøgleordet function og før function call operator ().

	// Dette er IKKE en anonymous function,
	// fordi den har et navn, SingleObject
	function SingleObject()	{ 
		// todo
	}

Fordi function SingleObject har et navn, så kan det erklæres flere gange med det samme navn. Her er et eksempel:

	// Først erklæring af SingleObject
	function SingleObject()	{ 
		// do something useful
	}
	// Nu kan du benytte SingleObject flere gange for at oprette flere instancer af det samme objekt 
	// hvor referencen for hver enkelt object bliver gemt i forskellige variable 
	var firstObject  = SingleObject(); 
	var secondObject = SingleObject();

Ovenover, kan vi se at SingleObject blev benyttet til at oprette 2 objekter: firstObject and secondObject.

Selv om de egentlig er forskellige instancer, så er det faktisk det samme objekt, som benyttes, nemlig SingleObject.

Hele ideen med et Singleton pattern er at have flere instancer af det samme objekt.

Og den eneste vej til at undgå at oprette mere end to objekter, er at designe koden således at SingleObject kun kan kaldes en enste gang, og til dette er en anonymous function fremragende at benyte.

Anonymous Functions

Fordi en anonymous function ikke har noget navn, så skal man benytte new keyword til at oprette en instance af dette og for at kunne benytte denne instance senere, så skal man gemme en reference til denne instance i en global variable, dette gøres med en assignment operator =

	// Benyt new keyword og gem en reference i en global variable 
	var Request = new function() { 
		this.getParameter = function(key) {
			return "My parameter:"+key;
		} 
	}

	// Og nu kan du benytte objektet, således
	var value = Request.getParameter('Say');

Det object der blev oprette med en anonymous function blev gemt i en global variable Request. Denne variable indeholder nu en reference til vores singleton object.

Nu kan vi efterfølgende kalde den netode der blev erklæret ved at kalde med dot operator og function call operator () som: Request.getParameter(key).

Bemærk at der er blevet benyttet to anonymous funktioner.

En til at oprette Request objektet og også i selve Request erklæringen til at oprette getParameter() methoden.

Denne metode svarer til en public static final String getParameter() {...} i java

Selv om det ikke var et krav til at benytte en anonymous function til at oprette getParameter() methoden, så er det ret nemt at gøre på denne måde, fordi al koden passer ind i en linie.

Klik for at teste Request objektet
Test

Dette er sample kode som benyttes til at køre demo

Her er så kilde koden

   1:/**
   2: * This class simulates the servlet request object, in a very primitive matter
   3: * class Request {
   4: *    void init();
   5: *    int getKey();
   6: *    void setKey(int i);
   7: *    int getValue();
   8: *    void setValue(int i);
   9: *    int getSize();
  10: *    String getParameter(string key);
  11: * }
  12: * @package javascript
  13: * @author    http://Finn-Rasmussen.com
  14: * @copyright http://Finn-Rasmussen.com
  15: * @date 2004-02-11
  16: * @version 1.0
  17: */
  18:
  19:/**
  20: * The constructor function simulates the java request object
  21: * The Request object is instanciated with the singeton pattern
  22: * The Singleton pattern is simulated in JavaScript by: 
  23: * - Using an anonymous constructor to create a function object 
  24: * - And saving the returned object in an external variable
  25: * <code>
  26: * Assume the url is : test.html?Say=Hello World
  27: * usage:
  28: *   alert( Request.getParameter('Say'));
  29: * Or
  30: *   Request.setKey  (i,key); // Use custom i, key and value
  31: *   Request.setValue(i,value);
  32: *   for (var i=0;i<Request.getSize();i++) {
  33: *      alert(Request.getKey(i)+'='+Request.getValue(i));
  34: *   }
  35: *   alert(Request.getParameter(key));
  36: * </code>
  37: */
  38:var Request = new function() {
  39:        // proporties
  40:        this.key      = new Array();
  41:        this.value    = new Array();
  42:
  43:        // methods
  44:        /**
  45:         * Get the key from the request object
  46:         * @param int index The index of the array
  47:         * @return String   The key at position index
  48:         */
  49:        this.getKey = function(index) {
  50:                return this.key[index];
  51:        }
  52:        
  53:        /**
  54:         * Set the key in the request object
  55:         * @param int    index The index of the array
  56:         * @param String key   The key to set
  57:         */
  58:        this.setKey = function(index,key) {
  59:                this.key[index] = key;
  60:        }
  61:        
  62:        /**
  63:         * Get the value from the request object
  64:         * @param int index The index of the array
  65:         * @return String   The value at position index
  66:         */
  67:        this.getValue = function(index) {
  68:                return this.value[index];
  69:        }
  70:        
  71:        /**
  72:         * Set the value in the request object
  73:         * @param int    index The index of the array
  74:         * @param String value The value to set
  75:         */
  76:        this.setValue = function(index,value) {
  77:                this.value[index] = value;
  78:        }
  79:
  80:
  81:        /**
  82:         * Get the size of the key/value pair for the request object
  83:         * @return int The size of the array
  84:         */
  85:        this.getSize = function() {
  86:                if (this.key.length!==this.value.length) {
  87:                        alert("Error in Request.js, function getSize(), differences found in the length
length of this.key.length="+this.key.length+"
length of this.value.length="+this.value.length);
  88:                }
  89:                return this.key.length;
  90:        }
  91:
  92:        /**
  93:         * Simulates the java request object used in jsp/servlet
  94:         * Get the value from the key in the request object
  95:         * @param  String key The key to use as lookup
  96:         * @return String The value associated with the key
  97:         */
  98:        this.getParameter = function(key) {
  99:                var value = '';
 100:                for (var i=0;i<this.getSize();i++) {
 101:                        if (key===this.getKey(i)) {
 102:                                // Found a match
 103:                                value = this.getValue(i);
 104:                        }
 105:                }
 106:                return value;
 107:        }
 108:        
 109:        /**
 110:         * The init methode parses the query string and inserts the key/value pairs into the array
 111:         */
 112:        this.init = function() {
 113:                var url      = '' + document.location.href;
 114:                var query    = url.split('?');
 115:                if (query[1]) { // Any query string?
 116:                        var pairs = query[1].split('&'); // Get all key/value pairs x=a&y=b&z=c ...
 117:                        for(var i=0;i<pairs.length;i++) {
 118:                                var keyValue = pairs[i].split('='); // Find key/value pair x=a
 119:                                if (keyValue[1]) {
 120:                                        this.setKey  (i,keyValue[0]); // Create request elements
 121:                                        this.setValue(i,keyValue[1]);
 122:                                } else {
 123:                                        // value = '', So skip this
 124:                                }
 125:                        }
 126:                } else {
 127:                        // No request parameters found
 128:                }
 129:        }
 130:        
 131:        /**
 132:         * Initialize the request object with any request parameters, if any.
 133:         */
 134:        this.init();
 135:}

Demo af følgende javascript funktionalitet

De følgende demo samples viser dig hvordan man opretter en singleton i javascript og hvordan man kan kode en dato formatter og formatere et beløb med det locale der er gældende for dit område

• Format af Dato og Amount eller beløb
• Request object som en singleton
• Se Kilde koden for PHP
• Demo af index.ASP
• Download Kilde koden til PHP
• Download Kilde koden til Java og JSP
• Download Kilde koden til C# og .NET og ASP med .NET framework