Advanced Articles for developing intelligent Web applications with Ajax (1)

Ajax|web| Program | Advanced

One, Ajax language-Object-oriented JavaScript

By definition, JavaScript is a typical Ajax language. Unlike Java,javascript, which does not emphasize OO-style coding. However, it is surprising that JavaScript fully supports the main attributes of all OO languages: encapsulation, inheritance, and polymorphism. Douglas Crockford even called JavaScript "the most misunderstood programming language in the world." Let's look at the object-oriented aspects of JavaScript.

Data type

In Java, a class defines a combination of data and its associated behavior. Although JavaScript retains the class keyword, it does not support the same semantics as the regular OOP language.

This may sound strange, but in JavaScript, objects are defined by functions. In fact, by defining a function in the following example, you define a simple null class calculator:

function Calculator () {}

the creation of a new instance is the same as in Java-use the new operator:

var mycalculator = new Calculator ();

the above function not only defines a class, but also serves as a constructor. Here, operator new implements this trick-instantiating a class-calculator object and returning an object reference instead of just calling the function.





It is true to create such an empty class, but in practice it is of little use. Next, we're going to use a java-script prototype structure to populate the class definition. JavaScript uses prototypes as templates for creating objects. All prototype properties and methods are copied to each object of a class by reference, so they all have the same value. You can change the value of a stereotype attribute in an object, and the new value overrides the default value copied from the prototype, but only for one instance. The following statement adds a new property to the prototype of the Calculator object:

Calculator.prototype._prop = 0;

since JavaScript does not provide a way to represent a class definition on a clause, we will use the WITH statement to mark the definition boundary of the class. This will also make the sample code shorter, because the WITH statement is allowed to execute a series of statements on a specified object without having to restrict attributes.

function Calculator () {}; With (Calculator) { Prototype._prop = 0; Prototype.setprop = function (p) {_prop = P}; Prototype.getprop = function () {return _prop}; }

so far, we have defined and initialized the public variable _prop, and provided it with getter and setter methods.





need to define a static variable? You can think of a static variable as a variable owned by a class. Because classes in JavaScript are described by Function objects, we simply add a new attribute to the function:

calculator.icount=0;

now, since this icount variable is a property of a calculator object, it will be shared by all instances of the class calculator.

function Calculator () {calculator.icount++;};

The above code calculates the number of all instances of the class calculator.





Package





through the use of "Calculator" as defined above, we can access all "class" data, however, this increases the risk of naming conflicts in derived classes. We obviously need to encapsulate the object as a self-contained entity.




A standard language mechanism for
data encapsulation is to use private variables. And a commonly used JavaScript technique to emulate a private variable is to define a local variable in the constructor, so that local variables can be accessed only by getter and setter-they are internal functions within the constructor. In the following instance, the _prop variable is defined in the calculator function and is not visible outside the scope of the function. There are two anonymous internal functions (assigned to SetProp and Getprop respectively) that let us access "private" variables. Also, please note that this is used here-very similar to the usage in Java:

function Calculator () { var _prop = 0; This.setprop = function (p) {_prop = P}; This.getprop = function () {return _prop}; };

Often overlooked is the cost of such encapsulation in JavaScript. Notice that this price may be enormous, because the intrinsic function object is repeatedly created for each instance of the "class".

So, since building objects based on prototypes is faster and consumes less memory, we specifically support the use of public variables in places that emphasize performance. Note that you can use naming conventions to avoid name collisions-for example, by adding the class name to the front of a public variable. Inherited

At first glance, JavaScript lacks support for class hierarchies, which is similar to the expectations of object-oriented language programmers for modern languages. However, although JavaScript syntax does not support class inheritance like Java, we can still implement inheritance in JavaScript-by copying an instance of the defined class to the prototype of its derived class.

Before we provide an example, we need to introduce a constructor property. JavaScript guarantees that each prototype contains constructor-that it has a reference to the constructor function. In other words, Calculator.prototype.constructor contains a reference to the Calculator ().

Now, the following code shows how to calculator derived class Arithmeticcalculator from a base class. Where the "first row" gets all the attributes of the class calculator, while the "second row" restores the prototype constructor value to Arithmeticcalculator:

function Arithmeticcalculator () {}; With (Arithmeticcalculator) { Arithmeticcalculator. prototype = new Calculator ();//First line Prototype.constructor = arithmeticcalculator;//Second line }

Even though the above example looks like a composite rather than an inheritance, the JavaScript engine is aware of the prototype chain. In particular, the instanceof operator will correctly apply to the base class and derived classes. Suppose you create a new instance of the class Arithmeticcalculator:

var c = new Arithmeticcalculator;

Expression C instanceof Calculator and C instanceof Arithmeticcalculator will all be established.

Note that the constructor of the base class in the above example is invoked when the Arithmeticcalculator prototype is initialized, and is not invoked when an instance of a derived class is created. This can lead to unwanted negative effects, and you should consider creating a separate function for initialization. Because the constructor is not a member function, it cannot be invoked through the this reference reference. We will need a "Calculator" member function that can call the superclass:

function Calculator (OPS) {...}; With (Calculator) {prototype. Calculator=calculator;}

Now, we can write an inheritance class-it explicitly calls the constructor of the base class:

function Arithmeticcalculator (OPS) {this. Calculator (OPS); With (Arithmeticcalculator) { Arithmeticcalculator. prototype = new Calculator; Prototype.constructor = Arithmeticcalculator; Prototype. Arithmeticcalculator = Arithmeticcalculator; }

Polymorphism



JavaScript is an untyped language-everything is an object here. So if there are two classes A and B, and they all define an foo (), then JavaScript will allow polymorphic invocation of Foo () on instances of A and B, even if there is no hierarchy (albeit achievable). From this point of view, JavaScript provides a wider polymorphism than Java. This flexibility, as always, has to be paid. In this case, the cost is to type check the work agent to the application code. Specifically, if you need to check that a reference does point to a desired base class, this can be done by the instanceof operator.

On the other hand, JavaScript does not check for arguments in function calls-this prevents the use of the same naming and different parameters to define polymorphic functions (and let the compiler choose the correct signature). Instead, JavaScript provides a argument object within the Java 5-style function-it allows you to implement a different behavior depending on the type and number of parameters.

Second, the example shows

The source code Listing 1 attached to this article implements a calculator-it can compute an expression with a reverse Polish flag. The example shows the main techniques described in this article and also describes the use of some unique JavaScript features, such as accessing object properties as an array element in a dynamic function call.

To make listing 1 work, we need to prepare some additional code-they are used to instantiate the Calculator object and invoke the Evaluate method:

var e = new Arithmeticcalcuator ([2,2,5, "Add", "Mul"]); Alert (E.evaluate ());

Third, the AJAX component authorization

All of the AJAX component authorization schemes are logically divided into two groups today. Specifically, the first group is for seamless integration with html-based UI definitions. The second group used HTML as a UI definition language to support some kind of XML. In this article, we present a method from the first group-although it exists in the browser and is similar to a JSP tag. These browser-specific component authorization extensions are referred to as element behavior in IE, and in the most recent version of Firefox,mozilla and Netscape 8 scenarios, they are called extensible bindings.

Four, custom label

Internet Explorer, starting with version 5.5, supports JavaScript authorization for custom client HTML elements. Unlike JSP tags, these objects are not preprocessed to HTML on the server side. Instead, they become a legitimate extension of the standard HTML object model, and everything, including the construction controls, occurs dynamically on the client. Similarly, a browser based on the gecko-engine can dynamically decorate any existing HTML element with a reusable feature.

Therefore, it is possible to build a library of rich UI components with methods, events, and properties that have HTML syntax. Such a component can be freely mixed in standard HTML. Internally, these components will communicate with the application server-in AJAX style. In other words, it is possible (and relatively simply) to build your own Ajax object model.

This method of IE flavor is called HTC or HTML component, and its gecko version is called xbl-Extensible Binding language (extensible bindings Language). For the purposes of this article, we focus on IE.

[1] [2] Next page