Advanced Client-Side Scripting

Today's client-side scripts can get large and complex. Client-side scripting may use both script library classes and script library objects to handle such situations.

Script Libraries

Many scripts are reused over many pages in the system. When this happens, it is best to create and to maintain separate script library files (.js). These files contain a number of JavaScript functions that can be included in one shot by the client, making it easier to maintain common scripts. The following class and component stereotypes are used to model these client-side script files.

Name	Script library.
Metamodel class	Class.
Description	Defines a number of JavaScript functions and variables.
Icon
Constraints	None.
Tagged values	None.

Name	Script library.
Metamodel class	Component.
Description	Realizes one or more «script library» classes in the logical view.
Icon
Constraints	None.
Tagged values	None.

Script libraries are modeled very simply (Figure 12-5). A client page draws a directional «script» stereotyped association to a script library class in the logical view. In the component view, a script library component (.js file) is modeled with a «script library» component and exists in a «physical root» hierarchy.

Figure 12-5. A script library with a «script» association in a client page

A script library component realizes a script library class (Figure 12-6).

Figure 12-6. Script library classes, realized by script library components

Script Objects

JavaScript is not a pure object-oriented language, but it can be used in an object-oriented fashion, even to the point of simulating object classes (see Chapter 3, Dynamic Clients). An excellent example of a well-designed, well-implemented JavaScript object is the Menu object, created by Gary Smith of Netscape Communications.[1] JavaScript objects are modeled with a «client script object» stereotyped class, and their attributes and operations are, of course, modeled by the class's attributes and operations. JavaScript does not define types, so no typing is required in the model. If the types are specified, they should be used only as a reference to the implementer.

[1] The full source code and copyright statement can be found in Appendix E.

Name	Client script object.
Metamodel class	Class.
Description	A JavaScript object that has a prototype defined and usually defines a number of member variables and functions.
Icon
Constraints	None.
Tagged values	None.

Figure 12-7 shows a class diagram with a «client script object» defined. The object is instantiated twice by the client page: browseMenu and actionMenu. This diagram also shows that the client script object uses several array instances for member variables. The Array class in this diagram comes from the class model of the JavaScript class library.

Figure 12-7. Class diagram of Menu client script object used by a client page and referencing a JavaScript Array object