Prototype. js Extension

[Prototype. JS is a javascript class library written by Sam Stephen enson. Creates rich client pages with highly interactive web features.]

1. Javascript class Extension

One way to add functionality to the prototype. js package is to expand the existing JavaScript class.

2. Object Class Extension

Object Class Extension

Method	Category	Parameters	Description
Extend (destination, source)	Static	Destination: any object, source: Any object	An inheritance mechanism is provided by copying all attributes and methods from source to destination.
Extend (object)	Instance	Any object	An inheritance mechanism is provided by copying all attributes and methods from the input object.

3. Number class Extension

Number class Extension

Method	Category	Parameters	Description
Tocolorpart ()	Instance	(None)	Return the hexadecimal description of the number. The color used when the RGB color component is converted to HTML.

4. function class Extension

Function class Extension

Method	Category	Parameters	Description
BIND (object)	Instance	Object: the object that owns this method	Returns a function instance that is pre-bound to an object that owns the function (= method). The returned method will have the same parameters as the original method.
Bindaseventlistener (object)	Instance	Object: the object that owns this method	Returns a function instance that is pre-bound to an object that owns the function (= method). The returned method uses the current event object as its parameter.

Let's take a look at the specific examples of these extensions.

<Input type = checkbox id = mychk value = 1> test?
<SCRIPT>
// Declaring the class
VaR checkboxwatcher = Class. Create ();
// Defining the rest of the class implmentation
Checkboxwatcher. Prototype = {
Initialize: function (chkbox, message ){
This. chkbox = $ (chkbox );
This. Message = message;
// Assigning our method to the event
This. chkbox. onclick = This. showmessage. bindaseventlistener (this );
},
Showmessage: function (EVT ){
Alert (this. Message + '(' + EVT. Type + ')');
}
};
VaR watcher = new checkboxwatcher ('mychk', 'changed ');
</SCRIPT>

5. Extend the string class

String class Extension

Method	Category	Parameters	Description
Striptags ()	Instance	(None)	Returns a string that removes all HTML or XML tags.
Escapehtml ()	Instance	(None)	Returns a string that removes all HTML tags.
Unescapehtml ()	Instance	(None)	Opposite to escapehtml.

6. Extension of the document DOM object

Document DOM object extension

Method	Category	Parameters	Description
Getelementsbyclassname (classname)	Instance	Classname: name of the CSS class associated with the element	Returns all elements with the same CSS class name.

7. Extended event object

Extended event object

Attribute	Type	Description
Key_backspace	Number	8: constant, backspace key code.
Key_tab	Number	9: constant, the code of the tab key.
Key_return	Number	13: constant, enter key code.
Key_esc	Number	27: constant, ESC key code.
Key_left	Number	37: constant, the code of the left arrow key.
Key_up	Number	38: constant, the code of the up arrow key.
Key_right	Number	39: constant, right arrow key code.
Key_down	Number	40: constant, the code of the down arrow key.
Key_delete	Number	46: the code for deleting the (delete) Key.
Observers:	Array	The list of cached observers, which is a part of the internal implementation of this object.

Extended event object

Method	Category	Parameters	Description
Element (Event)	Static	Event: event object	Returns the element that triggers this event.
Isleftclick (Event)	Static	Event: event object	Returns true if you left-click.
Pointerx (Event)	Static	Event: event object	Returns the X coordinate of the page.
Pointery (Event)	Static	Event: event object	Returns the Y coordinate of the page.
Stop (Event)	Static	Event: event object	This method is used to stop the event propagation by suspending the default behavior of the event.
Findelement (event, tagname)	Static	Event: event object, tagname: Specifies the Tag Name	Search for the upper part of the DOM tree, find the first element with the given tag name, and trigger the event from this element.
Observe (element, name, observer, usecapture)	Static	Element: Object ID, name: event name (for example, 'click', 'load', etc), observer: method for processing this event, usecapture: if true, when an event is captured, false is processed in the bubbling phase.	Add a method to handle events.
Stopobserving (element, name, observer, usecapture)	Static	Element: Object ID, name: event name (for example, 'click', 'load', etc), observer: method for processing this event, usecapture: if true, when an event is captured, false is processed in the bubbling phase.	Delete a method for processing practices.
_ Observeandcache (element, name, observer, usecapture)	Static		Private method.
Unloadcache ()	Static	(None)	Private method. The cache is always observed in the memory.

Let's take a look at how to use this object to add a processing method to handle the load event of the window object.

<SCRIPT>
Event. Observe (window, 'load', showmessage, false );

Function showmessage (){
Alert ('page loaded .');
}
</SCRIPT>

8. New objects and classes defined in prototype. js

Another solution that this package helps you is to provide many objects that support both object-oriented design concepts and common functions.

9. periodicalexecuter object

This object provides the logic for repeatedly calling a method at a certain interval.

Periodicalexecuter object

Method	Category	Parameters	Description
[Ctor] (callback, interval)	Constructor	Callback: method without parameters, interval: seconds	The instance that creates this object will repeatedly call the given method.

Periodicalexecuter object

Attribute	Type	Description
Callback	Function ()	The called method. This method is not passed in parameters.
Frequency	Number	The interval in seconds.
Currentlyexecuting	Boolean	Indicates whether the method is being executed.

10. Prototype object

Prototype does not play a very important role, but declares the version of the package.

The prototype object

Attribute	Type	Description
Version	String	Package version.
Emptyfunction	Function ()	Empty method object.

11. Class Object

In this package, class objects are used when other classes are declared. Use this object to declare the class so that the new class supports the initialize () method, which acts as a constructor.

See the following example.

// Declaring the class
VaR mysampleclass = Class. Create ();
// Defining the rest of the class implmentation
Mysampleclass. Prototype =
{
Initialize: function (Message ){
This. Message = message;
}
Showmessage: function (ajaxresponse ){
Alert (this. Message );
}
};
// Now, let's instantiate and use one object
VaR mytalker = new mysampleclass ('Hi there .');
Mytalker. showmessage (); // displays alert

Class Object

Method	Category	Parameters	Description
Create (*)	Instance	(Any)	Define the constructor of the new class.