A JavaScript Design Pattern
// Simple class design mode
// Define a class class1
Function class1 (){
// Constructor
}
// Define class members by specifying prototype objects
Class1.prototype = {
SomeProperty: "simple ",
SomeMethod: function {
// Method code
},
// Actually attributes and Methods
} Mutual reference between members of a class must be performed using the this pointer. Because the first attribute and method in JavaScript are independent, they are linked to an object through the this pointer.
// Simple event design mode with Parameters
<Script language = "JavaScript" type = "text/javascript">
<! --
// Encapsulate a function with parameters as a function without Parameters
Function createFunction (obj, strFunc ){
Var args = []; // defines the parameters that args uses to store the parameters passed to the event handler.
If (! Obj) obj = window; // if it is a global function, obj = window;
// Obtain the parameters passed to the event handler.
For (var I = 2; I <arguments. length; I ++ ){
Args. push (arguments [I]);
}
// Encapsulate the call of the event handler using a non-Parameter Function
Return function (){
Obj [strFunc]. apply (obj, args); // pass the parameter to the specified event handler
}
}
// Define class class1
Function class1 (){
// Constructor
}
Class. prototype = {
Show: function (){
// Implement the show Function
This. onshow (); // triggers the onshow event
},
OnShow: function () {}// defines the event Interface
}
// Create a class1 instance
Var obj = new class1 ();
// Create the obj onshow event handler
Function objOnshow (userName ){
Alert ("hello," + userName );
}
// Define the variable userName
Var userName = "terry ";
// Bind the obj onShow event
Obj. onShow = createFunction (null, "objOnshow", userName );
// Call the show method of obj
Obj. show ();
// -->
</Script>
Through createFunction encapsulation, you can use a general solution to implement parameter transfer.
// A simple development framework
<Script language = "javascript">
Var http_request = false;
Function send_request (url) {// initialize, specify the processing function, and send the request function
Http_request = false;
// Start initializing the XMLHttpRequest object
If (window. XMLHttpRequest) {// Mozilla Browser
Http_request = new XMLHttpRequest ();
If (http_request.overrideMimeType) {// sets the MiME category
Http_request.overrideMimeType ("text/xml ");
}
}
Else if (window. ActiveXObject) {// IE browser
Try {
Http_request = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (e ){
Try {
Http_request = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (e ){}
}
}
If (! Http_request) {// exception. An error occurred while creating the object instance.
Window. alert ("the XMLHttpRequest object instance cannot be created .");
Return false;
}
Http_request.onreadystatechange = processRequest;
// Determine the request sending method and URL and whether to execute the following code synchronously
Http_request.open ("GET", url, true );
Http_request.send (null );
}
// Function for processing the returned information
Function processRequest (){
If (http_request.readyState = 4) {// judge the object status
If (http_request.status = 200) {// The information has been returned successfully. Start to process the information.
Alert (http_request.responseText );
} Else {// The page is abnormal.
Alert ("the page you requested has an exception. ");
}
}
}
</Script>